キチキチ

19卒の新卒総合職 副業でWebサイトを作ってます JAMstackを作った時の諸々…

キチキチ

19卒の新卒総合職 副業でWebサイトを作ってます JAMstackを作った時の諸々（コツやらなんやら）を書いていきます

Nuxtでamp-imgのsrcを動的に変更する

エンジニア向けの記事です。めちゃくちゃニッチな内容です。amp-imgをlayoutsで使った時に画像が切り替わらないのを直すという内容です。 対象の事象layoutsでamp-imgを使ってるけど、ページ遷移しても画像が切り替わらない 結論画像のkeyにランダムな値を挿入して強制的に再描写させます。 ※pageはpagesからアップするstateです。titleとかを上げる想定です。 layouts/任意のファイル.vue <template> <div>

キチキチ

    • Nuxt(node.js)でsanitize-htmlの許可タグ・属性をいじる方法

      エンジニア向けの記事です。サニタイズをしたいけど、タグや属性は色々指定できるようにしたいという人向けの記事です。 結論pluginsを作りましょう。そこで許可属性を記述しましょう。 まずはパッケージの読み込みから。yarn add sanitize-htmlで読み込めます(npmだったらnpm install)。 /nuxt.config.js ここでpluginを呼び出します export default { mode: 'universal', ... plugi

      キチキチ

      • Nuxtでメタデータをいい感じに一元管理する方法forAMP

        エンジニア向けの記事です。Nuxt.jsでメタデータを一元管理して保守性を上げるための内容です。 結論mixin使って呼び出すコードをまとめます。 基本参考サイトまんまの処理で、AMP用に必要なものをちょっと書き加えています。 注意・AMP HTMLを作るためのコードです。AMPいらないぞって人は素直に参考ページの方を見ておきましょう。 ・単一ファイルコンポーネントを使ってます。「よく見る記事と記述方法違くね？」と思っても諦めましょう。 コードnuxt.config.j

        キチキチ

        • おいおいlocalhostでNuxtがread ECONNRESET吐きまくるぞって時に気にすること

          「やたら訳わかんないエラー吐きまくるぞい」ってエンジニアよ、この記事を読むのです。 結論、使ってるWordPress（API）が国外IPのアクセス制限かけてるのにAvastのセキュアラインVPNやらのIP隠す系のサービス使ってると起きることがあります（自分はその例でした）。心当たりのない人はそっ閉じでお願いします。 エラー内容・connect ETIMEDOUT ・read ECONNRESET こんなのが出てきた時は、↓をしてみてください 対処・ネット繋がってる？ →

          キチキチ

        Nuxtでamp-imgのsrcを動的に変更する

        キチキチ

          Nuxt.jsでh1（ページタイトル）をlayoutsレンダリングする方法

          エンジニア向けの記事です。Nuxt.jsでヘッダーやらに入れる文字をページごとに変えたいけど、記述はlayoutsに纏めたいという方向けの記事です。 できること記事タイトルやら、記事のサムネイルやらをlayoutsで表示することができます 前提・単一ファイルコンポーネント使ってる ・ブログの記事タイトルとかパンクズとかをlayoutsでレンダリングする ・vuex利用 結論pagesでlayoutsに表示したいものをstoreに上げて、layoutsでstoreを読み込

          キチキチ

          Nuxt.jsでh1（ページタイトル）をlayoutsレンダリングする方法

          キチキチ

          Nuxt.jsでAMP HTMLをgenerateする方法

          エンジニア向けの記事です。それも、Nuxt.jsでgenerate（出力）するファイルをAMPにしたい！というエンジニア向けです。 前提・特にamp用のmodulesとかは使いません。色んなところに落ちてるコードを引っ張って作った感じです。 ・単一ファイルコンポーネントで作ってます。なのでCSSは「ページ用スタイル」「共通スタイル」みたいな感じで分かれてます。 ・SCSS使ってます。共通スタイルはコンパイル後にstyleタグに突っ込みます。 コードとにかくAMP化に必要な

          キチキチ

          Nuxt.jsでAMP HTMLをgenerateする方法

          キチキチ

          最強のメディア専用CDN cloudinary、その凄さと使い方をひたすら伝える回

          最強のメディア用CDN,Cloudinary！その凄さをお伝えするぜ！ あまりに凄すぎてちびるなよぉ！？という記事だぜ！ WEBサイトの作成者・運用者向けに書いていますだぜ！ 画像が重くてサイトが遅いなぁというそこのあなた！cloudinaryを使うのです！ 何が言いたいのかCloudinaryすごい！Cloudinary使って！！！と言いたいです。 画像と動画の配信はもうこれだけ使ってればいいよ、が結論です。 CloudinaryとはCloudinaryは、カリフォルニ

          キチキチ

          最強のメディア専用CDN cloudinary、その凄さと使い方をひたすら伝える回

          キチキチ

          売上を上げるためにできるWEBサイト表示速度改善

          営利目的でサイトを運用していると、必ずCVRの関門に突き当たります。 上げる方法は色々とWEBに散らばっていますが、案外サイト速度は軽視されがち＆結局何すればいいの？が分かりません。 今回は、「サイト速度の重要性」「サイト速度向上の方法」の2点について書きます。 対象者は ・WordPressなどの自由度が高いCMSでサイトを運用している方 ・スクラッチでサイトを作成・運用されている方 です。 結論「前置きはいいから結局どうすればいいのか教えてよ！」と言う方のために、サイト

          キチキチ

          売上を上げるためにできるWEBサイト表示速度改善

          キチキチ

          全ページAMP HTML対応させた感想文〜結局AMPってどうなのさ〜

          AMPってすごいよね！AMPっていいよね！ってよく聞くけど、実際どうなの？を試した人柱がここにいます。 さあ、人柱の声を聞くのです！そしてあなたのAMP導入検討の糧にするのです！ 結論最近仕事できる人ムーブをするのにハマっているので、先に結論から書きます。 ・AMPすごい！どのくらいすごいかっていうと、めちゃくちゃすごい！ ・これからスクラッチでサイト作るって人はコンポーネント含め入れるべし ・中途半端に組み込もうとするとコスパ悪いんでやめた方がいい ・そうでもない（速度

          キチキチ

          全ページAMP HTML対応させた感想文〜結局AMPってどうなのさ〜

          キチキチ

          投げ銭専用コンテンツ

          まさかのまさかの、投げ銭をするためだけのコンテンツ！ 投げる前にも後にも何もない、ただ投げて終わるためだけのコンテンツ、もはやコンテンツですらないコンテンツ！ さあ、そこの君！ゼニを投げるのだ！ ※リターンとか本当に何もないです。返金もできないです。コーヒーいっぱい奢ってやってもいいかなぁ〜って人だけコーヒーをお投げください！

          300
          キチキチ

          投げ銭専用コンテンツ

          キチキチ

          新卒1年目総合職がAMP×Nuxt×WordPressのJAMStackっぽいものを作った話

          これってなんのnote？新卒総合職なのにJAMstackっぽいもの一人で作っちゃったよ！ すごいでしょ！褒めて！！！っていうnoteです。 嘘です。後半が10%ほど嘘です。 ※本作は原作者（自分）の意思を尊重し、書いたときの文字ほぼそのままを掲載しています。推敲やら語尾調整やらは何もしてないので、表記がバラバラです。お気をつけて！ タイトルにあるような諸々を使ってフロントを構築する人が、自分と同じところに引っかかる時のために少しでも道標を残しておこうかな〜と考えこのアカ

          キチキチ

          新卒1年目総合職がAMP×Nuxt×WordPressのJAMStackっぽいものを作った話

          キチキチ