Tweet
Tweet

Slide 1

Slide 1 text

個人開発の裏側 in MCCMMANCC 2018 1

Slide 2

Slide 2 text

自己紹介 mizdra MMA / 部長 / B3 趣味 Web アプリ開発 アニメ ( 主にきらら系) 2

Slide 3

Slide 3 text

皆さん, Web アプリ作ってま すか? 3

Slide 4

Slide 4 text

かくいう僕は 趣味: Web アプリ開発 4

Slide 5

Slide 5 text

約1 年間で4 つの Web アプリをリリー ス 5

Slide 6

Slide 6 text

遅刻可視化ツー ル 位置情報の履歴から通勤・ 通学の遅刻を可視化 https://www.mizdra.net/entry/2018/03/15/00393 8 6

Slide 7

Slide 7 text

ロケー ション履歴を読み込んで… 7

Slide 8

Slide 8 text

授業の開始/ 始業時刻を指定して… 8

Slide 9

Slide 9 text

通学先を囲って… 9

Slide 10

Slide 10 text

チャー ト出力ボタンを押す 10

Slide 11

Slide 11 text

地獄が可視化されて便利 11

Slide 12

Slide 12 text

ゆかりスロット ゆゆ式の登場人物「 日 向縁」 の目を揃えるス ロットゲー ム ネタ元は右のイラスト 12

Slide 13

Slide 13 text

13

Slide 14

Slide 14 text

今日はその開発の裏側をご紹介 Web アプリを作る上で気をつけていること よく取り入れている工夫 ( 手癖) 速の出し方 などなど 14

Slide 15

Slide 15 text

1. モバイルファー スト 15

Slide 16

Slide 16 text

1. モバイルファー スト (Web アプリに依るが) 今やモバイルデバイスから のアクセスが大多数 ゆかりスロットは6 割がモバイルから 必ずモバイル向けにレイアウトを調整しよう 16

Slide 17

Slide 17 text

よくやるテクニック レスポンシブデザイン ボタンを大きくする スマホでも押しやすく Web App Manifest ホー ム画面にアプリを追加できるようにする 17

Slide 18

Slide 18 text

めちゃデカボタン 18

Slide 19

Slide 19 text

Web App Manifest: 設定 { "short_name": "Emtimer", "name": "Emtimer", "icons": [ { "src": "./img/icon-128.png", "sizes": "128x128", "type": "image/png" } ], "background_color": "#fff", "theme_color": "#009688", "display": "standalone" } 19

Slide 20

Slide 20 text

Web App Manifest: ホー ムに追加 20

Slide 21

Slide 21 text

Web App Manifest: ホー ムから起動 21

Slide 22

Slide 22 text

2. ロゴを作る 22

Slide 23

Slide 23 text

2. ロゴを作る サー ビスには必ずロゴを付けよう favicon などがないと寂しい 愛着も沸く 23

Slide 24

Slide 24 text

logo.squarespace.com 24

Slide 25

Slide 25 text

logo.squarespace.com 秒でシンプルなロゴを作成できる アイコンセットが豊富 $10 払うとクレジット無し& 商用利用可 ロゴで時間を潰さず金払って楽しましょう 25

Slide 26

Slide 26 text

3. OGP を設定する 26

Slide 27

Slide 27 text

3. OGP を設定する OGP = Open Graph Protocol なにそれ? 簡単に言うと「 このウェブペー ジは何のこと を書いているか」 という情報を、 プログラム から読める形で HTML に付加する記述方法の ことです https://amachang.hatenablog.com/entry/201 10117/1295233078 “ “ 27

Slide 28

Slide 28 text

URL を埋めたら出てくる" アレ" です 28

Slide 29

Slide 29 text

URL を埋めたら出てくる" アレ" です 29

Slide 30

Slide 30 text

OGP を設定する SNS だと他の大量の情報の中にコンテンツが埋もれ てしまう コンテンツが目立たないとスルー される 画像を入れて注目されるようにしよう 30

Slide 31

Slide 31 text

設定例 URL は全て絶対Path で書かないと認識されないこ とがある 31

Slide 32

Slide 32 text

絶対Path で書かないとどうなるか 去年のMCCMMANCC のHP の場合 32

Slide 33

Slide 33 text

33

Slide 34

Slide 34 text

4. シェアボタンを設置する 34

Slide 35

Slide 35 text

4. シェアボタンを設置する ユー ザによる拡散を助長 OGP を設定しておくと効果的 ツイー ト本文にタグを含めておくとGood ユー ザ同士で勝手に盛り上がる 必ず同じワー ドが入るのでトレンドに載りやす い エゴサー チが捗る 35

Slide 36

Slide 36 text

お手軽シェアボタン設置方法 「Twitter Web Intent」 を使う 以下のURL を新しいタブで開かせると, シェアした いURL やハッシュタグが設定されたツイー ト送信 画面が開く https://twitter.com/intent/tweet ?text={ ツイー ト本文} &url={ シェアしたいURL} &hashtags={ ハッシュタグ} OAuth 認証が不要なのでお手軽 36

Slide 37

Slide 37 text

37

Slide 38

Slide 38 text

その他の細かい工夫 テンプレー トプロジェクトの作成 次回以降の開発に速が出る Advent Calendar などのイベントを利用する 平日朝に投稿する 通勤 => 昼休憩 => 定時後 はSNS に人が集まる 出来るだけフロントに寄せる スコー プが狭まるので速が出る バックエンドが必要ならFirebase やserverless も 検討 38

Slide 39

Slide 39 text

まとめ 39

Slide 40

Slide 40 text

まとめ こんなことに気をつけてWeb アプリ作ってます モバイルファー スト ロゴ OGP シェアボタン 皆さんもｼｭｯ とWeb アプリ作ってみませんか? 40