デザイナーとエンジニアの双方の経験から得た知識を元にまとめたメモ。互いの視点から話すことで理解を深められます。主にフロントエンジニア領域のReact, vue, nodejs, javascriptなど。
GoogleのUX指標 Core Web Vitalについて
UIUXの定量評価には今まで大きな課題がありました。 デザインの変更がどのように経営に貢献できるのか。 UXが向上したと言っても売上には何も影響がでず、経営層からはお金をかけただけで何も効果が無かったように感じでしまうこともしばしば。 そん
ドメインを取得するなら毎週金曜日にエックスドメインが一番安い
目次 1 ドメイン を取得する代表的なサービス2 どこでドメイン を買うのが一番安い？3 エックスドメインのフライデーセール ドメイン を取得する代表的なサービス ドメイン を取得するサービスといえばここら辺が有名です。 どこで購入したとし
なぜBEMはアンダースコア__、またはハイフン-を2個必要なのか
目次 1 BEMとは何か2 BEMの記法3 Block__Element–Modifierである理由4 BEMのカスタムルール BEMとは何か の詳しい話はせず、簡単にだけ説明します。詳しくはこちらを確認ください。 https:
要素に意味を提供するHTML属性。 基本的にはスクリーンリーダーでユーザに伝えるもので、それ以外のユーザへの影響はありません。 目次 1 WAI-ARIAの役割2 WAI-ARIAを使うタイミングは？3 WAI-ARIAを使う上で注意するこ
サチコの問題解消100連発をご紹介！Google Search Console
グーグルサーチコンソール（Google Search Consele）通称サチコ。これで出てきたエラーの解消方法についての履歴を紹介。 とはいえ、100個もまだないので解消してきた課題を紹介していきます。 目指せ100個。 ページにリダイレ
Nuxt.jsでアニメーションを作るにはtransitionを使おう
https://jp.vuejs.org/v2/guide/transitions.htm v-show, v-if時にアニメーションを使って要素を表示非表示したい場合には、Vue.jsのtransitionをまず試してみましょう。 <
Gitでmasterブランチに強制push（force-push）させないようにするには
複数人でGitを更新していると絶対に訪れる失敗 「あ、間違えてmasterブランチにpushしちゃった><」 こんな失敗が起きないように、Githubの設定を変更していくことをオススメします。 Githubの「settings」
Nuxt + axiosで外部APIからデータを取得して表示する方法
各所で使う方法ですが、Nuxtにて外部APIを使ってデータ取得し、ページに表示させたいケースは多くあります。 Nuxtのライフサイクルのどこで取得し、ページに表示すべきか検討しました。 一般的な方法はこちらかなと思うので、とりあえず必要な時
2020年のUIトレンド “Neumorphism(ニューモルフィック) = New + Skeuomorphism”
DribbbleやInstagramで最近話題となっている2020年、令和の新UI「Neumorphism」 New+Skeuomorphism = Neumorphism とのこと。 目次 1 Neumorphism Designはどんな
【WIXと比較】簡単にホームページやブログを作れる「ジンドゥー(Jimdo)」使い方と評判は？
こちらの記事で、ジンドゥーの登録方法と使い方を説明しました。知りたい方はまずそちらへどうぞ。 本記事でわかること ・WIXなど他のホームページ作成サービスとの違い ・有料プランでできること ・ジンドゥーの評判・口コミ ・僕が使ってみて気にな
簡単にホームページやブログを作れるジンドゥーの使い方と評判は？
ジンドゥー(Jimdo)は国内でもトップクラスのユーザー数を誇るクラウド型のホームページ作成サービス。 WIX、ペライチ、ジンドゥー、グーペ、アメーバオウンド（Ameba Ownd）とかがありますよね。 これらのうち、ジンドゥーを実際に使っ
かんたんにフォントサイズ指定をプレビュー表示「フォントサイズシミュレーター」
目次 1 概要2 使い方マニュアル2.1 プレビュー文字の入力2.2 それぞれの単位のスライダーを動かす2.3 サンプル動画 概要 フォントサイズシミュレーター https://tools.desnote.com/fontsize/ C
かんたんにフォントサイズ指定をプレビュー表示「フォントサイズシミュレーター」
目次 1 概要2 使い方マニュアル2.1 プレビュー文字の入力2.2 それぞれの単位のスライダーを動かす2.3 サンプル動画 概要 フォントサイズシミュレーター https://tools.desnote.com/fontsize/ CSS
もう困らない！CSSを古いブラウザ対応用に簡単変換！CSS最適化ツール
目次 1 概要2 使い方マニュアル2.1 サポートブラウザの設定2.2 CSSコードを入力2.3 設定のURLをシェアする3 今後の機能展開 概要 CSS最適化ツール https://tools.desnote.com/cssOptimis
もう困らない！CSSを古いブラウザ対応用に簡単変換！CSS最適化ツール
目次 1 概要2 使い方マニュアル2.1 サポートブラウザの設定2.2 CSSコードを入力2.3 設定のURLをシェアする3 今後の機能展開 概要 CSS最適化ツール https://tools.desnote.com/cssOptimis
目次 1 checkboxをデフォルト選択状態（checked）にしたいけどできない2 Nuxtjsでサイトマップ（sitemap.xml）を自動生成したい checkboxをデフォルト選択状態（checked）にしたいけどできない ロード
目次 1 checkboxをデフォルト選択状態（checked）にしたいけどできない checkboxをデフォルト選択状態（checked）にしたいけどできない ロード時にcheckedになるのに、最終的には外されてしまう。 調べると、v-
Vue.js / NuxtJSのエラーメッセージの原因と解決方法
目次 1 vue/order-in-components1.1 The “components” property should be above the “data” property on
Vue.js / NuxtJSのエラーメッセージの原因と解決方法
目次 1 vue/order-in-components1.1 The “components” property should be above the “data” property on
目次 1 File Permission Error, permission denied. Please make the cache directory writable. File Permission Error, permissi
目次 1 File Permission Error, permission denied. Please make the cache directory writable. File Permission Error, permissi
目次 1 File Permission Error, permission denied. Please make the cache directory writable. File Permission Error, permissi
wordpressでシンタックスハイライトのプラグインはどれを選べば良い？
wordpressを使用する上で、コードをどう見せるかはみんなの課題の1つ。 複数あるシンタックスハイライトの機能を良い点（メリット）、悪い点（デメリット）について比較してみました。 今回比較した機能はこちらの機能です。 ○「Highlig
wordpressでコード整形プラグインはどれを選べば良い？
目次 1 Highlighting Code Block1.1 良い点・メリット1.2 悪い点・デメリット2 WP Code Highlight.js2.1 良い点・メリット2.2 悪い点・デメリット3 Enlighter3.1 良い点・メ
railsでコーディングをする上で、調べたことをQ&Aにしてみました。 随時更新していきます。 きっと初心者は同じとこでつまずくはず・・・？ 目次 1 変数の埋め込みの方法は？2 コメントアウトはどうすれば良い？3 存在チェックの方
railsでコーディングをする上で、調べたことをQ&Aにしてみました。 随時更新していきます。 きっと初心者は同じとこでつまずくはず・・・？ 目次 1 変数の埋め込みの方法は？2 コメントアウトはどうすれば良い？3 存在チェックの方
自分なりの解釈で各項目にコメントを入れました。詳細は公式ドキュメントをみてください。 インストール ディレクトリ構造 設定 ルーティング ビュー インストール create-nuxt-app $ npx create-nuxt-app &l
基本はここのページを元に用意しました。 https://ja.nuxtjs.org/guide/installation/ 目次 1 インストール：環境準備編1.1 create-nuxt-app1.1.1 Stylelintエラー発生 イ
目次 1 ドメイン -> サブドメイン設定 -> ドメインを選択2 サブドメインの設定追加3 設定完了4 インストール先 ドメイン -> サブドメイン設定 -> ドメインを選択 ここからサブドメインを設定するドメイン
目次 1 ドメイン -> サブドメイン設定 -> ドメインを選択2 サブドメインの設定追加3 設定完了4 インストール先 ドメイン -> サブドメイン設定 -> ドメインを選択 ここからサブドメインを設定するドメイン
目次 1 ドメイン -> サブドメイン設定 -> ドメインを選択2 サブドメインの設定追加3 設定完了4 インストール先 ドメイン -> サブドメイン設定 -> ドメインを選択 ここからサブドメインを設定するドメイン
被リンク分析・競合調査ツールAhrefs（エイチレフス）の使い方は？7日間トライアルを使ってみた。
noteで読んだ記事で紹介されており、どんなツールなのか7日間トライアルを使ってみました。 トライアルですが7$で有料で、無料版はありません。キャンセルができることも確認。忘れると自動で決済されるので注意。 有償トライアル期間
被リンク分析・競合調査ツールAhrefs（エイチレフス）の使い方は？7日間トライアルを使ってみた。
noteで読んだ記事で紹介されており、どんなツールなのか7日間トライアルを使ってみました。 トライアルですが7$で有料で、無料版はありません。キャンセルができることも確認。忘れると自動で決済されるので注意。 有償トライアル期間
目次 1 【D2C】ブランド販売開始から約8ヶ月で月商840万円を超えるまでにやった全記録1.1 準備1.2 マーケティング1.3 LPO・CRM 【D2C】ブランド販売開始から約8ヶ月で月商840万円を超えるまでにやった全記録 サービスを
「THE THOR」の使い方・Q&A wordpresテーマ
使っていて調べたことをQ&Aとしてまとめてみました 目次 1 Twitterのシェアするときの画像を大きくしたい2 タグに設定しているものをtwitterでハッシュタグをシェアしたい2.1 子テーマに親テーマのinc -> f
SEOで使えるgoogle検索の特別構文検索（site, info, link, intitle, allintitle, intext, inanchor, inurl）
SEO対策として色々調べる際に、google検索には以下8つの特別構文検索があります。 こちらを知っておくと、便利なので是非使って見てください。 目次 1 site:（サイト）2 info:（インフォ）3 link:（リンク）4 intit
「クロール済み – インデックス未登録」が表示されてインデックスされない理由・原因は？
「クロール済み – インデックス未登録」 新しくページを作成しましたが、なかなかgoogle search consoleに出てこない。 と思ったことありませんか？ まずクロールを確認する方法は以下の2つがあります 目次 1 検
macOS Catalinaにアップデートしたらフォントがおかしくなったので対処した話
先日、macOS Catalina にアップデートしました。 アップデートした後にAmazonをみていたら ん、なんかフォントがおかしい。 目次 1 明朝体に変更されている2 原因は？3 対処方法は？ 明朝体に変更されている
【エラー】リクエスト回数が多すぎます。 TooManyRequests Amazon API エラー
Linkerを利用して、amazonアフィリエイトをしようと思ったらこんなエラーメッセージが出てきました。 【エラー】リクエスト回数が多すぎます。 TooManyRequests 目次 1 原因は？2 対処方法は？ 原因は？ 2019年1月
Rinkerを使ってamazonのアフィリエイトを始めようと思ったらこんなメッセージが出てきた 英語 【エラー】The request has not been correctly signed. If you are using an A
All In One SEO Pack 言わずとも知れたSEOのためのものが全部入ったプラグイン。 とりあえず入れておくと良いです。 Google XML Sitemaps sitemapを自動生成するプラグイン。 「All In One SEO Pack」が入っていれば不要ですが、これを入れる必要がなく、sitemapだけ欲しい時に入れるもの。 Classic Editor wordpressが
HTMLメールの場合、開封率がわかり、またテキストメールに比べてクリック率（CTR）や購買率が高いと言われている。 ただ、ユーザがHTMLメールを見る環境を考えると100パターン以上存在し、書く環境に対応するのは難しい。 そのため、現在では使われることのなくなったテーブルレイアウトが必須となる。 このテーブルレイアウトの作り方についてまとめてみました。 ベースのHTMLはこちら
「テーブルレイアウトはするな」 仕事で当たり前の用によく言われること。 しかし、実際なぜ使ってはいけないのかを、具体的に説明できる人が少ない。 なので、その理由と、本当に使ってはいけないのかをまとめてみました。 メリット 崩れづらい 昔ながらのタグな故、tableタグで組むと崩れが起きづらい 組みやすいレイアウトがある CSSでは組みのが大変な組み方を簡単に実現できる。 例えば縦横中央寄せなど。
wordpressの有料テーマ 日本 VS 海外を調べてみた
サイトを作成しているといずれは考える有料テーマ。 とりあえず日本のテーマに偏ってしまいそうですが、海外のテーマの方が優秀なのは考えずともわかります。 なので、日本手製テーマと海外テーマを調べてみました。 日本 THE THOR 大人気のテーマ。圧倒的にSEOに強く、欲しい機能が詰まったテーマ。 迷っているならとりあえず選択しておけば間違いない。 JIN こちらも人気。 個人ブログ向けで、可愛くて親
wordpressの有料テーマ 日本 VS 海外を調べてみた
サイトを作成しているといずれは考える有料テーマ。 とりあえず日本のテーマに偏ってしまいそうですが、海外のテーマの方が優秀なのは考えずともわかります。 なので、日本手製テーマと海外テーマを調べてみました。 日本 THE THOR 大人気のテーマ。圧倒的にSEOに強く、欲しい機能が詰まったテーマ。 迷っているならとりあえず選択しておけば間違いない。 海外 Genesis Framework Avada
googleアナリティクスで読み込んでる各種jsファイルについて
ga.js 第2世代のトラッキング用javascript。 analytics.js 第4世代のトラッキング用javascript。 javascriptを読み込んだ後、トラッキングコードを読み込み、送信することで計測できるようにする。 gtag/js?id=AW-YYYYYYYYY Google 広告でリマケタグを取得する。 UAは通常の計測、AWを広告計測。 conversion_async.
googleアナリティクスで読み込んでる各種jsファイルについて
analytics.js ユーザーとウェブサイトの接点を測定する JavaScript ライブラリ（第4世代） javascriptを読み込んだ後、トラッキングコードを読み込み、送信することで計測できるようにする。 gtag/js?id=AW-YYYYYYYYY Google 広告でリマケタグを取得する。 UAは通常の計測、AWを広告計測。 conversion_async.js サイトでコンバー
Googleアナリティクストラッキングコード 第1世代から第五世代までの説明
トラッキングゴードの世代 Googleアナリティクスができてから埋め込むトラッキングコードは多々変わってきました、 ページに埋め込まれているコードを確認すると、どの世代のものが利用されているかわかります。 埋め込んでいるものを間違えると、正しく計測ができないので要注意です。 第1世代：urchin.js 第2世代：ga.js 第3世代：非同期トラッキングコード 第4世代：ユニバーサルアナリティクス
Q. querySelectorAllでaddEventListenerが動かない
Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function jqueryだとfindで検索した結果に対してイベントリスナーの設定ができたが、javascriptではエラーになる。 querySelectorならできるが、やりたいのはそれではない。 jqueryでできる理由は、jquery
jQueryのバブリング preventDefault()とstopPropagation() の使い方
バブリングとは クリックイベントなどで、子要素から親要素へと伝搬されること。 これによって不要なイベントが繰り返されて、不具合が発生することがあるため、伝搬を停止したいケースがあります。 ただ、その伝搬の停止の方法で思い浮かぶものとして2つあるため、これらの違いについて説明します。 preventDefault() その要素のイベントをキャンセルする。 stopPropagation() 親要素へ
「CSS Modules」or「Scoped CSS」or「Styled Component」
BEMやMCSS、SMACSSとかはもう古い。 といっても、正直まだあまり理解指定ない。とりあえずStyled Componentが今人気ということは聞いた。 そしてどれもvueやreactで利用する。 CSS Modules vue ファイルで と記載。 装飾したい対象に :class="$style.class_name" とclass名を記載。 class="c
「CSS Modules」or「Scoped CSS」or「Styled Component」
BEMやMCSS、SMACSSとかはもう古い。 といっても、正直まだあまり理解指定ない。とりあえずStyled Componentが今人気ということは聞いた。 そしてどれもvueやreactで利用する。 CSS Modules vue ファイルで と記載。 装飾したい対象に :class="$style.class_name" とclass名を記載。 class="c
私がコーディング時によく使うツールを紹介します。 もし「こんなツールもあってよく使っているよ。」というのがあれば教えてください！ autoprefixer nodeでautoprefixerを使っていたが、node.jsを使わないケースでこれを使いたいと感じて探したらツールも提供していた。 指定したバージョンに対応したCSSを出力してくれる便利ツール。 サポートしているブラウザやOSの設定値を入れ
Homebrew インストール /usr/bin/ruby -e "$(curl -fsSL " Nodebrewインストール brew install nodebrew 環境パス echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile 無かったら作る mkd
KA法とは ユーザー調査から得られた定性データから、本質的なニーズや価値を導き出すための手法 紀文食品の浅田和実氏が食品の新商品開発のために開発したとのこと。初めて知りました。 目的 価値の全体像を把握し、関係者間で共有できる。 具体的にここから何かが生まれるというよりも、現状を把握するためのツール。 手順 1. 定性インタビューでユーザの声を集める 2. ユーザの声から出来事を書き出す 3. 出
KA法とは ユーザー調査から得られた定性データから、本質的なニーズや価値を導き出すための手法 紀文食品の浅田和実氏が食品の新商品開発のために開発したとのこと。初めて知りました。 目的 価値の全体像を把握し、関係者間で共有できる。 具体的にここから何かが生まれるというよりも、現状を把握するためのツール。 手順 1. 定性インタビューでユーザの声を集める 2. ユーザの声から出来事を書き出す 3. 出
新しくサイトを作る際に検討するものの1つ。 それは「font-family」。要はフォントに何を選ぶか。 参考に人気サービス各社のcssを調べてみました。 note 今ずともしてたブログサービスのnote。読みやすい文章を意識されているはず。 font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino
新しくサイトを作る際に検討するものの1つ。 それは「font-family」。要はフォントに何を選ぶか。 参考に人気サービス各社のcssを調べてみました。 note 今ずともしてたブログサービスのnote。読みやすい文章を意識されているはず。 font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino
とか、毎年言ってる気がする・・・ 毎回新規サイトを作成するとき、コーディングルールを考えるとき、などなどで絶対に考えるreset.css。 決定版が欲しいところ。 実際、毎年大きな差分もなく、古いブラウザの最適化がされているくらい。正直どれでも良かったりする。 色々あるけど結局どれを使えばいいかわからないので、推奨と非推奨で分けました。理由は個人的感覚。 おすすめ HTML5 Doctor Res
レポートについてまとめてみました。 リアルタイム 名前の通り、現在リアルタイムにどんなユーザーがきているか知ることができます。 地域 名前の通り、地域別のデータ トラフィック どこからどこのページにきているかを把握 コンテンツ どこのページに現在アクセスされているか イベント どのイベントアクションが実行されているか コンバージョン 目標を達成したユーザについて オーディエンス PV、UU、直帰率
業務でJavascriptの自作ライブラリを作ることって結構あります。 ES6で、webpackやBabelでbuildしてとか・・・では無いので1ファイルのjsで綺麗に作る必要があります。 なかなか書籍をみてもそこまで書かれているものは無いので、皆さんの考えを調べてみました。 自作ライブラリの作り方 JSライブラリの作成のコツが書いてあります。 オブジェクト指向、function、this、pr
毎日のように英語でスパムコメントが来る。 初めのうちはスパム扱いでフィルタ設定をしていたが、それも面倒になる。 なので、そのうち無視するようになる。 しかしやはり来るコメントは気になる。なのでプラグインで対処をすることにした。 throws spam away 日本語の無いコメントをスパッと削除。ごめんなさい英語圏の方々・・・ 将来的には別の方法を検討しますが、一旦こちらを導入します😢
毎日のように英語でスパムコメントが来る。 初めのうちはスパム扱いでフィルタ設定をしていたが、それも面倒になる。 なので、そのうち無視するようになる。 しかしやはり来るコメントは気になる。なのでプラグインで対処をすることにした。 throws spam away 日本語の無いコメントをスパッと削除。ごめんなさい英語圏の方々・・・ 将来的には別の方法を検討しますが、一旦こちらを導入します😢
個人的な見解として話します。 正しい答えを持っている人、コメントください。 ボタン データを送信するもの -> submit 別のオブジェクトを変化させるもの -> expand テキストリンク 現在のウィンドウからカーソルを移動するもの ページ遷移 ページ内リンク 曖昧 現在のウィンドウからカーソルを移動するもの その2 モーダル
個人的な見解として話します。 正しい答えを持っている人、コメントください。 ボタン データを送信するもの -> submit 別のオブジェクトを変化させるもの -> expand テキストリンク 現在のウィンドウからカーソルを移動するもの ページ遷移 ページ内リンク 曖昧 現在のウィンドウからカーソルを移動するもの その2 モーダル
新規サービス開発や、古びたシステムを担当した時に毎回調べるHTML, CSS, Javascriptのコーディングガイドライン。こちらをまとめてみました。 Javascript google jquery Airbnb Babel利用前提 node.js wordpress E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F
get_the_categoryの取得順を変更する $categoriesArgs = array( 'parent = 0', 'orderby' => 'id', 'order' => 'ASC' ); $categories = get_categories($categories
ネットの出回っているping送信リスト。実際は結構エラーが出ているのでまとめてみました（随時更新） 成功pingリスト 先に結論、問題ないping送信リストはこちら。（今時http・・・？） エラーとなるpingリスト » could not be pinged. Error message: "transport error - HTTP status code was not 200
WordPress Ping Optimizerを適応したら画面崩れ + エラーメッセージ
WordPress Ping Optimizerとは wordpressのpingは記事を更新するたびに送信し、googleからスパム扱いされる可能性があるらしい それの回避。Pingの送信は記事の公開時に一度しか行われない。 適応すると画面崩れ いざ、プラグインを適応してみると、ページ上部に予期せぬ崩れが。 コードを見てみると 「Warning: count(): Parameter must
ping送信 プラグイン WordPress Ping Optimizer wordpressのpingは記事を更新するたびに送信し、googleからスパム扱いされる可能性があるらしい それの回避。Pingの送信は記事の公開時に一度しか行われない。 良いことなのだろうか・・・ Ping送信先は使われなくなるとエラーを表示してくれる ひとまず設定すると良いping送信リスト
大規模化するCSSの問題点 Christopherは以下をあげています。 1. グローバルネームスペース -> スタイルはグローバルスコープなので、全てに影響がある。JSでグローバル変数は懸念されるのにCSSは許容されている。 2. 依存性 -> ネストすることによるスコープ。パフォーマンスや再利用性が低下する。 3. デッドコードの削除 -> どのスタイルがどのコードに影響する
Javascriptのユニットテストに必要なライブラリまとめ
オールインワン ライブラリ Jest facebook製 Node.jsで実行される スナップショットのテストができる Jasmin 少し古いイメージ ava babel、power-assertが入っている テストを並列実行でき、軽量で高速 テスティングフレームワーク テスト全体の取りまとめ。これだけではテストができなく、アサーションライブラリが必要 テスディングフレームワークで、アサーションラ
AltJS（Altnative JavaScript） TypeScriptなど、Javascriptに変換できる言語をまとめてAltJSという Javascriptとの違い クラスが作れる 型がある どういう時に使うべきか コード量が膨大 Typescript 2012年にマイクロソフトが開発したプログラミング言語 ECMAScript 2015の使用を、コンパイルすると、JavaScriptの
UIリニューアル案件で地味に悩む見出しのデザイン。集めました（途中） LIG UXMILK グノシー ALL ABOUT NEVERまとめ メルカリ マネーフォワード GYAO Kurashiru
「ブログリーダー」を活用して、jszkさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
![Chromebookの魅力を再発見！6000円で購入した ASUS Chromebook Flip C214Mで快適デジタルライフ [ 画像 動画あり ]！](https://img.blogmura.com/sites/749364/post-images/71048071.webp/crop/120x120)
