個人開発の裏側

MCCMMANCC2018 (https://uecmma.github.io/MCCMMANCC2018/) の登壇資料です.

Transcript

1. 個人開発の裏側
   in MCCMMANCC 2018
   1
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. 通学先を囲って…
   9
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. めちゃデカボタン
    18
    

    View Slide

19. 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
    

    View Slide

20. Web App Manifest:
    ホー
    ムに追加
    20
    

    View Slide

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

    View Slide

22. 2.
    ロゴを作る
    22
    

    View Slide

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

    View Slide

24. logo.squarespace.com
    24
    

    View Slide

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

    View Slide

26. 3. OGP
    を設定する
    26
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. View Slide

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

    View Slide

39. まとめ
    39
    

    View Slide

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

    View Slide