hogashi.*

日記から何から。

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

 はてなサマーインターン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

ひさしぶりに自分の拡張機能見た

f:id:hogashi:20170831113745p:plain

f:id:hogashi:20170831113724p:plain

最終更新4月末とかで確かに、となった。意外と大好きがついていて幸せ

レビュー見る限りでは大きな不具合はまだなさそうだけど、ごくたまに不具合が起こるし再現もする、みたいなのも見るので気づいたら直していきたい

 本日起きたら14時だったのだけど、すぐにスマートフォンの時計が止まって、30分くらいの間14:11を過ごした。
 さすがにおかしくて、気付いて焦って部屋のアナログ掛け時計を見たら16:17だったのだけど、これはこれでおかしくて、こっちも止まっていた。多分朝の4:17とかに止まったんだと思う。

 デジタルだから/アナログだからという議論が一瞬過ったけど、こういうときにはどっちもあんまり変わらないのかもしれない。

Scrapboxで文字数を数えるUserScript

 書いた。こうすると綺麗だよって思ったらそうしてください。
 文字数(改行除く)と行数の2種類を出します。

 Scrapbox における UserScript の導入は以下をご参照ください。

scrapbox.io

[追記(2017/07/08 21:31)]Scrapbox内でページ遷移したときの挙動を全く考えていなくて、ブラウザ再読込をしないと多分思った動作をしません。(やるとすればMutationObserverとかになるかなとは思っている)

本文

 // 文字数表示用エレメントを追加(各ページのときのみ)
 if (window.location.href.match(/https:\/\/scrapbox\.io\/[^/]+\/.+/)) {
   const pageInfo = document.getElementsByClassName('page-info')[0]
   let charWithoutBr = document.createElement('div'),
       brOnly = document.createElement('div')
   charWithoutBr.setAttribute('id', 'char-without-br')
   brOnly.setAttribute('id', 'br-only')
   charWithoutBr.innerHTML = brOnly.innerHTML = '0'
   pageInfo.appendChild(charWithoutBr)
   pageInfo.appendChild(brOnly)
   
   // 文字数を数える(改行を除く)
   var getCharCount = () => {
     return Array.from(
         document.getElementById('editor').getElementsByTagName('span')
       ).filter(v => {
         const className = v.getAttribute('class')
         return (!!className) &&
           (className.match(/c-[0-9]+/)) &&
           (v.getElementsByTagName('br').length == 0)
       })
       .length
   }
   
   // 行数を数える
   var lineCount = () => {
     return document.getElementById('editor')
       .getElementsByClassName('lines')[0]
       .getElementsByClassName('line')
       .length
   }
   
   // 文字数/行数を数えて表示を更新
   var updateCharCount = () => {
     document.getElementById('char-without-br').innerHTML = getCharCount()
     document.getElementById('br-only').innerHTML = lineCount()
   }
   updateCharCount()
   
   // キー押下で文字数を数えて表示を更新
   document.addEventListener('keydown', updateCharCount)
 }

(OLD) Scrapboxの数式記法中の\text環境をインラインにする

[追記(2017/07/07)] この内容をScrapboxに取り入れていただけました。記事は残しておきますが、この記事のように特段設定する必要は、既にありません。

~~

 Scrapbox の数式記法中で \text 環境を使うと改行されてしまうので、雑に(後述)インラインにします。

つまり

 以下のコードを自分の Scrapbox の settings という名前のページに貼り付けます。既に作っている人は1行目だけ消して追加でつければOK。

code:style.css
 /* katex \text environment */
 span.mord.text.displaystyle.textstyle.uncramped {
   display: inline-block;
   margin: 0 5px;
   /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
 }
 span.mord.mathrm.cjk_fallback {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 15px;
 }

こうなります
f:id:hogashi:20170701163412p:plain

