Vue.js / JSON から情報を引っ張ってくる その7

やること 前回のファイルを引き継いで Vue Router を使用して新しいページ( /about/ )を作成する。 ページごとにファイルを分ける /src/router/index.js import Vue from 'vue' import Router from 'vue-router' import top from '@/components/top' impor…

Vue.js / JSON から情報を引っ張ってくる その6

やること ポートフォリオページ のコンテンツのエンドポイントを WP REST API を用いて作成 カテゴリー絞り込みを実装する WordPress側(functions.php)でのAPIへのフィールド追加 display という自前のデータを v-show: を使って判定させるため下記をfunct…

Vue.js / JSON から情報を引っ張ってくる その5

やること ポートフォリオページ のコンテンツのエンドポイントを WP REST API を用いて作成 記事タイトルやサムネイル、ACF で登録している値を Vue.js で描画 画面読み込み時に methods のfunctionをレンダリングする ... created: function(){ this.reques…

【読書メモ】学びを結果に変えるアウトプット大全

今年はブログ書いたりアウトプットを習慣にしようと思っていたので、Amazon で評価の良かったこの本を読みました。 学びを結果に変えるアウトプット大全 (Sanctuary books)作者: 樺沢紫苑出版社/メーカー: サンクチュアリ出版発売日: 2018/08/03メディア: 単…

Vue.js / JSON から情報を引っ張ってくる その4

やること 前回の続き WordPress の記事一覧を WP REST API を用いてエンドポイントを作成 Vue.js で、カテゴリー一覧、記事タイトルの一覧を表示させる Vue.js で、カテゴリーごとの投稿一覧を表示する GitHub App.vue <template> <div id="app"> <header> <h1>blog.yuheijotaki.com</h1> <nav> <ul class="category_list"> <li v-for="cat in categories" :key="cat.name.rendered"> </li></ul></nav></header></div></template>

Vue.js / JSON から情報を引っ張ってくる その3

やること WordPress の記事一覧を WP REST API を用いてエンドポイントを作成 Vue.js で、カテゴリー一覧、記事タイトルの一覧を表示させる Vue.js で、カテゴリーごとの投稿一覧を表示する セットアップ 前回と同じ Vue.js 側の処理 クリックした <a> 要素の d</a>…

AMPでアニメーション `amp-fx-collection`

AMP

AMP サイトでアニメーションを実装する機会がありましたが、amp-animation だったり、amp-fx-collection や amp-story というコンポーネントまであり、こんがらがったのでまとめをしておきます。 amp-animation とは Web Animations APIに依存した、JSON で…

Sass の `map-get`

CSS

例えば、 <div class="object object_01"><amp-img src=""></amp-img></div> <div class="object object_02"><amp-img src=""></amp-img></div> <div class="object object_03"><amp-img src=""></amp-img></div> <div class="object object_04"><amp-img src=""></amp-img></div> <div class="object object_05"></div>

Vue.js / JSON から情報を引っ張ってくる その2

やること WordPress の記事一覧を WP REST API を用いてエンドポイントを作成 Vue.js で記事タイトルの一覧を表示させる セットアップ Vue CLI を使用。前回と同じ工程。 エンドポイント こちらも前回と同様に WordPress の wp-json を使用します。 REST API…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その6

7 Vuex によるデータフローの設計・状態管理 もスキップ。ざっくり読みましたが、データをどう持たせて処理するのが良いのかの参考になりました。 8 中規模・大規模向けのアプリケーション開発 ① 開発環境のセットアップ ② 設計 ③ 実装 を実際に手を動かさず…

WordPress 詰まったこと、使ったこと その1

最近 WordPress で詰まったこと、使ったことをメモしておきます。 page.php で pre_get_posts のクエリ書き換えがうまくいかない 固定ページである投稿タイプの一覧出して、ページ送りも実装して、としたかったのですが、仕様的に難しそう。 pre_get_posts …

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その5

5.3 カスタムディレクティブ 5.4 描画関数 5.5 ミックスイン はスキップ。もう少し基礎的な部分を理解したらもう一度読み直そうと思います。。 6 単一コンポーネントによる開発 6.2 単一コンポーネントとは Vue.js では、上記のような単一ファイルコンポーネ…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その4

5 Vue.js の高度な機能 5.1 トランジションアニメーション 5.1.1 transition ラッパーコンポーネント transition コンポーネントは、自身が囲んでいるコンポーネントあるいは要素が出入り(enter/leave)する際にトランジションを追加します。出入りは、以下…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その3

4 Vue Router を活用したアプリケーション開発 4.2 ルーティングの基礎 4.2.2 ルーティング設計 ルート と ルーターコンストラクタ を用います。 <div id="app"> <router-link to="/top">トップページ</router-link> <router-link to="/users">ユーザー一覧ページ</router-link> <router-view></router-view> </div> <script src="https://unpkg.com/vue@2.5.17"></script>

2019年1月 振り返り

毎月のまとめとして月次の振り返りをしようと思います。 結果 ブログ 目標:月 12 回(週 3 回)更新 結果:月 22 回 更新 読書 目標:月 1 冊 結果:月 2 冊 反省点など Vue.js は本を何冊かやっているが、実際の案件で用いるところまでは踏み込めてない印…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その2

3 コンポーネントの基礎 3.2 Vue コンポーネントの定義 3.2.1 グローバルコンポーネントの定義 <div id="app"> <fruits-list-title></fruits-list-title> <fruits-list-description></fruits-list-description> <fruits-list-table></fruits-list-table> <fruits-list></fruits-list> </div> // グローバルコンポーネント Vue.component("fruits-list…

AMP amp-position-observer と amp-animation

AMP

AMP の amp-position-observer と amp-animationを使って、スクロール量に応じてナビゲーションの現在地のスタイルを変更するというのをやってみる。 結果 See the Pen AMP amp-position-observer & amp-animation by jotaki (@yuheijotaki) on CodePen. つ…

AMP 雑感

AMP

AMP を少し触ってみたので所感をメモしておきます。 おおまかな制約 HTML 基本的に HTML のタグ要素は使える。 使えるタグは AMP HTML Tag Addendum に記載。 <img> 要素は <amp-img> で対応する。width, height 属性は必須。 CSS CSS はインラインで記述。 基本的なプロパ</amp-img>…

Atom をマークダウンエディタとして使う

VS Code の MarkdownPreview が、開いていた右ペインのファイルを閉じてしまったり、相変わらず日本語変換が入力している文字に重なって使いづらいので.md ファイルだけ Atom で編集できるように設定しました。 主に Atom を Markdown エディタとして整備 - …

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その1

Vue.js入門 を読んでいます。 ネコ本、イヌ本を読んだので実践編と勝手に意気込んでいましたが、どうやら逆で概要や考え方的な内容からの記載が多く、より深く学べそうな気がします。 Vue.js入門 基礎から実践アプリケーション開発まで作者: 川口和也,喜多啓…

Gulp で `Task 'default' is not in your gulpfile` のエラー

はっきりとした原因はわからないのですが、$ npm i で各モジュールインストールし直しても Task 'default' is not in your gulpfile のようなエラーがでてしまう。 gulpfile.jsファイルをいじるしか解消方法はなさそう。 gulpfile.jsの書き方確認。 - Qiita …

Vue.js / JSON から情報を引っ張ってくる その1

Vue CLI を使って JSON から情報を引っ張る。 とりあえず WordPress の /wp-json/ から。 Vue CLI の導入 こちらとだいたい同じですが、SassとリセットCSSとaxiosを追加。 Sass scssを有効化 npm install sass-loader node-sass --save-dev VueCLIでHelloWor…

homebrew / node.js / nodebrew / npm とは

ググってコマンド打つものの、あまり意味が分かっていなかったのでおさらいします。 homebrew とは? 「Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである」 Homebrew (パッケージ管理システム) - W…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その11

Chapter13 JSON データを表示させてみよう 01 JSON ファイルの読み込み方 JSON を読み込む <div id="app"> <input type="file" v-on:change="onFileChange" /> <p>読み込みデータ:<br />{{ loadData }}</p> </div> new Vue({ el: "#app", data: { loadData: "" }, methods: { onFileChange: function(e) { file = e.target.files[0]; if (…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その10

Chapter12 部品にまとめるとき 01 部品にまとめる:コンポーネント 部品にまとめるときは、component ある部品が HTML 上で「どのように表示されるのか」をオブジェクトとしてまとめるには、template オプションを使います。そして、そのオブジェクトに名前…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その9

Chapter11 ToDoリストを作ってみよう <div id="app"> <div v-for="todo in todos"> <label> <input type="checkbox" v-model="todo.done"> <span v-bind:class="{donestyle:todo.done}">{{ todo.text }}</span> </label> </div> </div>

【学習メモ】動かして学ぶ!Vue.js 開発入門 その8

Chapter10 アニメーションするとき 01 表示/非表示時にアニメーションする:transition 表示/非表示時にアニメーションするときは、transition CSSスタイル 要素が現れるとき .v-enter:現れる前の状態 .v-enter-active:現れている最中 .v-enter-to:現れ…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その7

Chapter9 Markdownエディタを作ってみよう 02 Markdownエディタを作る <div id="app"> <textarea v-model="input"></textarea> <div v-html="convertMarkdown"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script> new Vue({ el: "#app", data: { input: '' }, computed: { // inputが変…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その6

Chapter8 データの変化を監視するとき 01 データを使って別の計算をする:算出プロパティ マスタッシュタグの中に「JavaScriptの式」を書くのではなく「何を表示するのか」を書くほうがわかりやすくなります。それを「名前」で表したものが「computedオプシ…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その5

Chapter7 Google Charts と連動させてみよう 02 Google Chartsと連動させる <div id="chart_div" style="height: 500px;"></div> <div id="app"> <ul> <li v-for="(item,c) in dataArray" v-if="c>0">{{ item[0] }}:{{ item[1] }} <button v-on:click="addOne(c)">1票足す</button> </li> </ul> </div> v-if="c>0"はデータを2つ目以降からの表示にするため(['種類',…