hogashi.*

日記から何から。

レポート書いててカジュアルに徹夜したところ胃腸が一日中おかしくて困っている、もはや体力とか自然治癒力とかでカバーできない体になっており心配、レポートは早めに書こうとしても踏ん切りがつかなくて難しい、世の人間が如何にして色々をやっているのか気になるけど多分自分には適用できないので自分の可能な方法をなるはやで見つけたい。

砂嵐つくった

 アナログ放送で見られた砂嵐をブラウザで再現したくなって雑に書いた。ボタンを押すと動いたり止まったりする。

http://hogashi.github.io/suna/suna.html

f:id:hogashi:20171103025139g:plain
様子

 高速すぎてブラウザが固まる場合、解決方法は2つあって、

  • ウィンドウを小さくして再読込する (最初に生成するマスの数を大きさに合わせているので)
  • コードをいじって更新インターバルを長くする

をすると改善すると思う。
(追記 2017/11/03-02:20) スマートフォンでウィンドウサイズ変えられない問題出たので常に適当に大きいマスになるように修正した。

 今の実装では完全にランダムに0~255を生成してrgbすべてに投げているけれど、グレースケール変換はもう少し色々あるし、テレビの砂嵐がどういう傾向で灰色を出しているのか知らないので、あまり近くはなさそう。

github.com

もやい結び習得した

 もやい結びをgoogleで検索して見つつ5回くらいやって習得した。5回くらいやったのはミスって輪をゼロ径にしてたり長さの調整したりとか。解きやすいこともわかって便利。
 wikipediaを流し読んだところ二重8の字結びというのも存在していることがわかり、そっちもついでに習得した。

 定期入れに紐をつけようとしていて、結果的に採用されたのは二重8の字結び。もやい結びは名前から結び方から好きなのでまたどこかで使いたい。

Mac OS XのGoogleChromeでページ真っ白問題

TL;DR

 Mac OS XGoogleChromeでアクセスしたWebページが真っ白になる。一瞬表示されたり、最初から真っ白だったりする。
 chrome://flags で #enable-gpu-rasterization を Disabled にすると解決した。詳細は不明ながら描画で何かが整合しなかった感じだと思う。

わかる範囲

 MacChrome を使っていると、パッと開いたWebサイトのページが真っ白になって何も見えなくなる症状がたまに出るようになった。クリックはできるし、リンクも本文も JavaScript も健在。デベロッパツールから $0.click() とかできる。
 確認したのは Sierra だけどGoogle検索した感じだと何年も前からちょこちょこ出ているような感じ。同じ症状かどうかはわからない。i-フィルタとか出てきたけど入れていないのでそんな訳はない。

 とりあえず flags を見てみて目に入った GPU rasterization を切ったら解決した。エスパーでは?

Windows 10で素朴にlatexmkを叩く

 以前からWindowsSublime Textを使ってLatexToolsプラグインを入れて……とやっていたものの、久しぶりに使ったらどうしようにも上手くビルドできなくなっていた。なのでなんとかした。

 Windows 10 では Bash on Windows を使うと apt で全てが手に入る。確か以下をインストールした。足りなかったら texlive-fonts-recommend とか入れなきゃならないかもしれない。というか texlive-lang-japanese でいいのかもしれない。

$ apt-get install texlive-lang-cjk xpdf

 インストールできたら

$ latexmk -pvc hoge.tex

で監視モードができる。ファイルを更新するごとにタイプセットし直してくれるので、保存するたびにPDFが最新になる。
 監視せず一回だけ走らせたいときは -pvc を外すとよい。

 往々にして ujarticle など日本語文書を使うときに latex とか platex とかをエンジンとして使っていると JY1 なり JY2 なりと書かれたエラーで怒られるけど、
~/.latexmkrc をつくると解決する。以下を参考にした。
qiita.com

 この方法では、ディスプレイを共有できない(少なくとも僕は知らない)のでプレビューが開かない。が、Windows側の SumatraPDF で該当のPDFファイルを開いておけば随時更新されるので、同等といえる。

 どのみち latex をインストールするのであんまり素朴とは言い難いかもしれないけど、 latex なので避けられない*1

蛇足

 最初は、既にWindowslatexをインストールしてしまったので、素朴にコマンドプロンプトからlatexmkを叩こうと思いたった。

latexmk -pvc -e "$latex='uplatex %%O -interaction=batchmode -synctex=1 %%S'" -e "$dvipdf='dvipdfmx %%O -o %%D %%S'" -f -norc -gg -pdfdvi %1

 これをbatファイルにして、環境変数PATHの通った場所に置くと、コマンドプロンプトから呼び出せて便利。SumatraPDFをインストールしてあればそれが起動する、気がする。
 たとえばこのbatファイルを mylatexmk.bat として保存したときは、

> mylatexmk hoge.tex

