- 概要
- 何ができるか
- デモ
- 制作背景 なぜ作ったのか
- 開発メモ
- この作品をもとに書いた記事
- 使った技術
- 使っていたがやめた技術
- よくある質問集
- アプリの機能
- 他にやったこと
- 苦労したところ
- 反省
- 理解が曖昧なところ
- 今後追加(改善)したい機能
- もっと知りたくなったら
ブックマークやメモをタグをつけて保存する｡
- メモをmarkdown形式でかいて保存できる
- ブックマークを保存できる
- メモ､ブックマークにタグをつけられる
- メモ､ブックマークをタグで絞ったり､並び順を変えるなどして検索できる
- chromeの拡張機能を使ってアプリを開かずともブックマークを保存できる
default.mp4
default.mp4
default.mp4
default.mp4
default.mp4
default.mp4
default.mp4
アドオンを使ったやり方が圧倒的に便利なのでこの方法で保存する人は少ないと思う
default.mp4
むしろこのやり方を推奨している
default.mp4
- laravelとvueを組み合わせた何かを作りたかった｡
- chromeのブックマーク機能に不満があった｡
- 探しにくい､整理がしにくいと思った
- qiitaのストック機能に不満があった｡
- ストック名の数が増えるとストック名を探しにくい
- ストック名が重複してしまう
- 保存したブックマークなどをランダムに表示する機能が欲しかった
すごく雑 https://github.com/s19013/my-wiki/tree/main/dev_memo
エンジニアになれないへっぽこな私が実装したタグをつける機能とタグの検索機能(n番煎じ)
- php
- phpUnit
- laravel
- laravel breeze
- laravel sanctum
- vue.js
- vuex
- vuetify
- inertia
- javascript
- html
- css
- aws
- lightsail
- apach
- mariaDB
- gcp
- computer engine
A:タグを付けて保存するので以下の2点がメリットとなる
- ただタイトル名を検索するよりも探しやすくなる｡
- フォルダで管理するブックマークに比べて､より詳細に整理ができる｡
A:以下の2点
- ユーザーがタグをうまく使いこなせなければ帰って使いにくいアプリとなってしまう｡
- ユーザーの能力に依存してしまう｡
- 検索機能がまだ不十分
A:短く言えば偶然でもユーザーの目に触れてもらえれば何かしらのきっかけになると思うから｡
良いサイトでもたまに見返さないと忘れてしまうので､ランダムで表示されれば見返すきっかけになると考えた｡
特に最近保存した情報でもなければ､かなり昔に保存した情報でもない場合は検索画面にトップ当たりに表示されにくく埋もれてしまうと思っている
それをランダムを使うことで回避できるのではと考えたから｡
A:現段階で私がサーバーサイド言語でまともに使える言語がphpしかなかったため｡
rubyよりもlaravelを採用している会社が若干多かったため
A:laravelと組み合わせて開発されることが多いため
reactよりも難易度が低いらしいため
vueを勉強すればreactも理解できるという話をきいたため
A:awsもしくは､gcpを採用している会社が多く､awsは前回使ったので今回はgcpを使って見ようと思った｡
A:gcpの無料期間がawsよりも短かったから｡
awsのほうがgcpよりも安かったため｡
A:別のトークンを発行せず､クッキーを使って通信するのでこちらのほうが簡単ではと考えたから｡
スマホアプリを作る予定はないため
A:※一部機能の一部しか触ってない,どちらも触り始めたばかりの人間の意見として聞いて頂きたい
awsにはlight sailというあらかじめlamp環境が用意されているサービスがあるためお手軽さはawsの方が上かもしれない
ただ､laravel単体だったらgcpのとあるサービス(サービス名は忘れました)に上げるだけで良いという利点がある
awsのドメイン発行機能とgcpのドメイン発行機能ではawsのほうが最安値が安い
awsは無料期間が1年なのに対し､gcpは3ヶ月のみ
- ユーザー登録
- ログイン､ログアウト
- ブックマーク
- 作成
- 検索
- ソート機能
- 編集
- 削除
- メモ
- 作成
- 一時保存
- 検索
- ソート機能
- 閲覧
- 編集
- 削除
- タグ
- 作成
- 検索
- 編集
- 削除
- 拡張機能用api
- ユーザーのブラウザの言語によって､英語か日本語に切り替わる
- スマホに対応
- タグ検索で一部条件でキャッシュを使うことによって負荷を減らしたり､早く動くようにした
- 広告表示
- OGP
- サーバーサイドのテストコード
- シェルスクリプトによる定期的なバックアップ
- シェルスクリプトによる定期的な論理削除されたデータの物理削除
- このアプリを元にqiitaを書いた
- とある目的を達成するために自作コンポーネントを作っていたが｡わざわざ自作コンポーネントをつくらなくても達成できるとわかり｡無駄な時間を浪費してしまったこと｡
- たまにスクロールバーがあらわないバグがあってそのバグが起こる原因を探る部分と解決方法
- フロントがlaravelではなくvueなので､laravelのpaginationが使えなかったので自分で実装したところ
- 一定条件下で更新したメモなどを更新しようすると更新できないバグが起こる原因を探る部分と解決方法
- metaタグ,ogp周り
- jsだけではクローラーがうまく反応してもらえないので､一度基礎部分をlaravel側で出力して必要に応じてjsで書き換えるようにした｡
- ここにたどり着くまでにかなりの時間がかかった｡
- クローラーの仕様
- $_SERVER['HTTP_ACCEPT_LANGUAGE']という変数を使ってユーザーの使用言語を取得していたが､クローラーではここでエラーが出てしまう｡そのせいで､サーチコンソールにインデックスが登録されないし､ogpが表示されない｡
- ここにたどり着くまでにかなりの時間がかかった｡
- デプロイはまだなれていない
- タグで絞り込み検索する時のsql文
- spa認証の実装
- コードの中の''の中は自動補完がきかないのでそこでの書き間違いによるバグが多々あった
- laravelのテストコードの書き方
- ssl化 他多数
- inertiaのいいところを活かせていないと思う
- git commitの頻度が低くてctrl+zを連打するような場面が多かった
- 頭に入っている情報が断片的だとわかった｡もう一度技術書や学習サイトなどで体型的に学び治す必要がある
- transitionが全体的にわからない
- それなりに計画は立てていたが結局行き当たりばったりになった
- 最初に設計書は作ってはいたが､設計書が穴だらけだったり書き直しなどが多くなって,最終的に設計書は書かなくなってissueなどで管理するようになった
- あれが必要､これが必要と後になってわかって出戻りがたくさんあった
- 苦労というよりは時間がかかってしまったことがきになる
- .envは初期はgitで追跡されないが追跡しないといつどこを変えたかわからなくなるので追跡させたほうが良いかもしれない
- inertiaを今回で初めて触ったのでinertiaを理解するところ
- いつのまにかmainブランチで開発していた
- spaのようなmpaのような中途半端なものができてしまった｡
- テストでは更新したメモなどを再度更新するテストがなかったのでバグに気づかなかった 他多数
- viteの設定
- spa認証
- .envの書き方
- inertia
- apache
- セキュリティ
- laravelのもっと深いところ
- vueのもっと深いところ
- v-formのprevent
- テスト
- ssl
- インフラ周り 他多数
詳細はissueに
- メモ､ブックマーク登録､編集
- markedでは機能が不十分に感じるので他のパッケージを探す
- 引用の書き方が反映されない
- フロント側でタグ情報をキャッシュしてタグなどの検索を早くする
- markedでは機能が不十分に感じるので他のパッケージを探す
- メモやブックマークの検索
- 検索オプション追加
- 日時で絞り込む
- 検索などで何もヒットしなかった時のメッセージを表示させる
- タグなしのブックマーク､メモを検索できるように
- その他
- メモを任意で公開する機能
- メール変更機能
- お知らせ通知機能
- コンポーネント化できそうなものが多いのでコンポーネント化する
- ほぼ同じことしてる部分があるのでまとめる(かえって読みにくいコードになるのではないかと心配?)
- メンテナンス中に表示する画面の作成
- フロント側のテスト(環境をうまく構築できなかったため一旦断念)