Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

回転寿司

424 views

Published on

第39回 #pronama
http://spin-sushi.azurewebsites.net
http://daibutsu.azurewebsites.net
あたりの話

Published in: Internet
  • Be the first to comment

  • Be the first to like this

回転寿司

  1. 1. 回転寿司 🍣
  2. 2. ぼく • @MysticDoll • 個人的には趣味でふざけたものを作ったりしていますが、学科の友達は作 れてません。 • 弐寺とかDDRとかダンエボとかすこしします。最近はメイドカフェ通いし てる • 普段は大学生です。バイトで某社のグループウェアの拡張とか書いてます。 見習いです。 • 今回は回転寿司の話がメインです
  3. 3. もともと • 大仏を建立するサイトを作ってました。 • http://daibutsu.azurewebsites.net • いろいろトチ狂った結果 大仏が移動するように
  4. 4. その後 回転するように
  5. 5. さらにその後 • この技術を何かに生かせないかと思っていたら思い出したサイトがありま した。 • http://🍣.ヒモ.jp/ • 管理者(@polamjag)に問い合わせた。
  6. 6. そして伝説へ
  7. 7. 技術的な話 • やってることはドワ社のIDEのコメントの記事なんかと大体一緒です。 • http://spin-sushi.azurewebsites.net で動かしてます。 • 本当はIDNドメインを使いたかった(🍣.azurewebsites.netとか) のですが、普通に無理で、Panycode変換後のサブドメインもダメでした。 Azureで日本語ドメインを使いたい場合は課金して独自ドメイン設定すべし。
  8. 8. ところで回転寿司の話がメインと言ったな
  9. 9. 少しだけGulpの話 • Node.jsのタスクランナー • みなさんも使ってますよね。 • これ適当に初心者が書くだけでも十分使えます。
  10. 10. たとえば • フロントファイル書き替えて一々ブラウザ更新して確認するの面倒だな~ -> gulp + Browsersync • CoffeeScriptとかTypeScriptのコンパイルもwatchして保存後自動で。 Browserifyでライブラリや自作モジュールをrequireしたコードも可能です。 • 大仏建立したいな~でも土地がない… -> 大仏を建立したWebページを作成してNodeでサーバを書き、 gulp-openでブラウザを開く というgulpタスクをnpm run konryuで走らせる (https://github.com/MysticDoll/daibutsu) • 楽しい!
  11. 11. 静的なHTMLを吐くサーバを立ててブラウザを 起動する例(サーバは別スクリプト)
  12. 12. サーバ建ててCoffeeScriptをコンパイル さらにコンパイル後のJSを圧縮 gulp-browserifyがDeprecatedなため 通常のBrowserifyをvinyl-source-streamでパイプしてます。
  13. 13. 今回の利用法とまとめ • 実はLive-ReloadやBrowserSyncの環境構築がうまくできなかったのと、 いろいろ面倒だったため、gulp-openでブラウザ開いて満足しました。 (さっき調べたらgulp-webserverで一瞬だったっぽい) • GitHubにリポジトリがあるので見ればわかるのですが (https://github.com/MysticDoll) HTMLにCSSもJavaScriptも直書きなので 何も恩恵を受けられませんでした。えへ • 一回構築するといい感じにいろいろできるのと、プラグインがなければ処 理自体は自分で書いてタスクとして一括に記述すればいいので、融通が利 いてかなり便利です。
  14. 14. ところで • made-cafe https://github.com/MysticDoll/made-cafe というリポジトリが。 CoffeeScriptのクラスファイルのテンプレートを作成するコマンドです。 Browserify利用時にそこそこ便利です Commanderのあたりが雑です(Commander.jsが融通の利かないせい💢) その他いろいろ汚いです。 プルリクください。 代替ツールがあればこっそり教えてください
  15. 15. おわり

×