個人開発の裏側

個人開発の裏側 in MCCMMANCC 2018 1

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

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

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

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

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

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

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

通学先を囲って… 9

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

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

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

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

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

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

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

めちゃデカボタン 18

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

Web App Manifest: ホームに追加 20

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

2. ロゴを作る 22

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

logo.squarespace.com 24

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

3. OGP を設定する 26

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

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

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

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

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

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

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

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

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

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

まとめ 39

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

個人開発の裏側

個人開発の裏側

More Decks by mizdra

Other Decks in Technology

Featured

Transcript