MCCMMANCC2018 (https://uecmma.github.io/MCCMMANCC2018/) の登壇資料です.
個人開発の裏側in MCCMMANCC 20181
View Slide
自己紹介mizdraMMA /部長 / B3趣味Webアプリ開発アニメ (主にきらら系)2
皆さん, Webアプリ作ってますか?3
かくいう僕は趣味: Webアプリ開発4
約1年間で4つのWebアプリをリリース5
遅刻可視化ツール位置情報の履歴から通勤・通学の遅刻を可視化https://www.mizdra.net/entry/2018/03/15/0039386
ロケーション履歴を読み込んで…7
授業の開始/始業時刻を指定して…8
通学先を囲って…9
チャート出力ボタンを押す10
地獄が可視化されて便利11
ゆかりスロットゆゆ式の登場人物「日向縁」の目を揃えるスロットゲームネタ元は右のイラスト12
13
今日はその開発の裏側をご紹介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.com24
logo.squarespace.com秒でシンプルなロゴを作成できるアイコンセットが豊富$10払うとクレジット無し&商用利用可ロゴで時間を潰さず金払って楽しましょう25
3. OGPを設定する26
3. OGPを設定するOGP = Open Graph Protocolなにそれ?簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTMLに付加する記述方法のことですhttps://amachang.hatenablog.com/entry/20110117/1295233078““27
URLを埋めたら出てくる"アレ"です28
URLを埋めたら出てくる"アレ"です29
OGPを設定するSNSだと他の大量の情報の中にコンテンツが埋もれてしまうコンテンツが目立たないとスルーされる画像を入れて注目されるようにしよう30
設定例URLは全て絶対Pathで書かないと認識されないことがある31
絶対Pathで書かないとどうなるか去年のMCCMMANCCのHPの場合32
33
4.シェアボタンを設置する34
4.シェアボタンを設置するユーザによる拡散を助長OGPを設定しておくと効果的ツイート本文にタグを含めておくとGoodユーザ同士で勝手に盛り上がる必ず同じワードが入るのでトレンドに載りやすいエゴサーチが捗る35
お手軽シェアボタン設置方法「Twitter Web Intent」を使う以下のURLを新しいタブで開かせると,シェアしたいURLやハッシュタグが設定されたツイート送信画面が開くhttps://twitter.com/intent/tweet?text={ツイート本文}&url={シェアしたいURL}&hashtags={ハッシュタグ}OAuth認証が不要なのでお手軽36
37
その他の細かい工夫テンプレートプロジェクトの作成次回以降の開発に速が出るAdvent Calendarなどのイベントを利用する平日朝に投稿する通勤 =>昼休憩 =>定時後 はSNSに人が集まる出来るだけフロントに寄せるスコープが狭まるので速が出るバックエンドが必要ならFirebaseやserverlessも検討38
まとめ39
まとめこんなことに気をつけてWebアプリ作ってますモバイルファーストロゴOGPシェアボタン皆さんもシュッとWebアプリ作ってみませんか?40