iOS の text-align: justify のバグ

font-family-apple-systemを指定して、text-align:justify な要素に、before疑似要素を inline-block で追加すると、iOSだけで先頭の特定の?文字で文字化けが起こるバグに遭遇したのでメモ。

デモ

単純に複数行だと起こるのか?とかアルファベットで起こるかどうかとかの細かい検証はやっていませんが再現できちゃったので書いておきます。

こんな感じに表示されます。

んーと、つまりは text-align:justify は極力使わない方がいい、ということかな。

簡易スタイルガイド(パターンライブラリ)を作ろう

こんにちは、みみです。

今日は先日の WordBench 三鷹の LT でお話した簡易スタイルガイド(パターンライブラリ)の作り方というか、テンプレをご紹介します。

スタイルガイドって今、色々ツールがでてるんですけれど、よっぽど大規模な案件で無い限り(あとそういう大規模な案件をあんまり WordPress だけで作らない方が良いし)そんなの導入しなくても WordPress で固定ページか投稿ページを非公開で作って開発しながらメモっていくのがローコストでハイリターンなやり方だと思います(※ 個人の感想です)。

CSSに大体慣れてきた人向けのアドバイスとしてご紹介したのですが、スライドだけだと現物が無いのでアレだなーと思って(LTでは実例をお見せしました)。

でも、パッとお見せ出来るものも無いんですよ、基本納品物だし非公開だから。なのでこのサイトで適当に作りました。色も嘘っぱちですしボタンとか無いしSVGも使ってないし、カスタムしているところがほぼないので、例としていまいちなのですけれど。

こんな感じのものです。

という凄い単純なものですが、すぐ導入できて、開発時の簡易テストにもなるし、クライアントさんに納品する時に簡易ドキュメントになるし、HTML分かる人だったら自分で活用して貰えるし、何より数カ月後とか数年後(!)とかに再開発になった時に楽ちんです。

これは別に玄人さん向けだけの話じゃなくて、個人ブログでコツコツとカスタムスタイルを積み上げて行っている方とか、テーマをちょこっとだけ弄ってる人にも便利だと思うのです。

何故なら、

人はコードを忘れるから。

… イイコトっぽく書いてみたけど、情けない事実であります。

でも良いの。外部記憶装置に任せるのが一番だよ!

“簡易スタイルガイド(パターンライブラリ)を作ろう” の続きを読む

人生初のLTハシゴ – WordBench 東京編

ゆるりとした三鷹編から電車移動で東京編@渋谷 GMO へ。(GMO の名前から連想して、電車の中で前の会社での大顧客だった某企業名を思い出せなくて唸ってたのは内緒。)

WordBench東京 6月勉強会 LT 大会 @ 渋谷 GMO Yours – WordBench東京 | Doorkeeper

に参加してきました。

ドーンと大きなビル。入館パス。警備員さん。まじか。同じWordBenchの会場とは思えないぜ…。

“人生初のLTハシゴ – WordBench 東京編” の続きを読む

2回目のWordBench三鷹にて – 人生初のLTハシゴ

2回目のWordBench三鷹で、LTをしてきました。

今回はほぼスタートから参加出来たので、主催の岡部さんの軽妙なトークを楽しめました。自分がLTやったから余計に、岡部さんのトーク術凄いなと改めて思いました。あのゆるりとした感じ、WordPressの敷居をさらにぐっと下げてくれる感じ、素晴らしいなあ。

“2回目のWordBench三鷹にて – 人生初のLTハシゴ” の続きを読む

Gutenberg にカスタムブロックを追加してみよう

こんにちは、mimiです。

Gutenberg 3.0 がリリースされて、本年中のWordPress 5.0 リリースが現実味を帯びてきましたね。そろそろ、カスタムブロックの作り方ぐらい予習しておいても良さそうな感じなのでやってみました。

といってもやり方は
Creating Block Types – The new Gutenberg editing experience – WordPress
に全部載っているんですけども。

前提として Gutenberg プラグイン自体もインストールされている必要があります。

1. gutenberg-examples をダウンロード

https://github.com/WordPress/gutenberg-examples をダウンロードします。

