Code
Weekly JStudy. #002（2021.04.25）
Webフロントエンドまわりを中心に1週間で学びを得たことを記録する週刊ブログです。 今週はマーケティング関連の本を読んでいたので、マーケティングまわりの学びもメモってます。 **videoタグの動画の読み込み方** - `preload`と`autoPlay`属性によって読み込み方が変わる - `preload` - `none`: 全く事前読み込みしない - `metadata`: メタデータだけ事前読み込みする - `auto`: 動画ファイル全体を事前読み込みする - デフォルト値はブラウザによって異なる - `autoPlay` - `preload`以上の優先度をもっている - `autoPlay`属性を使用した場合、`preload="auto"`になる - インスタのストーリーの様な動画の自動再生はするが、連打操作によって動画が次々と読み込まれるような機能を実装する場合、素直に`autoPlay`属性を使用すると連打操作によってユーザーに見られることがないような動画をファイル全体で読み込んでしまい、次第にパフォーマンスが落ちていくという現象が起きる。 - そもそも連打による動画の読み込みを間引く処理を入れるか、HTMLMediaElementの`load()`や`play()`メソッドを駆使して、`autoPlay`属性のような機能を自前で実装する必要がありそう。 参考文献 - [`<video>`: The Video Embed element - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) - [HTMLMediaElement - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) --- **スマホを使ってlocalhost環境のデバッグをする方法** - Dev ToolsやSimulatorでスマホの環境に寄せてデバッグすることはできるが、レンダリングエンジンが異なるため、実機で起動すると意図と異なる挙動をするときがある（特にwebkit） - Android端末かiOS端末かによってデバッグする方法が異なる - Android端末 - 端末をPCにつなぎ、PC側でChromeを起動する - `chrome://inspect`にアクセスし、ポートフォワーディング設定をする - iOS端末 - 端末とPCを同じWi-Fiに接続する - 端末のプロキシを手動で設定し、PCのIPアドレスと接続したいポート番号にする - 端末をPCにつなぎ、safariでlocalhostにアクセスし、PC側でもsafariを開き、開発メニューからWebインスペクタを起動する 参考文献 - [localhost をスマホ実機で確認する方法 - Qiita](https://qiita.com/nanarya/items/8d01dfb4de434e7b8acc) --- **Androidの一部環境で、`loadedmetadata`のタイミングで動画の長さを取得できない** - PCやiOSでは、`loadedmetadata`タイミングで動画の長さを取得することができた - Androidも取れる環境と取れない環境があるっぽい（詳しい調査はできていない） - 動画の長さは`durationchange`のタイミングで取得すれば間違いがないよ 参考文献 - [Android video.duration does not load until video.play() - stackoverflow](https://stackoverflow.com/questions/9880012/android-video-duration-does-not-load-until-video-play) --- **個人でも実践できるマーケティング手法・用語** - 個人開発でお金を稼いでみたいとは思いつつ、プロダクトの広め方・売り方を知らなすぎる、大企業のマーケティングの真似はお金がかかりすぎてできないなあとなり、個人で実践できるマーケティング手法ってどんなのがあるんだろうと思い本を購入 - 3C分析 - 自社(Company)、顧客(Customer)、競合(Competitor)をそれぞれリサーチし、戦略を考える分析手法 - 自社と顧客の円が重なる部分に位置するプロダクトをつくることができれば最高 - それが更に競合の円には入っていないようなものであればなお最高 - STP分析 - 「すべての顧客を狙った商品は誰からも必要とされない」ので、どんな顧客にどのような立ち位置でプロダクトをアピールしていくか決定していく分析手法 - セグメンテーション（Segmentation） - 性別・年齢・居住地域・年収・職業・家族構成など人口統計学な指標で、市場に散らばる顧客をグルーピングしていく - ターゲティング（Targeting） - グルーピングした群の中のどこを攻めていくか決定する - ターゲティングは知っているひとりの顔が浮かぶまで徹底的に - ポジショニング（Positioning） - 自社のプロダクトをXY軸平面上に位置付けて、他社との違いを明確にする - 2軸を何にするかはとても重要 - コツは顧客がそのプロダクトに求めるニーズを軸にとること - 4P分析 - どんな商品(Product)を、いくら(Price)で、どこ(Place)で、どのように(Promotion)売るか戦略を策定するための分析手法 - Product - 顧客が手に入れられる価値全て（売っている商品そのものだけでなく、店の空間や接客サービスといったものも含まれる） - Price - お金の支払い方法（割引サービスや会員制度といったものも含まれる） - Place - 商品をどこで手に入れられるのか（実店舗？オンライン？） - Promotion - 「顧客とのコミュニケーション全般」を指す - 何もテレビCMや看板などお金のかかる広告だけではない（SNSやブログでの情報発信など） - 大切なのは、「誰に何をどうやって伝えるか」を考えること - 消費者行動モデル - 時の流れともに少しずつ形態が変わっている - 時代に合わせた消費者行動モデルに則って、顧客が進む仕掛けを用意することが、マーケティング戦略の肝 - AIDMA - 1920年代に提唱され、100年にわたって知られている昔ながらの基本モデル - まだインターネットがなく、テレビCMや看板の広告しかなかった時代 - ①Attention（注目）→②Interest（関心）→③Desire（欲求）→④Memory（記憶）→⑤Action（行動） - AISAS - ①Attention（注目）→②Interset（関心）→③Search（検索）→④Action（行動）→⑤Share（情報共有） - インターネット時代に入り、AIDMAでは説明できなくなって新たに提唱されたモデル - 顧客の動きが③Search（検索）⇄⑤Share（情報共有）を繰り返す場合がある - SIPS - SNSが広がったことで登場したモデル - ①Sympathize（共感）→②Identify（確認）→③Participate（参加）→④Share&Spread（共有・拡散） - クロスSWOT分析 - 自社の現状を分析し、今後の戦略を検討するためのフレームワーク - 内部要因の強み（Strength）・弱み（Weakness）、外部要因の機会（Oppotunity）・脅威（Threat）を書き出す - 強み（Strength）: 自社のプロダクトを顧客が利用する理由となる長所 - 弱み（Weakness）: 競合と比較して劣っている部分 - 機会（Oppotunity）: 外部環境の変化で、自社のビジネスチャンスとなり得る要因 - 脅威（Threat）: 競合の同行など、自社の目標達成を阻害し得る要因 - 4要素の各組み合わせごとに施策を考える - 強みx機会→積極的な施策、自社のよいところを更に伸ばす施策 - 強みx脅威→差別化の施策 - 弱みx機会→弱点の強化策 - 弱みx脅威→防衛策・撤退 参考文献 - [弱者でも勝てるモノの売り方 お金をかけずに売上を上げるマーケティング入門](https://amzn.to/3sJyS9S)
Apr 25, 2021 公開
Weekly JStudy. #001（2021.04.17）
Webフロントエンドまわりを中心に1週間で学びを得たことを記録する週刊ブログです。 **z-indexとスタッキングコンテキスト（Stacking Context）** - スタッキングコンテキストはwebページ上の仮想的な重なりの概念のこと - z-indexもスタッキングコンテキストのうちの1つ - 参考文献 - [重ね合わせコンテキスト - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) - [君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ics.media](https://ics.media/entry/200609/) --- **ハプティック（Haptic）** - 利用者に力・振動・動きなどの触覚フィードバックを与える技術 - 使いどころの選定が難しいが、主に「完了・警告・失敗」時に使われることが多い - 参考文献 - [ハプティクス - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%97%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9) - [日常の中にあふれたハプティックを探る - Goodpatch Blog](https://goodpatch.com/blog/haptic-feedback-design) --- **ジェームズ・ギャレットのUX5階層モデル** - ジェームズ・ギャレット氏が[「Elements of User Experience」](https://amzn.to/3e7wNPT)という著書の中で紹介した、UXを考える上で重要な5階層モデルの思考法 - 5つの要素は段階的に、密接につながっている - 表層：ビジュアルデザイン - 骨格：インタフェースデザイン、ナビゲーションデザイン、インフォメーションデザイン - 構造：インタラクションデザイン、情報アーキテクト - 要件：機能仕様、コンテンツ要求 - 戦略：ユーザーニーズ、目的 - 参考文献 - [UXデザインにおける5段階モデルとは？ - Goodpatch Blog](https://goodpatch.com/blog/elements-of-ux) --- **言語イメージスケール** - 日本カラーデザイン研究所が開発した感性マッピングツール - 180の形容詞がマッピングされており、色に対して持っている共通の感覚との相互関係を重視して研究開発された - 参考文献 - [イメージスケールとは - 日本カラーデザイン研究所](http://www.ncd-ri.co.jp/about/image_system/imagescale.html) --- **visibility: hiddenのdisplay: noneとの違い** - `visibility: hidden`は要素を隠し、アクセシビリティツリーからも削除されるが、要素の大きさは確保される --- **window.matchMedia** - 指定されたメディアクエリ文字列のパース結果を表す、新しい`MediaQueryList`オブジェクトを返します - `useMedia`のようなカスタムhooksをつくれそう - 参考文献 - [window.matchMedia - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia) --- **visually-hidden** - a11y対応等でユーザーには見せないがDOM自体は存在させておきたい場合、ある程度の大きさを確保しておかないとスクリーンリーダーがゴミだと判断して無視してしまう - 参考文献 - [amphtml - github](https://github.com/cvializ/amphtml/blob/70d2c6a4d8b3e51bea21918e907ef2a5e9e33e50/css/amp.css#L244-L274) - [Accessibility/SEO Friendly CSS Hiding - CSS-TRICKS](https://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/) --- **webkitでrelayoutが発生する場合、tableの中のcaptionタグがあると下に飛んでっちゃうバグ** - [iPhone等のモバイルブラウザで開くとバグが体験できます](https://codepen.io/wadackel/pen/PoWaYxO?editors=1100) - 既にバグの報告はされていた - [Table caption jumps to the bottom of the table after simplified table relayout - WebKit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=187903) - 対応策 - `transform`などrelayoutが発生するCSSを記述している箇所に`will-change`プロパティを当てる - しかし、むやみやたらに`will-change`プロパティを当てることは避けるように注意されている（ref. [will-change - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/CSS/will-change)） - tableタグ内でcaptionタグを使うのを諦めて、`aria-describedby`を使用してa11y対策はきっちりやる（ref. [Caption & Summary - Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/caption-summary/#using-aria-describedby-to-provide-a-table-summary)）
Apr 17, 2021 公開
基本左詰めだが、領域はみ出るときは折り返さず左からはみ出させる
<p class="codepen" data-height="331" data-theme-id="dark" data-default-tab="css,result" data-user="junkisai" data-slug-hash="rNMEzGv" style="height: 331px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="基本左詰めなんだけど領域はみ出るときは左からはみ出すやーつ"> <span>See the Pen <a href="https://codepen.io/junkisai/pen/rNMEzGv"> 基本左詰めなんだけど領域はみ出るときは左からはみ出すやーつ</a> by Junki Saito (<a href="https://codepen.io/junkisai">@junkisai</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
Jan 26, 2021 公開
Next.jsで自動生成されるtsconfig.jsonの中身を調べたメモ
``` { "compilerOptions": { "target": "es5", /* どの動作環境向けにトランスパイルするかを指定 */ "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, /* JavaScriptファイルをコンパイル可能に */ "skipLibCheck": true, /* 型定義ファイル（*.d.ts）の型チェックをスキップ */ "strict": true, /* すべての厳密な型チェックオプションを有効化 */ "forceConsistentCasingInFileNames": true, /* ファイルの大文字小文字の違いをエラー報告 */ "noEmit": true, /* コンパイル結果を出力しない */ "esModuleInterop": true, /* CommonJSモジュールとESモジュール間の相互運用性を,すべてのインポート用に名前空間オブジェクトを作成することで可能 */ "module": "esnext", /* どのモジュールパターンで出力するかを指定 */ "moduleResolution": "node", /* モジュール解決戦略を指定 */ "resolveJsonModule": true, /* jsonファイルから型解決した状態で値を取得可能に */ "isolatedModules": true, /* 各ファイルを個別のモジュールとしてトランスポート */ "jsx": "preserve" /* tsx拡張子におけるjsxサポートを指定 */ }, "exclude": [ "node_modules" ], "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ] } ```
Apr 08, 2020 公開