CSSの長さの単位「ch」について検証してみた。

こんにちは、みみです。

この記事「デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その2 – Photosynthesic blog」にも書いたIssueで出てきたプルリクを眺めてて面白いツッコミを見つけたので、ちょっと調べてみました。

chという単位のほうがこの場合いいんじゃない?みたいなことなんですが、chってなんだっけ?そういやそんなのあったけれど、そんな単位だったっけな?と思って。

<length>- CSS: Cascading Style Sheets | MDN

Represents the width, or more precisely the advance measure, of the glyph “0” (zero, the Unicode character U+0030) in the element’s font.

ほえ?指定されてるフォントの0の横幅を1としてるってこと?

そんな説明してたっけなー、とざーっとググってみたけれど、あんまりフォーカスされてない単位でよく分からない。

というわけで、ググるより検証したほうが早そうだから、超簡単なデモを書いてみました。

“CSSの長さの単位「ch」について検証してみた。” の続きを読む

デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その2

デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その1 からの続きです。

午後からは、Gutenbergチーム、Trelloチーム、そのままTriage続行チームの3つに分かれて作業しました。(他のチームの方のレポート、待っております!)

担当したいチームに自分のポストイットをぺたぺた。

Gutenberg チームはさらに3つ(テスターとフィードバックのチェックと実際のデザイン作業、だったかな?)ぐらいに分かれていたのですが、多分言葉の壁のせい(通訳してくれる人の数?)かな、結局、Gutenbergチームはみんなで、Gutenbergのテスターをやることになりました。

Gutenberg のテストに参加しよう

実は Gutenberg のテストは、今すぐオンラインでも出来ます。(Gutenbergの最新版をインストールしているWordPressが必要です。)

そもそも Gutenberg をインストールすると、メニューバーから「フィードバック」へ進んですぐにフィードバックが送れる(何か気付きあれば是非送ってみてください)のですが、今回やったのはそれとはちょっと違って設問があってそれに回答していくテストです。

Gutenberg Testing – Make WordPress Test

“デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その2” の続きを読む

デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その1

こんにちは、みみです。

当日の朝は、楽しみ過ぎて朝四時に起きてしまったほどですが、満員電車が大の苦手な私、平日のコントリビューターデイなんて本当、誰が言い出したのもう二度と参加しないぞとギュウギュウの丸ノ内線から吐き出された時には思っておりました。

…結果、頑張って参加して良かったと心底思ったのでこれを書いています。

今年は初めてのデザインチームがありました

コントリビューターデイでは、様々なジャンルのチームに分かれて作業をします。

雑食な私、CLIに行って色々教えて貰っちゃおうかな、とかプラグインやテーマをみんなで作るの楽しそう、とか色々浮ついていたのですが、直前に決まったデザインチームが面白そう過ぎて英語喋れないにも関わらず参加しました。

そう、2日目の目玉スピーカーでもあるタミーさんがデザインチームのリーダー。デザインチームをやるのはWordCamp Tokyo では初の試みだそうです。

“デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その1” の続きを読む

React Nativeで遊んでみよう – 其ノ弐:react native storage でデータを保存

こんにちは、みみです。

React Native の公式サイトとかをちんたら読みながら、ちまちま作っていくと、まあまあ大体の人が躓くと思うココ。

・・・結局、データ保存は何を使うのが良いのよ!?

ってなるよね? AsyncStorage が基本というか React Native の標準装備的なのはわかるんだけども、ちょっと前は Realm が良いって聞いた気がするんだけどそうでもないの?どうなの?みたいな空気感。なので、

この辺りを流し読みして、結果、

react native storage – npm search

npm の人気ナンバーワン(2018/09/02現在)である react-native-storage (AsyncStorage のラッパー)にしてみました。

注:本来は目的に応じて選びましょう

今回作りたいアプリは凄いシンプルなデータしか扱わない予定なので、人気投票をアテにしてみたけれど、本来はちゃんと目的に応じて最適なものを選んでくださいね。選択肢がたくさんあって迷っちゃう、という贅沢な?悩み…。

早速インストール

npm install react-native-storage --save

(そうそう、WARNがばんばん出て脆弱性がーとか怒られて怖かったので書かれている通りfixしてみたら動かなくなった!ので、とりあえず何もしないでおきましょう。私の環境だけかもしれないけれど…)

App.jsに

import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';

と書いてインポートします。

初期設定

GitHub に超丁寧な説明があるので、その通りにしていくだけです。適当ほんにゃくしておきます。

//ストレージの設定
var storage = new Storage({
	// 最大容量, 1000がデフォルト 
	size: 1000,

	// AsyncStorageを使う(WEBでもRNでも)。
	// セットしないとリロードでデータが消えるよ。
	storageBackend: AsyncStorage,
	
	// (たぶん)キャッシュの期限。デフォルトは一日(1000 * 3600 * 24 milliseconds).
	// nullにも設定できて、期限なしの意味になるよ。
	defaultExpires: 1000 * 3600 * 24,
	
	// メモリにキャッシュするかどうか。デフォルトは true。
	enableCache: true,
	
	// リモートシンクの設定(だと思う。)
	sync : {
		// これについては後述
	}
})