とすると起動できる。
 この方法ではプレビューがそのまま開く。


 ちなみに、コマンドオプションはよく見ていなくて、LatexToolsの設定からとってきた部分と、 -pvc ってつけると監視モードになるって記憶のみで構成されている。なので後々修正したりしそう。

 ちなみにちなみに、エクスプローラで開いているフォルダを起点にしてコマンドプロンプトを立ち上げるときは、エクスプローラのアドレスバーに cmd と打ち込むと素早い。
 Windowsに拘っている訳は、Sublime Textの日本語入力ができるから。

*1:CloudLatex に curl で POST したら PDF が降ってくるみたいなAPIがほしい

はてなインターーーーーーン

 はてなサマーインターン2017に参加しました! 僕 (id:hogashi) は はてなブログコース での参加でした。
 実を言うとこの文を書いている時点ではまだ参加していて、今は最終日の9/8(金) の午後です。もっと言うと今はまだ最終発表の順位が不明で、後のお楽しみということになりそう、おそらく書き上がるあたりでは新幹線に乗っているはず。時間を感じてください。

 結論から言うとめっっっちゃ楽しかったので はてなインターンに参加してくれ!!

応募

 応募は割と前からしたいと思っていて、というのは大学の先輩で何人も参加していて常々最高だと聞いていたからです。(インターン中もお世話になった id:masawada さん、インターン中の会話に何度も名前が登場した id:miki_bene さんなど)
 普段 JavaScript しか書いていないので4つのコースを見つつどうしようか悩んだものの、フロントエンドをやりたい気持ちではてなブログコースに行きたいな、と応募しました。

前半期間

1週目

 4週間を順を追って書いていくと4週間かかりそうなのでサクサクいきますが、初日の朝は夕立のような雨が降っていて、家から東京駅で新幹線に乗るまでがめちゃめちゃ大変でした。大きい荷物にビニール袋を被せて傘をさしつつ駅まで行きました。この日の夜は慣れないベッドであまり寝られていない。


 アナウンスなどお話を聞いて、環境構築をするところから始まりました。僕の使っている PC は Windows なので、はてなからお借りした MacBook Pro を起動したりしていました。
 ここで OS X をアップデートしたりと色々あったものの無事構築完了して事前課題の講評を受け、自己紹介して歓迎会となりました。他のインターン生の事前課題の出来に圧倒されたり、Scala / Swift のコードを見て全然わからん……となったりしました*1

 翌日からは はてな教科書を使って順に Perl / DB / HTTP・WAF / JS というように講義が進んでいき、各講義の課題をその日のうちにこなして学んでいくスタイルでした。
 Perl をほとんど初めて書いていて、 bless をふんわり理解するまで大分かかったけど、だんだん祝福できるようになっていった気がします。構造が似ているお手本コードを見ながら書いていけるので、コードの書き方とか気持ちみたいなものを把握しやすかったです。
 課題は日によって結構大変だったりして、DB のスキーマ設計で大学の講義のありがたみがわかってきたり、JavaScript でお洒落に書いてみたり、やることは沢山ありました。ただ、どれも締め切り以前には終わらせることができたし、概念を理解すると速度がぐんと上がるのを感じたりして楽しい4日間だったと思います。


 あと、最初の1週間は課題が続きもので、やっていくとひとつのWebサービスが出来上がるつくりでした。これは面白い反面大変で、最初に時間/理解不足とかで断念していたことが必要になったりして焦って実装とかしてました。これは後に個性を付けて前半課題発表で6位となりました。

 ちなみに平日のお昼ごはんは はてなランチを食べられます。様子(それぞれ違う日)↓


f:id:hogashi:20170908175001j:plain
おいしいごはん
 完全にメニュー内容を忘れてしまったが美味しかったことは覚えている、というか はてなランチ含めて京都で食べたご飯全部美味しかった。

2週目

 2週目は機械学習 / AWS / デザイン / 企画 の講義がありました。
 機械学習では、またしてもほとんど初めての Python に苦しみつつ、理論に基いてメソッドを定義して学習器をつくっていきました。結果としては、学習はできたかな……?というくらいで時間切れになり残念でした。が、パーセプトロンの理論が本当に面白くて、全く知らない概念を学ぶ楽しさを久しぶりに感じました。


 デザイン / 企画 の講義はコードを書かず、考え方や表し方を学びました。企画講義のワークショップでは、インターン生同士でお互いの現状を訊き課題を発見して、それを解決するための発案を発表しました。実装の現実性は度外視して企画するので、如何に柔軟な発想ができるかの勝負で、難しいながら面白い企画が沢山出ていました。

 2週目金曜に前半課題の成果発表があり、(前述しましたが)自分で個性をつけた日記サービスを発表します。僕は"140字制限で気軽にバンバン投稿できる日記サービス"をつくり6位になりました。これは企画講義で気付いた課題から発想しています。

週末

 お休みの日は折角だったので観光に行きまくりました。異常な枚数の写真を貼りたいので別にエントリを書いてまとめます。
 他には Kyoto.なんか があったり、社員の方について観光に行ったりしました。哲学の道を歩きつつ鯉を見てお茶を頂いたりしました。