これが WordPress のプラグインとして扱われます。ダウンロードしたものをプラグインディレクトリに入れてください。

2. 有効化の前にコメントアウト

現状、2018/06/14の時点では、そのまま有効化するとエラーが出るので、gutenberg-examples-master/index.php 内をいくつかコメントアウトします。

include '01-basic/index.php';
//include '01-basic-esnext/index.php';
include '02-stylesheets/index.php';
include '03-editable/index.php';
//include '03-editable-esnext/index.php';
include '04-controls/index.php';
//include '04-controls-esnext/index.php';
include '05-recipe-card/index.php';
//include '05-recipe-card-esnext/index.php';

ESnext で書いた場合のサンプルも入っているのですが、npm install して build しないと動かないようになっています。

ESnext の記述に慣れておいた方が良いので、書き方はそちらで覚えた方が良いと思いますが、ここでは取り敢えずカスタムブロックを表示することを目標にします。

3. サンプルがレイアウト要素として表示されます

有効化して、記事作成すると、「ブロックの追加」から追加したサンプルがレイアウト要素として表示されます。Example: Basic、Example: Stylesheets、Example: Recipe Cardの3つです。

日本語化してない時に撮ったスクショですみません。

ちょっとしたカスタムブロックなら、このサンプルを弄るだけで作れると思います。
お試しあれ。

Gutenberg 3.0.1がリリースされました

ああ!ちょっとPythonと遊んでいたら、Gutenbergがまたアップデートしてましたね!言い訳すると、WordPressの画面の更新のお知らせをスルーするのが長年の癖になってしまっていて、いつも気付くのが遅れてしまいます。

What’s new in Gutenberg? (5th June)

ブロックのリストの中身が変わっている!が、惜しいなー、よく使うブロック(Most Block)と共通ブロックのリストは被ってほしくないなあ…。でも改善されてて使い勝手がまたあがっています。

カスタムHTMLが!動き出したぞ!

そして。入れ子ブロックも進化しているー!

The editor has had support for nesting blocks since around the beginning of this year. With 3.0, a block author can now also register a block as being a child of another block by declaring parent: [ 'block-name' ]. This now causes a few changes in the interface: the root inserter won’t show child blocks unless the user is within the context of the right parent block. (It aims to reduce the amounts of blocks shown at any given time by making the inserter more contextual.)
Note that for a block to be effectively a child two conditions must apply:
The block must provide a valid parent property.
The parent must have an InnerBlocks area declared.

が、引用ブロックへの入れ子はまだ出来ないのね。でもこの感じだと作れそうな気配。

やっとこ、名前負けしない雰囲気が出てきたかもしれません。これは、そろそろ、ほんとに開発してみたくなってきましたね…。

0から子どもとPythonをやってみよう : Lesson 3 「変数」

3回目は、変数です。

数値で初めて「ち」という読み方を憶えたと思ったら「あたい」という読み方が出てきて戸惑う息子くん。name とか number とか英語もバンバン出てきます。user 、 count 、 total 、price …。最早英語の勉強ですね。何個覚えられたかなあ?

変数ってなんだっけ?

さて、義務教育で習って以来、という人も居るかもしれないので、おさらいしておくと、変数とは「値をいれておく箱みたいなもの」です。

toy = 'くまのぬいぐるみ'
print (toy)
# 「くまのぬいぐるみ」と出力されます

上記の例では、toyという変数に「くまのぬいぐるみ」という文字列を入れて、出力しています。

このように変数 = 変数に代入するものという風に書くことで、変数に値を代入できます。代入できる値は数値だけではなく、文字列なども扱えます。

= (イコール) は等しいという意味ではない

そして、プログラミングでは = は等しいという意味にはならないので混同しないでください。この辺りも、算数を習いたての小学校低学年に教えるにはちょっとややこしい部分かも知れませんね。

あくまで左辺に右辺を代入する、という意味なので頭を切り替えましょう。(じゃあ等しいってどう表現するの?とお思いかもしれませんが、それはもう少し後のレッスンで出てきます。)

“0から子どもとPythonをやってみよう : Lesson 3 「変数」” の続きを読む