Webとクルマのハッカソン2018 チーム「中目黒フレンズ」のためのリポジトリ

フレンズなんだね！

後日つくった成果物動画

※クリックでYouTubeにとびます。

雑な説明

• src配下に成果物を置きましょう。ディレクトリは空気読んで
• gulpでビルドします。ビルドについては後述
• ES6で書こうな！
• ビルドの成果物はbuild配下に出力されます。build配下はgithubにコミットしないでいいです。.gitignoreに入れてあります。
• gulp-webserverを確認用webserverとして用意しました。後述します。

環境

• v8.x系最新のnodejsとnpmを入れておきましょう。

初期化

• GitHubからcloneしてきます

$ npm install

ビルドとか

• gulpを直接叩かず、npmスクリプトにいろいろ書いています。

$ npm run build  # ビルドします
$ npm run clean  # ./build配下をすっからかんにします
$ npm start      # webserverを立ち上げます
$ npm run brower # ブラウザで http://127.0.0.1:3000 を開きます

• npm run build:continuous コマンドを用意しました。こいつは呼ばれると一発buildを実行し、その後src配下のコードを監視。変更があれば自動でビルドが走るようになります。きゃー素敵抱いて！

• gulpを直接叩きたいときは npxコマンドが便利です。

$ npx gulp build

• VisualStudio Codeを利用している場合、taskが定義してあるので cmd + shift + pからnpmタスクが実行できます。

ローカルの動作確認

npm start するとwebserveが立ち上がり、./build配下の静的ファイルを確認できます。

http://127.0.0.1:3000 にアクセスすると ./build/index.htmlが表示されます。あとは空気読んで！

コードの書き方

前準備

• src/config.json に各種APIのkeyなどを記述してください。GitHubには展開しないので、ハッカソン当日になんらかの方法でシェアします。念力とか

依存性解決

• 他のモジュールを参照したいときは requireします。
  • npm run buildするとbrowserifyを使ってrequireで指定されている依存関係を解決します。node.jsみたいな形で書くんですね。
  • たとえば外部のライブラリ(jQueryとか)を使いたい場合は npm install --save-dev jQueryしてライブラリをインストール。その後、使いたいコード中でconst $ = require('jquery')とかすると、jQueryが使えるようになります。
  • 内部の他のjsを指定したい場合は const hoge = require('./plugins/moge')とかすれば読み込まれます。逆に言うとrequireしないと絶対に読み込まれません。

pluginの書き方

• pluginは src/js/plugins配下に置きましょう
• ファイル名はなんでもいいですが、actionメソッドを必ず作ってください。app-main.jsはpluginのactionメソッドを呼び出します。
  • actionメソッドはviasとcallbackいうオブジェクトを引数にとります。最後にcallbackを呼ぶことでrenderingします。。
  • 返却するjsonには喋りのパラメタとか喋る内容とかくま画像とかを指定してください。あとは空気読んで！
• pluginを書いたら、app-main.jsのplugins配列のなかでrequireしてください。
  • ディレクトリ読んで自動でrequireさせようとおもったけど、同じこと考えてる人がissue立ててPR出してる最中だったので諦めた。

便利な情報

• Chromeでlocalhostから外部APIを叩くと CORS違反で超怒られる。このプラグインを入れておくといろいろ捗る
  • https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi