Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
個人開発の裏側
Search
mizdra
PRO
December 23, 2018
Technology
0
350
個人開発の裏側
MCCMMANCC2018 (
https://uecmma.github.io/MCCMMANCC2018/
) の登壇資料です.
mizdra
PRO
December 23, 2018
Tweet
Share
More Decks by mizdra
See All by mizdra
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
5.1k
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
5.2k
React Server Components の疑問を解き明かす
mizdra
PRO
21
13k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
PRO
8
2.8k
大量の ESLint エラーに対処する技術 / The technology to fight with many ESLint's errors
mizdra
PRO
0
3.1k
Vue Language Server から生まれた Volar.js と、それが秘める可能性
mizdra
PRO
13
8.7k
マルチテナントで GraphQL を使う際の工夫
mizdra
PRO
0
2.5k
Webフロントエンドの秩序を維持する体制を作る
mizdra
PRO
9
26k
祝う2
mizdra
PRO
0
740
Other Decks in Technology
See All in Technology
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
330
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
120
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
720
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1k
Findy Freelance 利用シーン別AI活用例
ness
0
290
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
20250807_Kiroと私の反省会
riz3f7
0
140
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
580
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
340
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Transcript
個人開発の裏側 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
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.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
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