f:id:hogashi:20170908162354j:plainf:id:hogashi:20170908162349j:plain
京都御苑の広大な砂利道とお庭

後半期間

 はてなブログチームに配属されて、新機能を開発・リリースしました。
 最初にはてなブログチームの方々とブレインストーミングをして方向性を決め、画像を複数枚タイル状にする機能をやっていこう、となりました。
 前半とは違い、既に動いていてしかも沢山のユーザさんが実際に使っているものを変更するので、エンジニアさん/デザイナーさん/ディレクターさんなどにご協力をいただきつつ、

  • 何を仕様とするべき?
  • どうやって実装するべき?
  • このときの挙動ってどうなるべき?

などじっくり相談・議論をして形にしていきました。それでも難しい点とか不明なエラー(質問して解決)とかよくあって大変でした。その分、上手く落とし込むことができたときの「これは最高なのでは……???」という感動はひとしおです。
 主に見ていていただいた id:aereal さん / id:ueday さん始め、はてなブログチームの皆さんとフラットに意見を交わしたりできたこと、激褒めをいただけたことなどなどありがたい限りでした。仕様の検討〜決定デザイン作成レビュー全て爆速で、これが……!はてなブログチームのスピード感……!!となります。

 爆速開発によってインターン生の中で最速のリリースができて、最終的に画像の挿入に関する以下3つがリリースされました。実はもうこのエントリでも使っていて、週末のところ↑にあるような感じ。
staff.hatenablog.comstaff.hatenablog.comstaff.hatenablog.com
 つまり、複数枚の画像を

  • 自分の好きな順番に
  • 横一列に
  • キャプションをつけて

挿入できるようになったよ、という機能群です。これで意図しない順番やスーパー縦長記事にならなくて済む!!*2何の画像なのか一目瞭然!!
 何が変わっているのか、細かくは はてなブログ開発ブログ↑の記事をご覧いただければと思います。
 ちなみに↑の3記事はブックマークとはてなスターがめちゃついていて(特に横一列、175ブクマとかついてた)、コメントなども嬉しいものばかりで最高でした。自分で使っていても便利じゃん……となる(京都の様子です - hogashi.*)のでリリースできて本当によかった。

利用例のご紹介
chris4403.hateblo.jpblog.sushi.moneymasawada.hatenadiary.com


 ここで、今は新幹線に乗っていますが、はてなブログチームはなんと、最終成果発表で見事 🎉優勝🎉 しました!!!!!
 勝てたらいいなとは思っていたものの、他のチームも便利機能をバンバンリリースする世界観だったので、大分緊張していました。緊張のあまり寿司も不思議と食べた分だけしか美味しいと感じられなかった。本当によかった、、べらぼうに良い評価をいただけて嬉しいです。

全体感想

 前半も後半も休日のイベントも、担当してくださった方々が心底優しかったので、質問に雑に答えるみたいな状態は全く無く、今の状況はどうなっているのかとか、認識の齟齬が無いかとか、とても丁寧に見ていただけました(ありがとうございました 🙇 )。
 最初は慣れなかったホテルもどんどん馴染んでいったし、はてなの雰囲気は最初から最後まで居やすくて、総じて最高の環境でした。はてなだけで頭を満たしてバリバリ開発4週間、すごすぎるのでは???

 最後になりますがスタッフ・インターン生の皆さん本当にありがとうございました!また機会を見てシュッとはてなにお邪魔したいと思っているので、そのときはよろしくお願いします!

雑談・追記会場

 京都に Nintendo Switch を持っていっていて、昼休みに Splatoon 2 を盛んにできて楽しかったです(ありがとうございました)。今も新幹線でフェスに備えて充電中です。


インターン生の記事一覧

(追記 2017/09/21) 一緒に参加したインターン生の方々の記事を以下に挙げます。大体時刻順、皆真面目なタイトルでえらい(?)

anatofuz.hatenablog.com
( 本記事: はてなインターーーーーーン - hogashi.* ←いまここ )
snowman-mh.hatenablog.comishikawa-pro.hatenablog.comk3ntaroo.hatenablog.comcohalz.hatenablog.comsyfm.hatenablog.commakenowjust.hatenablog.com

*1:はてなブログコースが使うのは PerlJavascript

*2:異常な縦長記事もそれはそれで好きなので、使い分けてもらえると最高

京都の様子です

f:id:hogashi:20170908014513j:plainf:id:hogashi:20170908014520j:plain
f:id:hogashi:20170908014526j:plain
京都の道です
f:id:hogashi:20170908014514j:plainf:id:hogashi:20170908014524j:plainf:id:hogashi:20170908014527j:plain
京都の地形です

↓画像の貼り付けにこれらの機能を使っています↓
staff.hatenablog.comstaff.hatenablog.comstaff.hatenablog.com