他人のプロフィールをみんなで好き勝手に編集できるプロフィールサイト「 Watakusi 」をローンチしました
tl; dr
昨日の夜、他人のプロフィールをScrapboxみたいなノリで編集できるWebアプリケーションを公開しました。
他人のプロフィールをみんなで好き勝手に編集できるサービス「 Watakusi 」をリリースしました🎉
— iintyo (@e_ntyo) 2019年1月19日
今日使い始めてくれた皆さんには、まず私がプロフィールを書きに行きますのでぜひ使ってみてください🤘 https://t.co/DeEzyvYPpm pic.twitter.com/YKJ1FWz6U8
「Scrapboxみたいなノリ」とは言いつつも複数人同時編集とか現状は対応していなくてアレなんですが、思ったより好評で、結果的にfirebaseの有償プランを契約することにまでなりました。嬉しい限りです。
ぜひ使ってみてください。よろしくお願いします。
Watakusiができるまで
この記事には本来技術的に頑張ったことなどを書くつもりだったんですが、ちょっと路線変更してどうしてこのサービスを作ろうと思ったかについて書こうと思います。技術的なところは複数人同時編集やアーカイブページのSSRなどに対応したら書こうと思います。
アイデア
ここ1ヶ月くらい、何か作って公開するなら今は比較的時間があるし絶好のチャンスだなと考えていて、アルバイトの通勤途中に考えた色々なアイデアを帰ってからA4のコピー紙に書き殴る日々を送っていました。(一時期はその場でGoogle Keepに書いておいたりもしたんですが、忘れちゃうくらいなら大した発想じゃないやろという自己啓発書にありがちな考えからやらなくなりました。)
- ピンクちゃんねるに代わる、えっちな話題で盛り上がるための場所
- WebGLを使って、nanoblockをブラウザでシミュレーションできるようにするツール
- 「折りたたんで小さくできるトートバッグ」みたいな、普通に使っても便利でかつ原価もかからなさそうなアイテムを使ったSUZURIみたいなサービス
など色々と出てきて、そもそも没になったものもあれば途中まで作ってイケてないなと思うものもありました。この活動の一番最後にポンと出てきたのがWatakusiだったというただそれだけです。
実装
思いついた時、これはいいアイデアだなと我ながらに思ってニチャついていました。だから作っている途中で同じようなことを他の人にやられたら嫌だなと思って、とにかく早く出そうとめちゃめちゃ雑な実装で作って公開したら案の定盛大にバグってしまいました。今はあらかた直したつもりですが未だに不具合が残っていて心の底から後悔しています。
早く作るために、Firebaseを使いました。使う度に便利になっていてしかも無料なので、本当にすごいなと思います。バイト後や土日の休みを使ってだいたい10日くらいで作りました。
もう本当に早く出したくて、faviconもElectron製の簡易ロゴ作成ツールみたいなものを発見してそれで10分くらいでつくりました。今見返したらDotgridという名前でした。
途中誰かにアイデアを話してブラッシュアップしようかなとか、仲の良いオタクでアルファリリースとかやろうかなとか思ったんですが、絶対にパクられたくなかったのでやりませんでした(やるべきでした)。
あと、Twitterを見ないようにしました。プログラマとしてもアイデア太郎としても自分よりすごい人がいっぱいいるので、「俺がやらなくてもこの人たちだけで事足りるじゃん」となりそうだったので。それにもうTwitterはマウンティングと誰かの批判で溢れかえっていて、創作の時間をそういうのを見ることに奪われたくないなと思っていました。この判断だけは正解だったなと思います。結果バグりましたが。
おわりに
以上になります。ほとんどはてなユーザさんへの告知目的で書いたので中身がスカスカですみません。
繰り返しになりますが、 https://watakusi.info をよろしくお願いいたします。
「?でわっしょい」してきたぞ - はてなインターン2018参加記 -
「超ひだまつり」以外でひだまりスケッチの話をたくさんしたこと。同い年のオタクとあっちこっちの話で盛り上がったこと。毎日ホテルの自室に誰かが来ていて、中学校の修学旅行の時のようなテンションが1ヶ月続いたこと。タイトなスケジュールでWebアプリケーションのコードを書きまくったこと。毎日のように美味い酒を飲み、飯を食べたこと。いろいろなことが新鮮で、あっという間に過ぎていった1ヶ月だった。
応募
フォロワーの id:spring_raining さんや id:upamune さんの記事を読んでいたので、4月あたりから今年ははてなインターンに応募しようと決めていた。ので、募集が始まってすぐに応募した。rot13のデコーダを書くように言われたため爆速で書いて出した。
その後審査にパスして面談へ進み、東京オフィスで id:motemen さんと30分くらい話をした。motemenさんは部屋へ入るとすぐ僕の顔を見て「Monad in TypeScript の人ですよね?」とおっしゃった。はてなのCTOに自分の書いた記事が読まれているということが衝撃的で、この経験はいまだにモチベーションになっている。
面談の結果、無事に参加できることになった。普段お世話になっているインターン先にはお休みを頂戴し、千葉から新幹線で京都へと向かった。
俺は今、これになっているけれど… pic.twitter.com/QUJOucRQKI
— iintyo (@e_ntyo) 2018年8月12日
初日
初日はアイスブレイクの日だった。各自がLT形式で自己紹介をしていった。id:YaaMaa さんの自己紹介が最高だった。
前半課程
はてなインターンは前半過程と後半過程に分かれており、前半過程では「はてなダイアリー」を模した日記のWebアプリケーションの開発を通していろいろな知見を得ることができた。講義・演習形式で全インターン生が共通のカリキュラムをこなし、各回の演習にはコードレビューや講評を通じて丁寧なフィードバックが返ってきた。
前半過程は今年からカリキュラムが刷新されたらしく、Perl & Scalaだった内容がGo & TypeScriptな内容になっていた。個人的にはPerlを書いたことがなかったため、今年からのカリキュラムのほうがスムーズに進めることができてよかったと思う。(逆にPerl & Scalaだったらそれはそれで勉強になったとは思う。)
Webアプリケーション開発と一言で言っても、GraphQL API, Session + Cookieによる認証, React.js + TypeScriptによるSPA開発, AWS(中の人が来て、ECSとかFargateの使い方を教えてくれた), 機械学習入門(はてブのコメントに対して悪意のあるコメントかどうかを判定する単純パーセプトロンを実装した)と本当に幅広い内容だった。各回の講義はそれぞれ別のエンジニアが担当されていて、人によって教え方や考え方に色があって面白かった。
前半過程を振り返ると、自分がカバーできている知識の範囲というか、基礎力がまだ足りていなかったなと実感した(この点は最終日の面談で id:motemen さんにも指摘していただいた )。特にデータベースと認証周りの知見が足りないので、時間がある学生のうちに手を動かして理解を深めておきたい。あとは講義では触れられなかったけれどWebサーバの設定(ネットワーク周りとかキャッシュとか)もある程度知っておきたいなという気持ちになった。次のISUCONに出ることにしたのでそこでまとめてキャッチアップしたい…
後半過程
後半過程では1~2人ずつ5つのチームに配属され、チームごとに機能追加や改善等のタスクに取り掛かった。私ははてなブログの開発をしてみたくてコンテンツプラットフォームを志望したが、ブログチームは忙しく受け入れができなくなり、僕の配属先は今年から新設された社長コース(特命!社長とWebサービス開発コース)になった。相方は id:turtar_fms だった。
社長コースは、はてなの代表の id:chris4403 さんとCTOの id:motemen さんと一緒に新規サービスを作っていこうというコースだった(超豪華!)。新規サービス開発ということで他チームよりも圧倒的にインターン生の裁量があり、自分たちの作りたいものをお二人の超強力なサポートのもと開発していく、という流れだった。
今回は"はてな匿名ダイアリーのいい話"というAlexa Skill(AmazonのスマートスピーカーAlexaのアプリ)と"無常はてな"というWebサービスの2つを企画・開発した。
はてな匿名ダイアリーのいい話
はてな匿名ダイアリーに投稿された記事のうち、いい話をAlexaが読み上げてくれるというAlexa Skillを開発した。現在ストアに申請中でもうすぐ公開予定(4回くらいリジェクトされた)。 リリースされました!!!
gigazineさんに取り上げられました!しかも利用例の動画つき!!!
朝起きてすぐや寝る前など、好きなタイミングで「いい話だな…」という気持ちになることができる。いい話の取得にははてなブックマークでつけられたタグ・ジャンルなどのメタデータを利用した。
工夫したのはいい話のフィルタリングで、いい話かどうかというのは官能評価なので判別が難しい。機械学習を使っても良さそうだったけれど時間がかかりそうなのでやめた。今回は夜寝る前に聞きたいタイプのいい話に絞ることにして、特定のジャンル・タグの投稿( 男女
タグはドロドロしていてつらいのでやめる等)や、極端に文字数が長い/短い投稿は切り捨てるようにした。
Amazonのスマートスピーカーということで、AWS Lambdaでシュッと書くことができた。全体の構成はこんな感じ。
無常はてな
無常はてなは、id:turtar_fms が土曜日の朝4時に投稿したジャストアイデアのリスト(のちに 遺言
と呼ばれる)から産まれたWebサービス。インターン最終日に社内リリースをした。重要な機能がいくつか実装できず外部向けにリリースするには至らなかったのが悔しい。
ユーザ投稿型のWebサービスで、特徴はこうだ。
- 投稿の検索ができず、トップページに投稿がランダムで数件表示される
- トップページで出会った投稿は共有用URLを発行することができるが、そのURLは5分で失効する。ただし、共有用URLのページから再度その投稿を共有することができる。
読む側は、面白い記事が話題になると「消えちゃうから早く読まなきゃ」となり、書く方は「5分で消える」という制約のもとでいかに多くのインプレッションを得られるかというゲームを楽しむことができる。
id:motemen さんと相談して GAE/Go環境で作ることにした。フロントエンドは前半過程でReact.js + TypeScriptの構成を触ったのでそれを採用した。状態管理はrxjsで実装した。デザインフレームワークにはTypeScript CompatibleなAnt Designを使った。
最終日の今日は後半過程の成果を発表し、社員の投票でランク付けがされた。社長コースは4位(5チーム中)だった。せめてどちらか一方でもリリースできていれば…
待遇
往復の交通費,1ヶ月のホテル代,ホテルでの朝食, オフィスランチが提供される。最高!夜は頻繁に飲み会に連れて行かれるため夕飯代も浮く…!
京都観光企画や id:onishi さん, id:chris4403 さんと飲みに行く会なんかもあって、楽しくて時間があっという間に過ぎてしまう。
所感
はてなインターン、噂には聞いていたけれど最高だった。id:motemen さんが初日に「インターネットへ還元するつもりでインターンをやっている」と仰っていたが、まさにそのとおりだと思う。講義の準備や教材の用意など、社員が結構な時間を使って準備をしていた様子が伺えたし、社内の雰囲気からインターン生への愛みたいなものも感じた。こんなにいたれり尽くせりなインターンは初めてだった。
以下はインターン生&社員さんへのメッセージです。本当にお世話になりました!!!
- id:motemen マジで格好良かったです。自分が詰まっているところをVSCodeのLive Shareでササッと編集していって自分の仕事に戻っていった時はビリビリシビれました。最終日の懇親会中に黙々と無常はてなにコミットしてくれていたのも格好良かったです。Suzuriで売っているTシャツが比較的リーズナブルなのも格好良かったです。買いました。本当にお世話になりました。
✅この夏のマストアイテムを入手 https://t.co/I1AcOl7QKd pic.twitter.com/ylsQBkHLEK
— iintyo (@e_ntyo) 2018年9月13日
id:chris4403 ほたて(成果発表の投票をするときに使った社内ツール)で謝辞を書いていなくてすみませんでした許してください。エンジニアとして未熟な僕と id:turtar_fms を冷静な視点で支え、軌道修正してもらえてとても助かりました。またB'zの話をしたいです。烏丸FM(社内Podcast)にもまた呼んでください!お世話になりました!
id:albacore 神崎蘭子。ホテルの部屋のテレビのリモコンを返してくれ。トランプとUNOとワインを持って帰ってくれ。俺をLGTMカメラで撮って勝手にツイートしないでくれ。君が毎日部屋に押しかけるせいでとても迷惑でした。でも楽しかった。
— メテオさん (@meteor_saan) 2018年8月25日
id:NoahOrberg アユニ・D。女性関係で黒歴史がある(俺もある)。Goが好き。よく部屋に来ていたけれど id:albacore より行儀が良かった。メ社のインターンも頑張ってくれ!
id:mizdra 日向 縁。React.jsとWASM。俺とサブカルの趣味が一緒な気がする…東京の大学に通っているのでまたすぐ会える気がする!体調に気をつけて!!!
id:turtar_fms 野々原ゆずこ。御庭つみき。相棒。普段はメディアプログラミングで素敵な作品をたくさん作っている。Alexaのインタラクション周りや無常はてなのデザイン周りを特に頑張ってくれた。清潔感があるイケメンなので絶対にモテる気がする。
id:YaaMaa 服部平次。前半課題のクオリティが毎回すごくて(丁寧で)スゲーと思った。最終発表でも id:mizdra が病欠の中ちゃんと発表していてすごかった。よく寝ている。
id:gazimum なんか失礼なことばかり言ってしまってすみませんすごく尊敬しています!!!大学でもよろしくお願いします!!!!!最後の発表での受賞コメントが格好良かったです!
id:guni1192 いつもツッコミ役をさせてしまってすみませんでした…東京へ来た時は酒飲もうな!!
id:cohalz 大学の先輩。たくさんご飯をごちそうになりました…ありがとうございます!就業後によく絡みに来てくださって嬉しかったです。ありがとうございました!!
id:hitode909 とにかく会話が上手でめちゃめちゃ面白かったです。ステッカーをたくさんもらえて嬉しかったです。発表にもたくさん質問をくれてありがたかった。
これは、スマホを道路に落としてしまい車に轢かれてボロボロになったけれど、ケースに貼っていた @hitode909 さんのステッカーが何故か無傷で圧倒的な存在感を放っている様子です pic.twitter.com/DP7pCKfkMY
— iintyo (@e_ntyo) 2018年9月2日
id:susisu 大宮忍。Kyoto.なんか #4でBuckle Scriptの話をしていてスゲー!!!となりました。実はブログをよく読んでいます。
id:riko 素敵な講義&講評をありがとうございました。インターンでユーザコミュニティについて学んだのは初めてで非常に有意義だったと思っています。懇親会でも無常はてなについて色々意見を頂けて嬉しかったです。
id:onishi 個人的に一番好きな講義でした。ビールを飲むのが早くて格好良かったです。カラオケに行けなくて残念でした。
id:Hasesann 2つのサービス両方に、本当に最高なアイコンとロゴを提供してもらいました。髪色とかネクタイ+シャツのファッションが素敵でした。機会があればまた最高なコンテンツをつくってください!!!お願いします!!!!!
他のインターン生の記事
↓同じチームの id:turtar_fms の記事
社長の記事
まんがタイムきららの学級文庫を作った話
この記事は、まんがタイムきらら Advent Calendar 2016の21日目の記事です!
高校時代に
を毎月購入し(年度の途中からだったので定期購読ではなかった)、クラスのロッカーに置いて同級生と回し読みしていたころの話をします。
きっかけ
「好きなきらら作品の最新話を読みたいし、これはアニメ化するべ!っていういいきらら作品を発掘したいんだけれど、出てる月刊誌全部毎月買うのもな」というオタクがクラスにそこそこいました。(高校生でお金がそんなになかった)
オタクが海外の通販でギークなグッズ買うときにみんなでまとめて買うのと同じノリ(乃莉)(激寒)で、共同出資をすることになりました。
やってみて
クラスの10人で、1人辺り毎月200円出して、まんがタイムきららシリーズ全種を購読し学級文庫にストックしていくプロジェクトを始動させた
— hammer ska?! サンデー (@e_ntyo) July 23, 2014
全種とか言ってるんですが、きららフォワードはみんな読まないのでやめました。
学級文庫の状況です。ご確認ください。 pic.twitter.com/5a3Dc1T3j5
— hammer ska?! サンデー (@e_ntyo) October 24, 2014
学級文庫としてロッカーに保管しているまんがタイムきららシリーズがもうすぐ飽和してしまうため、一年生のロッカーを借りなければ
— hammer ska?! サンデー (@e_ntyo) March 20, 2015
入試前くらいに自然消滅しました。
残念ながら本日をもって情報科7期生有志によるまんがタイムきららシリーズ学級文庫化計画は終了しました
— hammer ska?! サンデー (@e_ntyo) October 19, 2015
やってみて - よかったこと
- 当初の予想通りいい感じの作品を発掘できました。
- 付録をゲットできた。(きららキャラット10周年記念はがきセットなど)
- プレゼント企画に応募できました。(当たったオタクもいました。)
- オタクに笑顔が増えました。
- きらら系月刊誌が揃っていく様が見事でした。コレクションオタクになりました。
やってみて - 残念だったこと
- 結局みんな自分の好きな作品をチェックするだけになっていきました(僕もそうだった)。
まとめ
割と有益な取り組みだったので、ラボやサークルの皆さんとやってみてはいかがでしょうか。
自動車セキュリティについて
はじめに
この記事は、東京電機大学電子技術研究部の部誌に寄稿するものです。
電子工作のことはわからないんで、自動車セキュリティについて知っていることとかを書きます。
自動車セキュリティ
自動車の✨高度情報化✨
自動車はめっちゃ通信します。
カーナビみたいなVICS(道路交通情報通信システム)とか車間通信(V2V),交通インフラとの通信(V2X)もそうですし、Tesla Model Sなんかは組み込み向けのLinux系OS上でGoogle MapやWebブラウザが走ります。*1これらの通信は3Gで行われ、通話も可能です。
こういった車外との通信が危険を孕んでいることは言うまでもないですし、自動車の自己診断機能(OBD2)などを利用して車内ネットワーク(CAN,LIN,FlexRay,MOST,etc...)の情報を得ることもできます。車内外でめっちゃ通信が行われているわけです。車内で車載システムのコミュニケーションが完結していたこれまではセキュリティとか割とどうでもよかったんですが、最近はそんな感じなんで自動車セキュリティは割と界隈で重要課題になっている印象があります。
高度情報化という点で言うと車載ソフトウェアの標準化が進んでいます。AUTOSARという標準仕様に基づいてソフトウェアを設計していく機会が増えているらしいです。独自仕様をやめて標準化に取り組むことはセキュリティ面でもプラスなので、この辺の動向も追っていきたいと思っています。
自動車セキュリティハッカソン
先日、自動車セキュリティハッカソンなるものがありました。自分も参加してみました。
このハッカソンでは今挙げた通信の中でも車内通信(CAN)にフォーカスして、
- ECUの物理エミュレータに専用のソフトウェアで接続して、トラフィックを見たりパケットを送ったりしてみる
- ECUになりすまし、CAN上のメッセージを受け取ったり送ったりするプログラムを書いてみる(このAPIを使いました )
- 通信のログ(前述の専用のソフトウェアのログファイル)から暗号化に使われた手法を解明する
といったことをCTF形式でやりました。ハッカソン参加者は翌日・翌々日のESCAR ASIA 2016に無料で参加できました。
さいごに
特にオチがなくなっちゃったんですけれど、自動車セキュリティっていう分野メッチャアツいと思ってるんで誰か一緒にやっていきましょう。これ↓とか。
https://www.amazon.co.jp/dp/4822275167
偉そうに書きましたけれど、僕この↑本2冊とも途中で読むのやめたしハッカソンもなんとか受かって(事前課題があった)当日は座ってるだけだったオタクなのでよろしくお願いします。一緒にやっていってくれる人がほしい本当に。
あと退学は親がめっちゃキレるんで転科しようとしています。おわり。