という感じで、データサイズとかキャッシュとかの設定をします。

データを保存する

データを保存するには、

storage.save({
    key: 'sample',
    id: '1234',
    data: {
        'name' : 'mimi',
        'status' : 'nemui'
    },
});

とかいう感じで、JSON形式で好きに保存できるぽい。すごい適当な例ですみません。データ毎にキャッシュの設定も出来るようです。

データを参照する

データを参照(ロード)するには、

storage.load({
        key: 'sample',
        id: '1234'
      }).then(ret => {
        // ロードに成功したら
        console.log(ret.name + ' is ' + ret.status);
      }).catch(err => {
        // ロードに失敗したら
        console.warn(err.message);
        switch (err.name) {
          case 'NotFoundError':
            // 見つかんなかった場合の処理を書こう
            break;
          case 'ExpiredError':
            // キャッシュ切れの場合の処理を書こう
            break;
        }
      });

てな感じでロードできます。

オマケ:デバックの方法

え、consoleってどこで見るのよ?ってなるかと思いますが、Macで、シュミレーターの場合は command + D を押すと

こういう画面が出てくるので “Debug Remote JS” を選びます。するとChromeが立ち上がるのでデベロッパーツールを表示して、普通にコンソールみたりしてデバックできるようになります。

参照:Debugging · React Native


というわけで、ざっくりデータの出し入れは分かったけれど、ひっさしぶりにデータベース設計的な事をしなくてはならないのでは。JSON形式だとなんか新鮮っていうか不安っていうか型とかどうなるんだっけこれ。AsyncStorage は文字型しか扱えないよってどっかに書いてあったけども…。マテジゴウ。

React Native で遊んでみよう

こんにちは、みみです。

去年からこそこそ React Native を触って、趣味のアプリを作ろうとしているのですがなかなか進まず。久しぶりに時間が空いたので触ろうとしたら、どっから始めるのかさえ忘れていたので忘備録的に書いておこうと思います。

まずはココから

Getting Started · React Native

“React Native で遊んでみよう” の続きを読む

Gutenberg 3.7 がリリース。触ってみよう Gutenberg。

こんにちは、みみです。

お仕事が一段落したと思ったら夏休みに引きずり回されている間に、 Gutenberg がまた成長していました。

What’s New in Gutenberg? (31st August)

WordPress 5.0 リリースに向けて、大きな機能追加はもうないみたいですが、ブラッシュアップされまくっておりますね。アイコンが変わった!あと、執筆モードみたいなのが追加されています。

うん。頑張ってる…けど、 Gutenberg って言うほどの革新性は、残念ながらまだ無いです。まだ名前負けは否めない。それに開発中なので、本格運用やらカスタムゴリゴリな煩雑な記事にはまだ向かないとは思う。

でも、まだ、というだけです。ぐんぐんとブラッシュアップされてきて、クラシックエディタよりも良いものになってきたと思います。しっかりとしたツアーガイドを付けたなら、という条件付きですが。

ココが凄いよ! Gutenberg

というわけで、今回は私の独断と偏見による Gutenberg の良いところを推してみたいと思います。

ボタンが簡単に使えるようになります。

あんまりこの話、公式も特にフューチャーしているように見えないし、他でも見かけない気がするんだけれど、実は、一般ユーザーに一番良いのはボタンかなー、とこっそり思っています。

角丸が角丸過ぎて私的にざわざわしますが、カスタムせずにボタンを設置できるのは、一般ユーザーには喜んでもらえる機能じゃないかな、と思います。開発者としては中々悩ましいところもあるのですが。

実はボタンの機能前からあったんですが、ちょっと不安定で紹介を控えていたのですけれど、しっかり動くようになっています。

ただ、TwentySeventeenのテーマだとhoverの際の挙動がいまいちなので、ちょっと改善して欲しいかも。

“Gutenberg 3.7 がリリース。触ってみよう Gutenberg。” の続きを読む

WordCamp Tokyo 2018 の当日スタッフオリエンテーション@茅場町

こんにちは、みみです。

長かった夏休みの終わりに、WordCamp Tokyo 2018の当日スタッフオリエンテーションなるものに参加してきました。茅場町って初めて降りた気がする。

参加者全員自己紹介をして一休みしたのち、資料の読み合わせ。出席出来ない方はオンラインでの参加です。

ドリンクやランチの手配、受付の細かい手順や注意点などなど多岐に渡って確認。実行委員の方々の労力と、イベントの大きさが感じられて、身の引き締まる思いです。

ライブハウス規模のイベントならまあ慣れてるんですけれど、こういう真面目で大きなイベントの裏方は初めてなので、なんだか緊張してきました。撮影班での参加になりそうなのだけれど、ちゃんと撮り損ねないでやり切れるか心配だ…。とか言いながら、望遠を練習しておかないと、と思って持ってきたのに撮らず仕舞いでした…。

そうして2時間ばかりの真面目な打合せの後、何人かで近場でランチをする事に。茅場町はオフィス街?らしいので、空いてるお店あると良いね、ぐらいの感覚でのお店探しだったのですが。

“WordCamp Tokyo 2018 の当日スタッフオリエンテーション@茅場町” の続きを読む