なぜ

 数式の中に数式でないテキスト(とりわけ日本語)を書きたいときはままあって調べていたら、 KaTeX では「\text{日本語}」のようにして使えるということがわかりました。
 が、使ってみると Scrapbox の方で「display: block;」されていて、改行されてしまうようでした。これを上述のように直しました。

 また、\text環境内の日本語フォントが微妙だったのでついでに標準のものに戻しています。日本語に限らず \text環境内の全部のフォントを標準にしたい場合は上のコメントアウトを戻してください。


 ただ、僕は Scrapbox の思想を理解していない可能性があるので、使いたい人がシュッと使えるくらいでいっか、となり割と雑な CSS になりました。
 Scrapbox の思想から外れていたらすみません。

人生ど

 飯田橋に行ったら人生がどうでも良くなったという雰囲気の日記ですが行ったのは一週間前です。

 飯田橋駅のトンネルとか階段の蛍光灯とかでテンションが上がり始めたけどその後忘れます。

f:id:hogashi:20170623143712j:plain
歩道橋から川

 川に被せて道路があって、しかもそこから降りるように繋がっていて何故か感動しまくって急いでたのに写真を撮りました。スマホ写真なので長い。

f:id:hogashi:20170623143730j:plain
浮いててエモい

 さらにここから川沿いに歩くと異常な起伏が存在したのですがあまりにおかしすぎたのと写真撮るの難しかったのと急いでたので撮らなかった、後悔はしています。
 急いで何をしに行ったかというと印刷博物館というところでフォント展みたいなことをしていたのを見に行ったということです*1。展の中は写真を撮ってはダメだったので入口と売店の写真しか無いです。

f:id:hogashi:20170623143613j:plain
看板

f:id:hogashi:20170623140239j:plain
売店の版

f:id:hogashi:20170623140749j:plain
2カメ

 版は紐で引き縛ってあることがわかってテンションが上がったのでピント合ってない気がする。版を売っていたということではなく版を使って印刷したポストカードを売っていて、他にもあったけど閉館間際で写真は無いです。とにかく急ぎまくっていたことがわかるけど展示自体はゆっくり見てた。

 というので博物館を出て、来るとき急いで最短で歩いたので飯田橋をゆったり歩くぞと言いつつ南に逸れて立ってた地図を10分くらい眺めてました。今回ここからグーグルマップを使っていない。

 寺めっちゃ多いじゃん、って言ったけど遠くて行ってません。

 元気と相談して大方経路を決めてから1時間くらい歩きました。地図を見てたのが東五軒町で、水道町とか赤城下町/赤城元町とかの地名で選んで順に回るという感じ。何故か印刷関係の会社や工場のようなものが沢山あって、川の水を使っていたのかなとか考えながら歩いていました。

f:id:hogashi:20170625182209j:plain
奥に坂が現れてテンションが上がりめっちゃ遠いのに撮った写真

 坂を登ったり下ったりしつつ、西に膨らんで東に戻るような経路で神社に来たけど信仰心が薄すぎて手水舎で手に水を受けられなかった様子です。お参りはしました。

 赤城神社の絵馬をかけるところに音楽関係のことが沢山祈願されていて、得てしてカタカナになるので渋い。

 本殿?がガラス張りだったり境内にカフェがあったりして近代神社でした。 

 白銀公園の横が結構な下り坂なために公園の柵がどんどん高くなる現象が起きたり、神楽坂に入った途端にお洒落なお店がどっと増えたりするのを見ながら、筑土八幡神社にもお参りをしました。筑土八幡神社の階段横に遊び場があって、土地自体異常な高まりなので遊び場は全体的に滑り台だったのと、スズメバチと虫に注意という看板に怯んだのは覚えています。あとはそのまま飯田橋駅へ入って帰りました。以下飯田橋駅です。



 地形とか面白かったのでもっと時間を使って写真を撮りつつ歩いてみたいですね。

*1:展の存在を思い出させてくれた友人special thanks