ARLT第24回 担当：伊藤

1. AR LT
2018/07/31 B3 伊藤広樹

2. 自己紹介
1998/03/07 (誕生)
岐阜県岐阜市でこの世に生を享ける
2013/04/01 ～ 2018/03/31 (岐阜高専)
社会が嫌いで受験前に弱っていたところに、
岐阜高専の入学試験は社会が無いという情報入手
無事入学し、ストレートで卒業
2018/04/01 ～ (首都大)
首都大学東京の情通に3年として編入、AR改に所属

3. なに話そう

4. この夏使えるナンパ術！

5. 断念！

6. 初 心 者 が 行 く
Vue.jsで作る
簡単Webアプリ

7. そもそもWebアプリって？
Webアプリ
使う言語
• HTML＋CSS＋JavaScript
ポイント
• インストール不要
• オフラインで使えない
• 配信はサーバからなので
• アプデは即反映
ハイブリッドアプリ
使う言語
• HTML＋CSS＋JavaScript
ポイント
• インストールが必要
• オフラインで使える
• デバイス固有の機能に
• アクセスが出来る(カメラとか)

8. HTML・CSS・JavaScriptってなに？死ぬの？

9. HTML・CSS・JavaScript
HTML：Hyper Text Markup Language
• マークアップ言語といわれるもの
• タグ(<h1>とか)を使って文章をマークアップ(目印を与える)
CSS：Cascading Style Sheets
• HTMLと組み合わせて使う
• HTMLの要素をどのように修飾して表示させるか(色、サイズとか)
JavaScript
• HTMLのコードに埋め込んで、ブラウザの動的なエフェクトを実行
• 動きや表現を担当(例えばブログの右下のtopに飛ぶ矢印とか)

10. やること
Steam APIを使って
ゲームの一覧とか出してみよう！

11. 準備
① Node.js(npm)のインストール
ここ(https://nodejs.org/en/)からインストーラ
Node.js：非同期な処理とかしてくれるスゴイやつ
② Vue-cliの導入
コマンド(npm install -g vue-cli)で導入
Vue-cli：webpackとかの設定も出力する雛形作成ツール
webpack：バンドラー、複数のJSファイルをまとめる
※HTML・CSS・JavaScriptを自分で用意してもok

12. 準備
③ Axiosの導入
コマンド(npm install axios)で導入
axios：HTTP通信を簡単に行えるJSライブラリ
今回はapiを叩くために利用
④ Elementの導入
コマンド(npm install element-ui -S)で導入
Element：Vue.jsベースのコンポーネントライブラリ
UIコンポーネントの集まり

13. UIって大変そう…
Element：デスクトップ用
サイト：
http://element.eleme.io/#/en
-US
OnsenUI：モバイル用
サイト：
https://ja.onsen.io/

14. 作る
① 雛形を作る
コマンド：
vue init webpack-simple <アプリの名前>
cd <アプリの名前>
npm install
色々作られるけどメインで触るのはApp.vueだけ！

15. 作る
② .vueファイル
SFC(単一ファイルコンポーネント)：
コンポーネントで使用するHTML・JavaScript・CSSを
一つのファイルにまとめて管理する仕組み

16. 作る
HTMLゾーン
JavaScriptゾーン
CSSゾーン

17. 作る
③ ビルドする
コマンド(npm run build)
distフォルダの中とindex.htmlが運用に必要なファイル

18. 公開
GitHub Pagesで公開してみよう！
→問題発生
自分でhtml・CSS・JavaScriptを用意して作ったものはok
vue-cli使ってビルドしたものは、読み取ってくれない
→パス関係を色々調整しないといけない…

19. 公開
Netlifyで公開しよう！
Netlify：静的サイト向けの無料で高機能なホスティングサービス
Gitのホスティングサービスと連携した自動デプロイ
SSL/HTTPSを使うことが出来る
https://<ココ>.netlify.comのサブドメインの部分は自由
GitHub・GitLab・Bitbucketのアカウントでログインできる

20. 結果
https://goldfish-steamapp.netlify.com/

21. 参考書籍
基礎から学ぶVue.js
2018/06/01 第1刷発行
2018/07/02 第2刷発行
サイト：
https://cr-vue.mio3io.com/
GitHubにプログラム上がってる

22. 便利だったものとか
テキストエディタ
Visual Studio Code(いつもの)

23. 便利だったものとか
Vue.js Devtools
Vue.jsの開発をサポートするChromeブラウザの拡張機能
Eventのトリガーとかdataの中身を見れる
ダウンロード(Vue.js Devtools/Chrome ウェブストア)
https://chrome.google.com/webstore/detail/vuejs-
devtools/nhdogjmejiglipccpnnnanhbledajbpd

24. 便利だったものとか
Steam Web API
色々用意されてる
サイト(VALVE Developer Community):
https://developer.valvesoftware.com/wiki/Steam_Web_API

25. まとめ
全くの素人が一週間程度であれくらいまで作れた
html・JS・CSSの知識があればもっと早そう
色んなAPIが知らないだけで多くあるので、
ちゃんと使えば実用的なのも作れそう