WordPress 4.9.6がリリースされました。

WordPressの4.9.6がリリースされました。
ちょっと、いつものマイナーアップデートとは違うようです。

プライバシーポリシーのページを作成しましょう

このプライバシーおよびメンテナンスリリースには、37の拡張機能、51のバグ修正、2つのタスクが含まれています。(中略)欧州連合の一般データ保護規制(GDPR)に関連する変更には、コメント、プライバシーポリシーページ、およびデータ処理が含まれます。

https://codex.wordpress.org/Version_4.9.6


ということで、話題のGDPRに対応したので、プライバシーポリシーページの作成を促すようになっています。

このブログにも(当然のように!)無かったので、試しに作成してみました。

“WordPress 4.9.6がリリースされました。” の続きを読む

フロントエンドエンジニアといふこと

こんにちは、みみです。色んな名前で出ています。

今日は私の肩書き、フロントエンドエンジニアについて書いておこうと思います。

私のWeb制作との出会いは大学の研究室のホームページ作りを任されたところから始まります。CMSなんて無い、テキストエディタに手打ちの頃。すっかり魅了されて研究そっちのけでどハマりしました。

その後、Movable Typeに感動してCSSを覚え始め、XOOPS(懐かし!)やWordPressに手を出してPHPを覚えて自作CMSを作ってみたりしながら、仕事として関わるようになりました。JavaScriptをいつから弄りだしたかはよく覚えていません。結構最初の頃からよく分からないまま触れてはいたと思います。絵も好きだったので、イラストレーターやDTP的なお仕事もしました。

そうして、主に(デザインデータを受け取ってデプロイまで持ってく作業全般を請負うというざっくりとした意味の)コーダーとして、たまにデザイナーとしても働いていた小さなウェブ制作会社を辞めて子どもを産んだりしていた5年ぐらいのブランクを経て本格復帰したら、いつのまにか私が主としている仕事の領域に新しい名前が付いていました。

フロントエンドエンジニア、です。

あ、私エンジニアだったのか、と最初はちょっとびっくりしたのですが、私の職業は何か、と問われれば、フロントエンドエンジ二ア、というべきなんだろうなあと。

“フロントエンドエンジニアといふこと” の続きを読む

Gutenberg Meetup vol.2に参加してきた

Gutenberg Meetup vol.2 – connpass

に参加してきました!赤坂とか何年ぶりでしょうか。

そもそも、Gutenbergとは

えー、ここで言うGutenbergとは活版印刷技術の発明者ではなくて、WordPressに近々導入されるテキストエディタのプロジェクトの名前です。絶賛開発中。

現在はプラグインの形でリリースされていますが、WordPress5.0で公式エディタとして統合される予定になっているそうです。

一般向けの公式の紹介ページ的なのは多分ココ
The new Gutenberg editing experience – WordPress – A new editing experience for WordPress is in the works, code name Gutenberg. Read more about it and test it!
開発者向けなページは多分ココ
Introduction – The new Gutenberg editing experience – WordPress

えー、今この記事自体を頑張ってGutenbergで書いているのですが、6日前にアップデートが出ていました、今気がついた・・・(!)。リリースノートを見ると30個以上の変更点があるみたいです。アップデートしたら大分と改善されてたYO!もうほんと只今絶賛全力シャカリキに開発中です。

Githubのページはここ。多分、ココ見たほうが早いと思います。
WordPress/gutenberg: Printing since 1440. Development hub for the editor focus in core. Beta plugin is available from the official WordPress repository.

あ・・・!もしかしてショートコードの改行が効かない問題、解決したんじゃ・・・?!

TEST TEST 

あ、やっぱりそれはまだ駄目ぽいですね・・・。でも大分と期待される動きに近づいて来ています。凄いな・・・。

という訳で、いずれ来るGutenbergの荒波を共に乗り越えよう

というタカイココロザシを持った方々が集まった今日のMeetup、とても楽しかったです。参加者が10人ぐらい?で、言いたいことも聞きたいこともバシバシ発言できる丁度良い規模だったかも。

“Gutenberg Meetup vol.2に参加してきた” の続きを読む

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で作ってみるを前提にしています。