開発中のSlide pocketについての資料です。

1. SlidePocket開発物語
～スライドが知的情報として共有される未来を目指して～
2017年11月26日（日）Service Hunt~2018年は開発に挑戦！個人プロダクト展覧会~
＠ゆきしお

2. アジェンダ
• 自己紹介
• アイデアの経緯
• 設計
• 開発
• バージョン管理
• このサービスの売り
• 嬉しかったこと 楽しかったこと
• つらかったこと
• 今後の展望
• 展覧会について

3. 自己紹介
・ハンドルネーム：Yuxio（ゆきしお）
・職業：データアナリスト（新卒2年目）
前職：WEB系のバックエンドエンジニア
・休日にWEBサービスの開発を
少しずつ進めている。
・最近、UI設計とフロントエンドについて
勉強中
・本イベントの主催

4. アイデアの経緯
・自分がほしいと思ったから
サイトで良いスライドが見つかる！
→ブックマークするのも面倒・・・
→ブックマークしておいても探すのが面倒・・・
仕方ないのでTwitterのモーメントやスクラップボックスに入れておく
（最近はスクラップボックスに入れている）

5. アイデアの経緯 構想
メンバー同士で見えるようにしたい
可視化していつでも見えるようにしておきたい
「URL」を入力して保存したい
検索してすぐパッと出したい

6. 設計
• UX設計
• UI設計
• DB設計

7. 設計
UX設計 UI設計 DB設計
• UX・・・サービスの開始から終了までのユーザー体験
• WEBサイト発見からログアウトまで
デモ画面で実際に
URLを入力してもらい
保存
（実体験として記憶）
自分のページを作成
ユーザーが
スライドを探す ログアウトする
ユーザーが
スライドを保存する
新規登録

8. 設計
UX設計 UI設計 DB設計
• UI・・・ユーザーとWEBの接触箇所
• 画面設計のイメージの作成
WEB モバイル
ヘッダー
（検索ボックスを入れる）
ボタン
（モーダルを表示し
URLを入力する）
WEB版は４列
モバイルは２列

9. 設計
UX設計 UI設計 DB設計
・まず最小限のテーブルで考える
Slide_ID
Slide_Name
Slide_URL
Slide_iframeURL
User_ID
User_Name
User_Email
User_Password
Userテーブル Slideテーブル

10. 設計のまとめ
• とにかく早く開発に進めれるようにざっくりした感じで大丈夫かも
これだけ設計
・UX・・・サービスの開始から終了までどんな体験をしてもらいたいか
・UI・・・どんな画面にするか、ユーザーにどんな動きをしてもらいたい
か考える、１UXに対して１UI！
・DB設計・・・まずは少ないテーブルで

11. 設計のまとめ
• 特に画面については、参考となる情報が多ければ多いほど良い。他
のサイトを見てストックしておくと役に立つ。
例えばこんな問題が起こった時・・・
１つのUIに対して２つのUXができ
るようにしたい！
・スライドのURLを入力する
・コンテンツの中で検索ができる

12. 設計のまとめ
• 特に画面については、参考となる情報が多ければ多いほど良い。他
のサイトを見てストックしておくと役に立つ。
例えばこんな問題が起こった時・・・
１つのUIに対して２つのUXができるよ
うにしたい！
・スライドのURLを入力する
・コンテンツの中で検索ができる
自分すげぇの思いついたじゃん！
前衛的！

13. 設計のまとめ
• 特に画面については、参考となる情報が多ければ多いほど良い。他
のサイトを見てストックしておくと役に立つ。
例えばこんな問題が起こった時・・・
１つのUIに対して２つのUXができるよ
うにしたい！
・スライドのURLを入力する
・コンテンツの中で検索ができる
自分すげぇの思いついたじゃん！
前衛的！
いや待てよ・・・
自分がいいと思ったデザインでも
相手がいいと思うデザインかはわからない
相手からみると・・・１つのUIに対して検索するの？
URL入力するの？
そもそもこれどう使うの？

14. 設計のまとめ 参考サイトを見て設計を直す
１つのUIに対して１つUXにする
→スッキリ！１つのUIに対して２つのUXができ
るようにしたい！
・スライドのURLを入力する
・コンテンツの中で検索ができる
→わかりづらい
ボタンを押すとモーダルを
表示しURLを入力
コンテンツの中で検索
わかりずらさは、
入力と検索を一緒にまとめている
ところ
→分解しよう！
Scrapboxのサイトが参考になる

15. 開発
• 開発環境
• 言語
• フレームワーク
• サーバー
• ライブラリ

16. 開発 開発環境
数年前からNetBeansでしたが最近変更した！

17. 開発 開発環境
起動時が重たい
→ストレス
起動時が早い！
→ストレスがない！

18. 開発 開発環境
画面がシンプル、色づかいが良い
日本語化もされている

19. 開発 言語
バックエンド
PHP
フロントエンド
HTML CSS JavaScript

20. 開発 フレームワーク
バックエンド
Laravel
CSSフレームワーク
Bulma
JavaScriptフレームワーク
Vue.js

21. 開発 Vue.jsについて
LaravelですでにVue.jsが使用可能
Laravel + Vue.jsで参考資料があるのでありがたい
Reactと比較
Vue.jsの方が簡単そう

22. 開発のまとめ
• 自分の好きな開発環境でやる
• 挑戦したい、興味があるものでやる
（最近フロントエンドでReactかVueが流行っているし仮想DOMの考え
方は２つのライブラリどちらが廃れても生き残りそうだし一度は使って
おきたい）
• とにかく自分が「つくっていて楽しい！」と思えるものでやる

23. 開発のまとめ
• 自分が何故それを選定したか上記以外の理由も考えておく
（就職・転職・発表の場で自分が開発したものとして説明できるようにするため）
Q.何故Laravel？
A,PHPのモダンフレームワークで近年需要が高まっているので使えるようにしておきたかった
Q.なぜVue.js？
A. Vue.js Reactと比較してfor文など手軽に実装できる Laravelのプリセッツで使用できる jsonからの受
け渡しなどリファレンスがあるので比較的安心
Q.なぜBulma？
A.Flexboxで使用できるのでスマフォにも対応 WEBサービスのイメージカラーに合っている
UIキットが豊富にあり最初から作る工数の削減

24. 開発のまとめ
• フロントエンド CodePenで小さいUIから開発する
https://codepen.io/YuxioArts/pen/YEVpeq
検索文字列から結果表示を自動的に変える

25. バージョン管理
• ビットバケットを使用
GitHuｂ 非公開リポジトリ有料
ビットバケット 非公開リポジトリ無料（しかも何個も作れる）
誰にもコードを見せたくない場合にオススメ

26. 嬉しかったこと 楽しかったこと
• 自分で最初からUX設計からフロントエンドまで開発できるのは楽し
いし、作れると嬉しい

27. つらかったこと
• Laravelのバージョンを最新版に上げたら謎のエラーでViewと
Controllerがつながらなくなり死んだ
• 開発をしようと思ってもあまり時間が取れない
→通勤もくもく！ お昼休みもくもく！ 夜カフェもくもく！
色々やった結果、休日が一番もくもく集中できる！

28. 今後の展望
• まずサービスの完成とローンチ！

29. 展覧会について
• 本日は、プロダクトがまだ未完成なので出品致しませんが
開発時で参考にした書籍を置いておりますので
ご自由にお読み下さい。

30. ご清聴ありがとうございました！