komura-c.log

komura-cのWeb技術、音、生活のメモの備忘ログ

開発日記(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);


> 一覧に戻る