2019-01-01から1年間の記事一覧

2020年やりたいこと

サービス/ツール/キーワード いろいろありますが追っておいてマスターしておきたいものたち フロントエンド 表示速度・パフォーマンス HTML/CSS AMP PWA セマンティックなマークアップ JavaScript Vanilla JS Vue.js Nuxt.js WordPress ブロックエディタ Hea…

Webサイト高速化/最適化のためにやったこと

概要 最近作っていたWebサイト( https://atelier24b.com/ )で、Chorme の Audits 使ってパフォーマンス計測しながらやってみたのでその結果 サイトの作り的には WordPress カスタム投稿で一覧/詳細ページ 固定ページあり webpack使って html/css/js コンパ…

2019年 / 2020年

ちょっと早いですが今年の振り返りと来年へ向けてのことを考えました。 2019年 インプット 技術の知識に関しては普段の業務や読書、RSS経由でWebメディアを見ながらという感じ。 基本はフロントエンド(HTML/CSS/JavaScript/Vue.js)、デザイン(UI/UX/Webギ…

【読書メモ】AWSクラウドの基本と仕組み

ソリューションアーキテクトの試験を7月に不合格になってからAWS関連の勉強してこなかったのですが、もう一度受けてもいいかなと思いつつ、よさそうな本がでていたのでリハビリも兼ねて読んでみました。 AWSクラウドの基本と仕組み作者:亀田 治伸,山田 裕進…

copy-webpack-plugin でファイルを別階層にコピーする

copy-webpack-plugin の設定でちょっとはまったのでメモ webpack-contrib/copy-webpack-plugin: Copy files and directories with webpack やりたいこと src/ 以下の特定階層ファイル( src/library/*.js )を app/ 以下の階層にコピーしたい webpack.config…

2019年後期のWebサイト

2019年後期のWebサイト 2019年後期で気になったWebサイトをまとめておきます。 前期 同様、デザイン/実装ともに好みのものです。 「IDOLY PRIDE」ティザーサイト だいたい画像文字なのですが、このくらい生かしてるサイトもなかなか見なくなってきた https:…

今年読んだ本

フロントエンド Webフロントエンド ハイパフォーマンス チューニング 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで JavaScript コードレシピ集 リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (T…

Vue.js・Nuxt.js を使用したサイトまとめ

Vue.js or Nuxt.js を使ったサイト、日本のまとめあまりないのでまとめておきます。 デザインギャラリーサイト経由で見つけた多いのでWebアプリではなくサイトが多め。 採用サイトで結構使われているのは技術採用しやすいからかなと思いました。 Webアプリも…

WordPress に Vue.js を スモールスタートで入れてみる その7

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その7 最後は細かいテクニック的なところについて ローディング API から投稿データ取得するまでローディング、取得後に解除する DOM更新後にローディング解除したいので $nextTick…

WordPress に Vue.js を スモールスタートで入れてみる その6

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その6 今回はPhotoSwipeのvueモジュールについて v-photoswipe バニラJSのフォトギャラリープラグイン PhotoSwipe スワイプなど、スマホの各アクションにも対応しているのでlightbo…

WordPress に Vue.js を スモールスタートで入れてみる その5

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その5 今回はモジュールについて Isotope レンガ式のレイアウトをするためにnpmモジュールがいろいろあります。 vue-masonry を最初使ってましたが、実行タイミングが早かったり、v…

WordPress に Vue.js を スモールスタートで入れてみる その4

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その4 今回は記事ページでの情報取得について 詳細ページで記事情報のAPIにアクセス テンプレートファイル側(.php)で投稿IDを取得して変数 POST_ID に格納しておく SAMPLE-POSTTY…

WordPress に Vue.js を スモールスタートで入れてみる その3

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その3 今回はACFオプションページのリピーターフィールドについて ACF オプションページ リピーターフィールドの取得・出力 カスタムフィールドは、 sample_field(繰り返しフィー…

WordPress に Vue.js を スモールスタートで入れてみる その2

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その2 基本構造 WordPress の各テンプレートファイルからVue.jsを呼び込む トップページの場合、 homeGallery.vue には Vue ( <template> と <script> ) を書いていく感じ。 ▼ app.js import Vue from</template>…

WordPress に Vue.js を スモールスタートで入れてみる その1

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことをまとめようと思ったのですが、年内公開も怪しくなってきたので今の段階でメモしておこうとおもいます。 概要 WordPress を使った既存サイトがあり、リニューアル版は WordPress を残しつ…

【読書メモ】インタフェースデザインのお約束 ―優れたUXを実現するための101のルール

インタフェースデザインのお約束 ―優れたUXを実現するための101のルール作者: Will Grant,武舎広幸,武舎るみ出版社/メーカー: オライリージャパン発売日: 2019/11/09メディア: 単行本(ソフトカバー)この商品を含むブログを見る 本屋に寄って見つけた イン…

2019年11月 振り返り

結果 ブログ 目標:月 12 回(週 3 回)更新 結果:月 5 回 更新 読書 目標:月 1 冊 結果:月 1 冊 反省点など 11月中に読んだUI GRAPHICSと、次のを読んでいるので読書週間は少しずつ回復 ブログを書くネタがないわけではないですが、日頃からネタ帳作って…

Shifter をさわってみた

WordPress の静的ホスティングサービス Shifter を検証で触ったのでメモしておきます。 今回採用には至らず、無料プランで試した範囲の内容です。 概要 WordPress の静的ホスティングサービスってなんだろと思ってましたがざっくり Shifter の特長として認識…

【読書メモ】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX

【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX作者: 安藤剛,水野勝仁,萩原俊矢,ドミニク・チェン,菅俊一,鹿野護,有馬トモユキ,渡邊恵太,須齋佑紀/津?将氏,庄野祐輔,藤田夏海,塚田有那,増川草介??栂木一徳出版社/メー…

Docker で WordPress ローカル環境構築

だいぶ前に作られた環境を触った経験はある気がしますが、Dockerを入れると環境構築が楽だということでやってみました。 まだまだ理解ができていない細かいことありますが、結構便利だなと 複数人でも同じローカル環境つくれるのいいですね。 インストール D…

EJSで使う構文まとめ

会社でGulpでEJS触わる機会が多いので、よく使う構文をまとめておこうと思います。 基本 .html <% var ejsRoot = './'; %> <%- include(ejsRoot + '_module/ejsFileName'); %> .ejs パラメータ指定 ボタンのコンポーネントをejs化するサンプル .html <%- in…

2019年10月 振り返り

結果 ブログ 目標:月 12 回(週 3 回)更新 結果:月 6 回 更新 読書 目標:月 1 冊 結果:月 0 冊 反省点など 本も特に興味を持てるものがなかったのですが、習慣づけなきゃですね 来月に向けて 結局Nuxtでやろうと思ってたものはVueオンリーでやることに…

カスタム投稿 REST APIで取得するJSONを並び替えプラグイン通りにする

https://siteUrl.com/wp-json/wp/v2/POST-TYPE-NAME/ のREST APIを叩くと順番がデフォルト(投稿日順?)になってしまうので、これを並び替えプラグイン通りに並べ替えたい。 ぴったしの記事がありました Intuitive Custom Post Orderの並び順をWP-REST-API…

ACF オプションページのREST APIエンドポイント

ACFオプションページのエンドポイントがうまくいかなかったのでメモ 公式ドキュメント: https://github.com/airesvsg/acf-to-rest-api 同じようなissue: https://github.com/airesvsg/acf-to-rest-api/issues/184 登録はfunctions.phpに通常通り記述 '…

node.js の切り替えを nodebrew ではなく nodenv で行う

nodebrew はプロジェクトごとに切り替えがしづらいので、 nodenv のがいいらしい。 導入は こちら 通りでいけました リスト表示 $ nodenv versions バージョン指定でインストール $ nodenv install 10.15.0 $ nodenv install 12.11.0 デフォルトで使用するバ…

REST API のスキーマにリピーターフィールドの画像データを格納する

ACF to REST API を使えば REST API でACFの値が取得できますが、カスタマイズした形でカスタムフィールドの値を追加する方法です。 例えばACFフィールドでアップロードした画像は指定している戻り値がREST APIでも返ってきます。 image_field: リピーターの…

WordPress + Nuxt.js で スラッグベースのパーマリンクにルーティングする

ルーティングする という表現があっているのかどうか微妙ですが、 カスタム投稿タイプを使ったWordPressの投稿をIDベースではなくスラッグベースで実装する場合 カスタム投稿: book .vue ファイル名: /pages/book/_slug.vue 実現したいURL構造: https://hoge…

🍺 nodebrew 🍺

インストールされている Node.js のバージョン確認 $ nodebrew list v10.15.0 v11.6.0 v12.11.0 current: v12.11.0 安定版のインストール nodebrew install-binary stable バージョン指定でインストール nodebrew install-binary v10.16.3 使用するバージョ…

2019年9月 振り返り

結果 ブログ 目標:月 12 回(週 3 回)更新 結果:月 4 回 更新 読書 目標:月 1 冊 結果:月 2 冊 反省点など スクラム開発を知りたい欲が高まって関連本読んだが、技術的に進歩はほぼなし 来月に向けて Nuxt 触ってサイト完成までもっていく。実績として1…

【読書メモ】カイゼン・ジャーニー

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで作者: 市谷聡啓,新井剛出版社/メーカー: 翔泳社発売日: 2018/02/07メディア: 単行本(ソフトカバー)この商品を含むブログ (2件) を見る カイゼン・ジャーニー を読みました。 …