Upgrade to Pro — share decks privately, control downloads, hide ads and more …

個人開発の裏側

mizdra
December 23, 2018

 個人開発の裏側

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

mizdra

December 23, 2018
Tweet

More Decks by mizdra

Other Decks in Technology

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

    View Slide

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

    検討
    38

    View Slide

  39. まとめ
    39

    View Slide

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

    View Slide