vue.jsとAxiosを使ってWP REST APIからタグを取得してみる

REST APIと私とvueと、みたいなのが流行っているらしいとは聞いていましたが、静的コンテンツまで生成出来るとか聞いて、ガタっとなりました。それ私がやりたいやつじゃん、と。GW最終日のネタに決定。

でもまあ、先ずはvueもREST APIも全然分からんので、取り敢えずWordPressからデータを取得するアレコレを触ってみたのでメモしておきます。

要るもの

  • vue.js — Javascriptのフレームワーク。たぶん。簡単簡単って書いてあるけど、まだ全然仲良くなれない。最近人気らしい。
  • axios.js — ブラウザとNode.jsのためのHTTPクライアント。かしこい。
  • wordpress — ディファクトスタンダードなCMS。腐れ縁。4.7から勝手にREST APIを出すようになってます。肥大化したCMSの起死回生なるか。

・・・これしか要らない、という意味では超簡単かも。コマンドラインも基本必要ない。

“vue.jsとAxiosを使ってWP REST APIからタグを取得してみる” の続きを読む

【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう

JavaScriptが時の人になって暫く経ちましたが、まだまだ喧々諤々やっているよう(に見える)ので、なるべく近づかないで済ませる方法を模索しています。
その方が軽いはずだしゆーざーふれんどりーだと思っています。(JS自体は好きです。いつもお世話になっております。ハンバーガーメニューがゆーざーふれんどりーかどうかとか難しい話は振らないでください。)

この数年、Sassを導入して、命名規則を変えてから、とうとう、ようやく、ねんがんの、CSSのモジュール化が出来るようになってきたので、ちまちま書き溜めて行こうかと思っています。
ヒトサマに使ってもらえるようなソースでは全然無いのですが、人目に晒してブラッシュアップしていくのが良いかなと思うので。

今日は良くあるハンバーガーメニューをCSSだけで作るというのを書いておこうと思います。
方法は色々とあって、たくさんソースも落ちていますが、アテクシ流の書き方をメモしておきたいと思います。
(タイトルのライブラリ化とは別になんかnpmとかで呼び出せるとかそんなんじゃなくて、コピペで済むぐらいのフワッとした意味なので怒らないでください。)

大体の仕組みとしてはcheckboxでオンオフの判別をして、transformtransitionでアニメーションを作ります。
~(チルダ)で要素を紐付けられるようにするのが肝
iOSでは動作確認済み。Chrome系も大丈夫なはず。

CSSと言っていますが、SASSで書いています。
PostCSSとかnextcssとか試したいけれどまだ手を出せていません。

あと命名規則は最近SMACSSとBEMをベースに、

prefix-block__element–modifier(ex. l-global__header)

みたいな書き方するようにしてて気持ち悪かったらごめんなさい。
m-はモジュール、l-はレイアウトです。

で、もいっこのポイントとしては、ハンバーガーメニューではほぼ無いと思うんですが、後々やっぱりJS使うかーとかにもなりがちなので、動きの部分を別に書くようにしています。これオススメ。

“【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう” の続きを読む

インラインSVGを出してくれるショートコード

SVGをインライン化出来たので、記事内とかでも使いやすいようにショートコード化してみました。

ひねりも何もありませんが、これでlogo.svgていうファイル名なら、

[svg]logo[/svg]

と書くと出力してくれます。

phpの中なら

echo do_shortcode( '[svg]logo[/svg]' );

で。

適切なwidthとheightをCSSで指定するのを忘れずに。

※ 記事内でSVGを使うケースがあるのか?という人には必要ないコードです。
SVGスプライトをnpm-scriptsで作ってみるを前提にしています。

【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた

GWに私は何をしているのでしょうか。

前回に引き続き、SVGについて。

前回のやり方ではCSSに読み込むスプライト画像が出来ないのでどうしようかなあと調べていたら、またまた良いものを発見しました。

TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

postcss-inline-svg というライブラリです。

CSSそのものにSVGをインライン化するのを自動化してくれるライブラリ。神発見したと思った。って言っても、css inline svg npm で検索すれば直ぐ出てくるんだけども。

問題はPostCSSで作られているということです。Sassに慣れきってるのでPostCSS環境に合わせるの面倒・・・と思ったけれど、そこはnpm-scriptsの良いところ。これまでも、node-sassでcssに変換した後にautoprefixerを通していたので、さらにpostcss-inline-svg すれば良いだけでは・・・!?

と思って、package.jsonに

"svginline": "npx postcss *.css --use postcss-inline-svg -d ../ --no-map",

としたら出来ちゃった。IE11でも動作しちゃった、のでご報告したいと思います。npm-scriptsを使ってる前提です。

“【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた” の続きを読む

SVGスプライトをnpm-scriptsで作ってみる

GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。

ターゲットはSVG。

ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。

結果、凄い分かりやすいページを発見!これをいわゆるSVGスプライトと言っていいかは謎ですが。

Workflow for creating SVG sprites with NPM scripts – Oleg Varaksin – Medium

で、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。 “SVGスプライトをnpm-scriptsで作ってみる” の続きを読む