開発日記(7/7~)

7/7 ・editor の実装で試行錯誤 ・スイッチングコストがかかるため、angular-editor のままいこうと考えたが、画像のアップロードが RESTAPI を使っていたため、サーバーサイドを用意する必要があり、調べた

7/8 ・functions でサーバレス画像アップロードサーバー作ろうとしたが、CORS などサーバーサイドを適切に処理するには技術的にも足りず、editor を切り替えた方が実装コストも低いと考えたため、angular-froara-wisywig に変えた

7/9 ・angular-froara-wisywig の実装ができた

FirebaseStorage の URL を FroalaEditor に入れ込むと’…media&token’という風に&がエスケープされてしまっていたので、サムネイル表示ができなかった →FireStore への保存時に正規表現で変換することで画像が表示できた

括弧：「()」 ブラケット：「[]」 ブレース：「{}」

7/12 ・離脱ガード ・create 画面でのフッター実装 ・非公開公開設定

記事作成完了のスナックバーを下書きと公開で変更する Editor はマークダウンを使用しない FroalaEditor ならプレビュー画面いらないと思った 画像表示のプラグインはどうするか考える レスポンシブ Header を検索ボタンで開くようにする →qiita を参考に display:none でクリック後に css を追加、displayblock に camp のヘッダーは親 div に flex1、子 input に margin 0 auto で実装していた 来週は Algelia を導入し、ローディング UI 実装する 自分が作っているのは、CGM サービスなのでリリース後はドックフーディングしていこうと思った twitter の description のリンクを正規表現でクリック可能にする 業務では、つい自分でがんばってしまって納期ギリギリまでやってしまうことがあるが、間に合わない事態が予測できたらすぐに連絡することが重要だと学んだ、当たり前のことだけど実際は気を付けるべきだと感じた 質問箱のなど Twitter ログインはセンシティブ 自分のサービスではアカウントの管理に使うのみなので、TwitterAPIReadOnly にしておいた ※勝手にツイートすることはありません。公開情報の読み取りのみを使用します。と記述しておく 他の方のサービスレビューを見て気をつけようと思ったこと ・フォームの見出しは、中央揃えは気持ち悪い ・Font-size を揃える Auto-focus を editor のタイトルに入れる ・サービス全体のテンション、雰囲気、デザインを統一 CGM サービスは、ユーザーの投稿するモチベ、ユーザーが見るモチベ、サービスを知るキッカケ を満たす設計や導線が重要だと学んだ

7/14 ・記事詳細画面に firestore のデータを表示 ・見出しハイライト実装 ・記事一覧画面から更新、削除を可能にする ・TwitterPublish の URL 使って Twitter の共有リンクを実装 ・Algoria キャッチアップ ・YouTube で DTM のいい動画あればリンク集が更新されるサイドバー作ろうか考えておく ・スタイルは後回しでよい → 分かってても気にしてしまっていたので暫定的で実装する ・ファーストビュー → 天才じゃなければ無から最初からデザインは不可能ため、既存のサービスを真似する ・UI や実装を悩む時間が多い → ページごとにいいと思ったサービスのページパクる ・Stripe はサービス的に実装しないが、他で作り込もうと考えた（Algoria、デザイン、OGP） ・‪ まとめて話す訓練していく、伝わるように話せるようになる ‬ 結論から言うようにする ・ターゲットは自分のような作曲を趣味でやっている人が高めあえるサービスにしたい ・ちょっとした作曲の tips、ブログを設立するほどでもないけれど tips やログを書き込めるサービス ・インプットとアウトプットしまくる日々にしたいと思った 追加したい ・Function から iframely の URL に HTTPGET リクエストを送って返ってきた Json データの HTML を form に ・embedly

Javascript .slice() begin  から  end  まで選択された配列の一部をシャローコピーして新しい配列オブジェクトを返す const importants = [’brave’, ‘love’, ‘life’, ‘hope’]; console.log(importants.slice(0, 2)); // expected output: Array [’brave’, ‘love’] ・Firestore のアーキテクチャ User に変更が加わった時に記事を全部書き換えなきゃいけないから混ぜなくても良い ・オートコンプリート選択したら検索も同時に走らせる ・ログイン時に screen-name のみ毎回入れる ・XD は cmd + e で画像保存 ・:Before :after :active でパンくず実装 ・タグは string の配列で持たせる ・Algolia と firestore の文字制限に引っかからない設定にする

レスポンシブヘッダーのマークアップ

1. 普通に PC ヘッダーをマークアップ
2. レスポンシブ時のメニューボタンを作成
3. ドロワーやドロップダウンメニューにしたい箇所を div で囲む
4. SP 時のメニュー時の追加要素はあらかじめ、マークアップしておき、sp-only などのクラスをつけ、スマホの時のみ display:none;などで非表示にする
5. メニュー開閉は js 側で行い、angular の場合は isOpen などをコンポーネントのプロパティに置いておき、*ngif で切り替え、—active クラスに表示する CSS を書いておき、表示するようにする（click イベントで active クラスをつける）

ポイント

・マークアップを pc と sp で要素を作ると管理コストが上がる （PC からは削除されているが、SP からは削除されていないなど） ・大掛かりにやると SEO のハックと見なされてペナルティくらう場合もある → レスポンシブは、可能な限りワンソースでいく（要素を使い回す）

・CSS の@media クエリは該当スタイルクラスの下に書いた方が直感的

・ドロワー表示時の背景暗くなるのは overlay などのクラスを持たせた div を作っておき、position:fixed; top:0; bottom:0; left:0; right:0;として全体を指定、background-color に hsla や opacity などで透過することによって作る（height: 100vh;で全体指定をすると safari ではアニメーションで下メニューが出てくる場合があり、それが加味されていないため、やめた方が良い） background: linear-gradient(to top, #b41c8b, #ef427c);