Affinity Designerの使い方：画像やファイルを配置する3つの方法

2020/04/13 23:07 | ウェブ制作・運営ノウハウ

Affinity Designerには3つの画像の配置方法があって、それぞれの方法でレイヤーの扱いやできることが違ってわかりづらいのでまとめておきます。

ちなみにどの配置方法でも画像は埋め込まれるので、元の画像ファイルを編集しても埋め込まれた画像には反映されません。Affinity Publisherのリンク設定とは異なるので注意が必要です。混乱しないようにお気をつけください。僕はDesignerとPublisherをよく使うので混乱しましたw

この記事の内容はバージョン1.8.3の情報です。Affinity Designerは頻繁に更新されていてバージョンによって動作が異なる場合があるのでご注意ください。

画像配置の3つの方法

Affinity DesignerではJPG、PNG、GIFなどのラスター画像や他のAffinity Designerファイル、PDF、AI、SVGファイルなどを配置することができるんですが、画像の種類によって配置され方が以下のように異なります。

「画像」として配置される
「ピクセル」として配置される
「埋め込みドキュメント」として配置される

「画像が画像として配置される？？？ん？んん？どいうこと？」ってなりますよね？

でも、説明を読んで違いを見てもらえれば「あぁ、そういうことね」となると思うので、まずは読み進めてみてください。

「画像」として配置される

画像配置ツールや「ファイル」メニューの「配置…」からJPG、GIF、PNGのようなラスター画像を選択すると「画像」として配置されます。また、Finderから直接画像ファイルをドラッグ&ドロップしても同様に配置されます。

ちなみに、画像配置ツールとファイルメニューの「配置…」を使うと、画像を配置する時にサイズを調整して配置できますが、Finderから画像ファイルをドラッグ&ドロップするとオリジナルサイズで配置されるので、大きいサイズの画像だとサイズ調整が面倒です。

「画像」として配置された画像には、以下の3つの特徴があります。

1. レイヤーパネルに「レイヤー名（画像）」と表示される

「画像」として配置した場合、レイヤーパネルに「元のファイル名（画像）」と表示されます。banana-muffins.jpgという画像ファイルを配置すると、レイヤーパネルでは以下のキャプチャ画像のように表示されます。

Affinity Designerのレイヤーパネルのキャプチャ画像。レイヤー名が「banana-maffins（画像）」になっている

2. 画像のサイズ変更や置換ができる

画像レイヤーは、コンテキストツールバーに表示されるメニューから3つの操作ができます。

画像のリサイズ（DPIまたはスケール）
元の画像サイズに戻す
画像の置換

Affinity Designの画像レイヤーのコンテキストツールバーのメニューのキャプチャ画像

3. 画像の編集ができない

たとえば、ピクセルペルソナでマーキーツールが使えません。一度、画像をラスタライズすることでマーキーツールを使えるようになりますが、画像レイヤーではなくなるのでコンテキストツールバーから画像のリサイズや置換ができなくなります。

また、ピクセルペルソナで画像レイヤーに対して「ぼかしブラシツール」などの画像編集ツールを使うと、デフォルトの設定では画像が自動的にピクセル（ラスター）レイヤーに変換されるようになっています。これは以下のキャプチャ画像のアシスタントマネージャーで設定の変更が可能です。

Affinity Designerのアシスタントマネージャーを表示した際のキャプチャ画面

※アシスタントマネージャーは「表示」メニューから表示できます。

「ピクセル」として配置される

以下の方法で画像をドキュメントに配置すると、画像はピクセルレイヤーとして扱われます。

画像レイヤーをラスタライズする
画像を一度 Designerで開いてコピペする

ピクセルとして配置された画像は、レイヤーパネルに「レイヤー名（ピクセル）」と表示されます。

Affinity Designerのレイヤーパネルのキャプチャ画像。レイヤー名が「banana-maffins（ピクセル）」になっている

ピクセルレイヤーはピクセルペルソナで編集ができますが、画像レイヤーのようにコンテキストツールバーで画像のリサイズや置換ができません。

「埋め込みドキュメント」として配置される

Affinityファイル（Designer、Publisher、Photo）やPDFファイル、また、AI（イラストレーター）ファイルやSVGファイルは埋め込みドキュメントとしてドキュメントに配置されます。

埋め込みドキュメントはファイルの種類によって異なる操作ができます。たとえば、複数ページあるAffinity Publisherファイルを埋め込むと、コンテキストツールバーで以下の操作が可能です。

スプレッド（ページ）の選択
ページボックス（表示境界領域）の選択
ドキュメントの編集
ドキュメントの置換

Affinity DesignerでAffinity Publisherファイルを埋め込んだ時のコンテキストツールバーのキャプチャ画像

スプレッド（ページ）の選択

埋め込みドキュメント内の表示するスプレッド（ページ）を選べます。Affinity Publisherのマスターページや「ページ1」「ページ2」といった個別ページを選択できます。

同様にAffinity Designerファイルを埋め込む場合、特定のアートボードのみを選択して表示できます。この機能の特性を生かせば工夫次第で便利に使えそうですね。

ページボックス（表示境界領域）の選択

表示する境界領域を選べます。ファイルの種類によって異なりますが、たとえば、AIファイルを埋め込んだら以下の選択肢が出てきました。

メディアボックス
切り抜きボックス
トリムボックス
アートボックス
裁ち切りボックス
最小コンテンツ
最大コンテンツ

※メディアボックスや切り抜きボックスが具体的にどのような設定なのか確認できてないです。すみません。。。わかったら追記します。

ドキュメントの編集

Affinity Designer内で別ウィンドウで埋め込まれたドキュメントが開いて編集ができます。元のファイルは変更されません。また、元ファイルを編集しても埋め込みなおさないと変更は反映されません。

ドキュメントの置換

埋め込みドキュメントの置換ができます。外部ファイルを更新した時の埋め込み直しなどに使えます。

以上です！

さいごに

以上、Affinity Designerでの画像の配置についてでした！
若干マニアックな内容ですが、使いこなせると作業効率があがって制作が捗るんじゃないかなぁと思います。知らないまま使ってると思わぬ落とし穴にハマったりすることもあるので、1つ1つ理解を深めていきたいと思っています。

ということで、Enjoy designing using Affinity suites!!

その他のAffinity Designer関連の記事

IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ

2020/03/25 9:12 | ウェブ制作・運営ノウハウ

前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグですが、自分なりに1つ1つ整理していこうと思います。

今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。

バグの詳細

IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。

対処法1

当該のflexアイテムにmax-widthを指定する。

flex: 1 1 75%;
max-width: 75%;
padding: 0 4rem 0 0;

対処法2

flex-basisをautoにして、widthを指定する。

flex: 1 1 auto;
width: 75%;
padding: 0 4rem 0 0;

対処法3

borderとpaddingのないラッパー要素を入れて、その要素にflexを指定する。divを増やすのは個人的には望ましくないですが、逆にHTMLやCSSを複雑にするよりは良いですかね。

メモ

Edgeで同様のバグがあったようですが修正されています。
IE10でも同様のバグがあるとのことですが、上記の対処法はテストできてないです。すみません。

flexbox関連のバグの他の記事

さいごに

現場からは以上です！Let’s master flexbox including its bugs!

IE11でflexプロパティに書いたcalcが機能しないバグ

2020/03/24 23:23 | ウェブ制作・運営ノウハウ

先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw

バグの詳細

以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。

flex: 1 1 calc(25% - 1rem);

対処法

IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。

flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(25% - 1rem);

IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。

メモ

Edgeでも同様のバグがあったそうですが修正されています。
MS Edge Dev でIE10はダウンロードできないんですね。
IE10は公式サポート終了してますし、もう対象から外しても良いですよね…

flexbox関連のバグの他の記事

さいごに

コーディングを一通り終えてIE11でページを確認した際にレイアウトがグチャってなってると結構萎えるんですよね。なので、こういう周知のバグは覚えておいて、対処済みのCSSをデフォルトで書けるようにしておくと良いですね。

flexbox関連のバグは他にもたくさんあるので、この際しっかり勉強して対処できるようにしておこうと思います。

Enjoy laying things out with flexbox!

自分の在宅開発環境とリモートワークの良い点・悪い点

2020/03/20 19:21 | ウェブ制作・運営ノウハウ

COVID-19の影響もあってまだまだリモートワークが続く人も多そうですね。早く皆さんが普通の生活に戻れるように祈りつつ、収束するまではできることを淡々と粛々とやっていこうと思います。

さて、3月初旬に突撃！在宅の開発環境 2020年春という記事を見てうらやましかったので、便乗して自分の在宅開発環境も晒しちゃいますw

これからリモートワークを始める方の参考になれば幸いです（なるかな？笑）。

突撃！Rriverの在宅開発環境

僕は半年ほど前からフリーランスになって在宅で仕事をはじめたので、新型コロナの影響でリモートワークをはじめた方より、ちょっとだけ先に在宅での開発をはじめています。いまは主に受託でウェブサイトのデザインとコーディング、ロゴや名刺、フライヤーなどのデザインなどをやらせてもらっていて、ご紹介するのはそのための開発環境になります。

昔から少しずつ揃えてきたもので古い機材も多いですが、現在の開発環境は以下の通りです。古いものを買い替えたいw

メインの端末

MacBook Pro (13-inch, 2018, Four Thunderbird 3 Ports)の2.7GHz クアッドコアIntel Core i7でメモリを16GBにして使ってます。外付けディスプレーと高さを合わせるために以前紹介したPCスタンドに置いて使ってます。このスタンドのおかげでかなり快適になったのでオススメです。

たいていの場合、MacBook Proの画面でブラウザを開いて、外付けのディスプレーでAffinity DesignerやXD、Illustratorなどのグラフィックツール、VSCode、CodeKit、iTerm、VirtualBox、MAMPなどの開発関連ツールを開いて使ってます。

ディスプレー

10年くらい前に購入したacer Sシリーズ 27インチワイドTFTモニタ（PDF）を使っています。1920 x 1080pxと画面はそこそこ広いですしコーディングしたりターミナル使う程度なら十分使えるんですが、Non-Retinaで画面上部と下部で明度が少し変わって見えるので、デザイン作業の時には困ります。

せめてEIZO FlexScan 4K 27.0インチあたりのモニターに買い替えたいなと思っています。31.5インチのほうがいいのか、値段がはるけどカラーマネジメントができるColorEdge のほうがいいのか…値段の差も大きいし悩みます。DELLの4Kディスプレイとかでもいいのかな？とか…。みなさんどうやってモニター選んでるんですか？

キーボード

かなり昔のApple Wireless KeyboardにEneloopを入れて使ってます。Bluetoothが接続できなくなる問題も解消できたし、打感とかにはそこまでこだわりがないので壊れるまで使いたいです。

iPad Pro用に発表されたMagic Keyboard はMacにつなげて使えないのかな？笑

マウス

マウスは長年Logicool MXシリーズを使っていて、いまはMX Master 2S を使っています。MX Master 3 の評判がそこそこ良くて気になってますが、Amazonのレビューで賛否が分かれる部分もあるようなので、2020年3月現在、半額の2Sでもいいような気はしています。でも、長年のMXファンとしては3も試してみたい。

あとマウスパッドはパワサポのを使ってます。

スピーカー

スピーカーはCreative T12 Wirelessスピーカーを使ってます。作業中にBGMとして音楽を聴く程度で音質に強いこだわりとかもないので十分です。いまはAmazonで3,280円（2020年3月20日現在）で買えちゃうんですね。安い！僕が買った時（7年ほど前）は6,000円近い値段でした。

机と椅子

110 x 60cmのサイズの机を使っています。外付けモニターがあるので、もう少し奥行きが欲しくなります。この記事みたいにDIYで大きめの天板に変えるのが夢ですw

椅子は10年近く前にFrancfrancで買ったごく普通のデスクチェアを使っていて、腰が痛くなることもなく特に不満はないですが、やっぱり体に優しい作業用のチェアが欲しいなぁとは思います。元記事の方々、結構いい椅子使ってますよね。うらやましい。。。

以下、突撃！在宅の開発環境 2020年春の記事にある3つの質問に僕も答えてみます。

僕の場合、組織に所属してオフィスで数名の人と一緒のスペースで働いていた時と、フリーランスになって在宅で1人（ある意味One Team？）で働いている環境の比較になります。

在宅開発環境の良い点

通勤の時間とストレスがなくなる

以前は通勤が片道1時間以上だったので、その時間とストレスがなくなったのは最大のメリットです。

作業に集中できる

作業スペースを作ったので、集中して仕事ができます。ペースを崩されずに作業ができます。幼いお子さんがいる家庭では、一斉休校しているいまのような状況だと大変だとは思いますけど…。

無駄な浪費が減る

コンビニやスタバなどで無駄遣いしなくなりました。「無駄」は言い過ぎかもしれませんが、お金の節約にはなってると思います。

飲み物事情の改善

挽きたての豆でコーヒーをいれたり、紅茶や緑茶をいれたり、飲み物事情が改善されました。うつわ好きなので、好きなカップをその日の気分で選んで使えるのも嬉しいです。飲み物の香りを楽しんだり、ちょっとした癒しの時間が増えました。勤務先でもやってましたが、家のキッチンでやるのとは快適さが違います。

猫と一緒に過ごせる

猫の日向ぼっこを見るだけで幸せな気持ちになれます。癒し効果絶大ですw

在宅開発環境の悪い点

運動量が減る

意識して体を動かさないと本当に運動をしなくなります。Apple Watchでアクティビティをモニタリングしてますが、家で仕事を始めてから圧倒的に運動量が減りました。なので、最近は近くの公園にウォーキングに行ったり、歩いて買い物にいったりして体を動かす時間を作っています。

食事の準備に時間がかかる

外ランチやコンビニランチならすぐに食べられますが、自分で準備するとパスタ + 1品とかでもそこそこ時間がかかります。1時間なんてあっという間に過ぎてしまいます。せっかく家にいるのにコンビニ弁当は嫌だし…。

際限なく仕事ができてしまう

フリーになったからというのも大きいですが、家で仕事をしてると際限なく作業ができてしまいます。なので、組織に属して働いていた時よりも時間管理は厳しくする必要があると感じています。

外見を気にしなくなる

フリーになってから髭を剃る回数が減りました。あと、寝癖をほったらかしにしちゃったりw
オンラインで打ち合わせする場合でも、意識的にビデオにして外見にも気を配るようにしたほうが良さそうです。

今後、在宅開発環境をどうしたいですか？

まずは古くなったディスプレーを買い換えたいです。あと、デスクの天板をDIYで広くしたいですね。幅と奥行きを10cmずつ大きくして120 x 70cmにできたら、かなり快適になる気がしています。

欲を言えば、2020 iPad Pro 12.9-inchを買ってSidecarで第三のディスプレーにしたり、Apple Magic Trackpad 2 も欲しいですね。笑

さいごに

COVID-19は、はやく収束して欲しいですがリモートワークは継続すると良いと思います。通勤人口が減ってラッシュが緩和されるだけでも社会全体の幸福度が上がると思うんですよね。場所を選ばずに働ける職種ならリモートワークのデメリットは多くないと思います。課題があるとしたら、環境整備と慣れくらいじゃないですかね。リモートワークを取り入れたとしても、適度に対面で会う機会を設ければいいし。あとはバランスの問題ですよね。

これを機に政府が企業のリモートワーク導入を支援する政策を議論してくれることを願います。

ということで、Rriverの在宅開発環境でした！ Stay safe and healthy!!

Macでhostsファイルを編集して設定を確認する方法

2020/02/17 23:10 | 制作・効率化ツール

Macでhostsファイルを編集して設定後に確認をする方法をメモっておきます。確認をしたのはmacOS Catalinaのみですが、基本的なやり方はバージョンが違っても同じだと思います。hostsファイルっていったいなに？という方はこの記事がわかりやすかったです。

macOS Catalinaのhostsファイルの場所

/private/etcディレクトリにあります。/etcが/private/etcのシンボリックリンクになっているので/etcディレクトリでも同じです。

❯ cd /private/etc

hostsファイルの編集

hostsファイルを編集するには管理者権限が必要なのでsudoをつけてvimやnanoでファイルを編集します。

❯ sudo vim hosts

hostsファイルの記述方法

<IPアドレス> <ホスト名>

IPアドレスとホスト名の間にはスペースかタブを記述します。たとえば、以下の記述でrriverblog.localで127.0.0.1にアクセスできるようになります。

127.0.0.1 rriverblog.local

設定後の確認方法

pingコマンドで設定が確認できます。設定が反映されていない場合は以下のように表示されてしまいます。

❯ ping rriverblog.local
ping: cannot resolve rriverblog.local: Unknown host

設定ができていると以下のように表示されます。

❯ ping rriverblog.local
PING rriverblog.local (127.0.0.1): 56 data bytes
Request timeout for icmp_seq 0
Request timeout for icmp_seq 1

ブラウザで設定したホストにアクセスしてもいいですが、エラーが出てこないのでpingで確認したほうがわかりやすいです。ちなみにnslookupやdigコマンドだとhostsファイルを参照しないようなので要注意です。

DNSキャッシュをクリア／フラッシュする方法

hostsに記述したものはシステムのDNSより先に読み込まれるはずなので、たぶん意味がないと思うんですが…。hostsの変更が反映されない時のために、念のためDSNキャッシュをクリアする方法をメモっておきます。

DNSキャッシュをクリアする方法

sudo killall -HUP mDNSResponder

キャッシュをフラッシュする方法

sudo dscacheutil -flushcache

上述したDNSキャッシュのクリア方法はYosemite以降で使えるようです。dscacheutilはYosemiteより前のMac OSで使えたようです。

さいごにひとこと

ウェブ制作用にローカル環境を構築しているとちょくちょく出てくるhostsファイルですが、たまにしか触らないのでファイルの場所とか忘れちゃうんですよね。ということで、macOS Catalinaでhostsファイルを編集して設定を確認する方法でした！

MacBook ProのTouch Barがフリーズしたときの対処法

2020/01/29 14:30 | 制作・効率化ツール

先日オンライン会議をしていてボリュームを変えようと思ったら、Touch Barがフリーズしていてうんともすんとも言わなくて困りました。

コマンドライン（ターミナル）で簡単にリスタート（強制終了）できるので、備忘録的にメモっておきます。macOSのバージョンによってやり方違うのでご注意を！

Control Stripのリスタート

Touch Barの右側に表示されるボリュームやその他のコントロールが表示されているところが「Control Strip」というんですが、ここだけ強制終了して再起動する方法です。僕の場合はここだけフリーズしてて困りました。

ターミナルを開いて以下を実行します。

killall ControlStrip

Touch Bar 全体のリスタート

Touch Bar 全体を強制終了させて再起動する方法です。「sudo」を使って管理権限で実行する必要があります。macOSのバージョンによって動いているプロセスが違うようなので、それぞれ実行するコマンドが異なります。

MojaveとCatalina

sudo pkill TouchBarServer

SierraとHigh Sierra

pkill "Touch Bar agent"

さいごに

これで、Touch BarのフリーズでmacOSを再起動しなくてすむはずです。

Touch Barは不人気な印象が強いですが、せっかく付いてるのを買ったので活用したい次第ですw

MacにApple製ワイヤレスキーボード（A1314）が接続できない場合の対処法

2020/01/13 19:14 | 制作・効率化ツール

かなり昔のApple Wireless Keyboardを使っているんですが、先日、MacBook Proに接続できなくなって困ってしまいました。型番（Model No.）がA1314の単三電池2本で動くモデルで、デザインが結構気に入っているんですよね。

何度やってもつながらないので寿命かと思って諦めるところだったんですが、幸い対処法がありました。以下、旧型（Model No.: A1314）のApple製ワイヤレスキーボードの接続をリセットする方法です。

Apple製ワイヤレスキーボードの接続をリセットする方法

以下の手順で接続をリセットできます。

キーボードの電源を切る
Bluetooth環境設定を開く
デバイス一覧にキーボードがある場合は削除する
キーボードの電源ボタンを押しっぱなしにする
Bluetooth環境設定のデバイス一覧にキーボードが表示されるので「接続」をクリックする
数字が表示されたら電源ボタンを離しても大丈夫です（下の画像参照）
表示される数字を入力してEnterを押す

僕の場合、これで接続の再設定ができました。

解像度を指定してフルページのスクリーンショットを撮る方法

2020/01/12 14:17 | 制作・効率化ツール

ウェブサイトのフルページのスクリーンショットを撮るとき、普段はFirefox Screenshotsを使っています。でも、これだと高解像度のスクリーンショットが撮れないんですね。

最近はDPR（デバイスピクセル比）が2倍、3倍といった高解像度のスクリーンも多いので、そういったスクリーンでもくっきり表示できるように、高解像度のスクリーンショットが必要な時ってあるんですよね。印刷物にスクリーンショットを使いたい時にも必要です。

ということで、探してみたら、なんとFirefoxにそんな機能がありました！

Firefox、いいですよ。おすすめですw

Firefoxで解像度を指定してフルページのスクリーンショットを撮る方法

Firefoxのウェブコンソールを開く。Macでは⌘ + Option + K（WinではCtrl + Shift + K / メニューのツール → 開発ツールからもアクセスできる）
:screenshot --fullpage --dpr 2と入力してEnterを押す
スクリーンショットがダウンロードフォルダに保存されます

これだけです！簡単ですね。

ウェブコンソールは下の画面キャプチャのように画面の下に表示されます。

Firefoxのウェブコンソールを表示した画面のキャプチャ。コンソール部分に:screenshot --fullpage --dpr 2というコマンドが入力されている

ファイルは以下の名前でダウンロードフォルダに保存されます。

Screen Shot yyy-mm-dd at hh.mm.ss.png

ちなみに、フルページでスクリーンショットを撮るとファイル名に-fullpageが追加されます。

モバイル表示でフルページのスクリーンショットを撮りたい場合

複数の画面サイズでフルページのスクリーンショットを撮りたい時もありますよね？

そんな時でも大丈夫です。

Freifoxのレスポンシブデザインモードを使えば、さまざまな画面サイズで振るページのスクリーンショットが撮れます。

Firefoxでレスポンシブデザインモードを表示した画面のキャプチャ。iPhone Xなどの端末がリストされたドロップダウンが表示されている

Firefoxのレスポンシブデザインモードを開く。Macでは⌘ + Option + M（WinではCtrl + Shift + M / メニューのツール → 開発ツールからもアクセスできる）
好きな画面サイズを選ぶ（以下の画像参照）
ウェブコンソールを開いてさきほどと同じようにスクリーンショットを撮る

:screenshotコマンドのオプション

:screenshotコマンドにはいくつかオプションがります。これらを知っておくと、より便利にスクリーンショットが撮れますね。

:screenshotコマンドに以下のオプションを追加することでいろいろなことができます。

:screenshot [オプション]

#例
:screenshot --fullscreen --dpr 2 --filename top-desktop.png

:screenshotのコマンドオプション
オプション	型	できること
–fullpage	boolean	フルページでスクリーンショットを撮る
–dpr	number	デバイスピクセル比を指定。2倍の解像度で撮りたい場合は`--dpr 2`と指定
–filename	string	ファイル名の指定。拡張子は`.png`が必須
–clipboard	boolean	スクリーンショットをクリップボードにコピーする
–file	boolean	クリップボードにコピーする場合でもファイルに書き出す
–delay	number	スクリーンショットを遅延する（秒）
–selector	string	要素（CSSセレクタ）を指定してスクリーンショットを撮る。たとえば`class=page-header”`が指定された要素のみスクリーンショットを撮る場合`:screenshot --selector .page-header`と入力する。便利〜w

コマンド一覧はMDN web docsの「コマンドラインインタープリター」というページの「支援コマンド」セクションの下の方に掲載されている情報を参照しました。

MAMPを5.3から5.5にアップデートした時にやったこと

2020/01/07 19:37 | 制作・効率化ツール

Macのローカル開発環境にはMAMPを愛用させてもらっています。

バージョン5.3を使っていて5.5へのアップデートをすすめられるので、Release notes を見たら「Support for macOS 10.15 (Catalina)」とあったので、念のためアップデートしておきました。

設定は人それぞれなので他の方の役に立つ情報かわかりませんが、備忘録として手順を書き残しておきます（99.9%自分用w）。

既存の設定のバックアップ

僕の場合、MAMPは以下の用途で使っています。

このブログ用のWordPressの検証
Apacheの機能が必要なウェブサイトのテスト
ブログ用のデモページのテスト

なので、以下の設定をしています。

SSL
WordPress用のMySQLデータベース
複数サイトの設定用のVirtual Host

ということで、MAMPをアップデートする前に念のため以下の2つのフォルダをバックアップしました。

/Applications/MAMP/db/
/Applications/MAMP/conf/apache/

※サイト用のファイルはhtdocsに入れてないのでバックアップしていません。

個別にバックアップは必要ない？

ちなみに、新しいバージョンのMAMPをダウンロードしてインストールすると自動的に古いバージョンを検出してくれて「MAMP_2020-01-07_10-39-32」といったフォルダにバックアップしてくれます。

なので、これらのファイルのバックアップはあくまで念のためです（石橋をたたいて、ヒビを入れて渡る性格なので…w）。

また、データベース（dbフォルダ）は自動的に新しいバージョンのMAMPにコピーしてくれるので、アップデート後に何もしなくても大丈夫でした。

設定ファイルの更新

僕の場合、以下のファイルとフォルダをバックアップからコピーしました。お使いの設定によって異なるので、ご注意を！

/Applications/MAMP/conf/apache/httpd.conf
/Applications/MAMP/conf/apache/extra/httpd-ssl.conf
/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
/Applications/MAMP/conf/apache/keys/

4つ目の「keys」フォルダはSSLを設定する時に作った以下のファイルが入っています。

local-ca.key
local-ca.pem
local-ca.srl
server.crt
server.csr
server.key
v3.ext

MAMPでのSSLの設定については「MAMPでMacのローカル環境にSSL（https://localhost）を設定する方法」をご参照ください。

ApacheとMySQLのポート番号の変更

SSLの設定にあわせてMAMPの「Preferences」の「Ports」で「Set Web & MySQL ports to 80 & 3306」というボタンをクリックして設定は完了です。

これでMAMPを起動してサイトを立ち上げたら問題なくサーバーもデータベースも動きました。

Firefoxでセキュリティの警告画面が出る

オレオレ証明書なので、Firefox（Mac版の71.0で確認）でアクセスすると上の画面のように怒られてしまいますが、「詳細情報…」ボタンを押して「危険を承知で続行」ボタンをクリックすると「セキュリティ例外」に追加されて次からは問題なくアクセスできるようになります。

さいごにひとこと

以上、MAMPを5.3から5.5にアップデートした時の手順でした！

Enjoy developing on your local environment with MAMP!

ウェブ制作に役立つAffinity Designerの使い方と注意点

2019/12/21 7:49 | 制作・効率化ツール

12月9日（月）に開催されたAffinity User Gruop JAPANミーティング #3 で「ウェブ制作に役立つAffinity Designerの使い方と注意点」という内容でお話しをしてきました。当日お話しした内容に少し情報を追加してこのブログでもご紹介します。

動画版もあります

今回はリモート参加の方向けに動画版も用意したので、読むのが面倒という方はYouTube でどうぞ。14分31秒の動画です（注：改めて自分の声を聞いてみて、この声には睡眠促進効果があるんじゃないかと疑っています。聞いていて眠くなるかもしれませんのでご注意くださいw）。

はじめに

個人的に「脱アドビ」の最有力候補だと思っているAffinityツールですが、僕はAffinity Designerが一番好きでよく使っています。そこで、実際にAffinity Designerを使ってウェブサイトをデザインしてみて便利だったことと注意点をご紹介します。

ちなみに、初めての方は操作に戸惑うかもしれないので、以下の記事あたりも参考にしていただくと良いかもしれません。

まずは自己紹介…って、ここではいらない気もしますが入れておきますw

自己紹介わたなべりょう Rriverブログ https://parashuto.com/rriver フリーランスのデザイナー。おもにウェブ。コードも自分で書きます。Twitter @rriver

はい、最近フリーランスになりました。おもにウェブ制作（ディレクション、デザイン、コーディング）をやってますが、ご要望があればロゴや印刷物などもデザインしますんで、よかったらお声がけください（宣伝）。

アジェンダ

今回のアジェンダです。まず、使い方や注意点を紹介する前に、Affinityツールをあまり知らない方のために、僕がAffinityツールを好きな理由と僕が考えるAffinityツール向きのプロジェクトを紹介します。

Affinityツールを好きな理由

どこぞの牛丼屋じゃないですけど、Affinityアプリは、はやくて、やすくて…w

すごくサクサク動きます。そして、買い切りで各6,100円（2019/12/19現在）というお手頃価格は本当にありがたいです。フリーランスになったばかりの今は特にそう思います。

たとえば、Adobe Illustratorの単体プランで年間プラン（一括払い）が26,160円（2019/12/19現在）なので、それと比べるとAffinityツールはかなり安いですよね。Adobe Illustratorの1年間のサブスクリプションの値段で、Affinity Designer、Photo、Publisherの3つを買ってもお釣りがきちゃいます。あと、お金を払い続けないと使えなくなることもないので、精神衛生上けっこう大きいです。

ちなみに、Affinity Designerは現在バージョン1.7.3なんですが、1.xの更新は同じライセンスで使えるようです。僕は2016年1月にMac版のAffinity Designerを購入したんですが、それ以来一度もお金を払わずに使ってます。逆に開発会社のSerifさんがそれで経営大丈夫なのか不安になります。ただ、2.xになったら新たに購入の必要があるのかもしれません（→ 要確認）。

グラフィックデザインをはじめたい方にも最適

この手軽さでグラフィックデザインに必要な機能がそろっているので、グラフィックデザイナーやイラストレーターを目指す方々にも気軽に始められる良いツールだと思います。いまはAdobeツールが業界標準になってますが、気軽に始めるのにはやっぱりお値段のハードルが高いです。

フル機能iPad版もある、プロ向け本格ツール

Affinityツールは安いだけじゃなくて「プロ向けの本格ツール」として必要な機能がしっかり揃っています。ウェブ制作で普段使うようなPhotoshopやIllustratorの機能は、ほぼ揃っていると思って良いと思います（逆に「できないこと」は、こちらのまとめが参考になります）。一部の機能については、Adobeツールより優れていると思います。

さらに！

I love Affinity. Mac/WinとiPad（ほぼフル機能）で使える

Affinity DesignerとPhotoはMacとWindowsだけでなく、デスクトップ版の機能がほぼフルで使えるiPadアプリもあるんです！

たとえば、ロゴをデザインする際に、iPad版のAffinity DesignerでApple Pencilを使ってラフスケッチを描いてトレースして、iCloud経由でMacに持ってきて清書するなんてことも、ほんとに手軽にできちゃいます。画面上にペンでラフが描けるのって、やっぱり便利ですよね。そして、ベクターツールでそれが手軽にできるのは本当にありがたいです。

Affinity Designerが一番好き！

Affinityツールのなかでも、僕はAffinity Designerが一番好きでよく使うんですが、その理由は、このアプリがウェブも、印刷物も、イラストも、なんでもこなせる万能ツールだからです。

I love Affinity Designer. ウェブも、印刷物も、イラストも、なんでもこなす万能ツール

このスライドに載せているのは、実際に僕がデザインしたものなんですが、レスポンシブなウェブサイトも、卓上カレンダーのような印刷物も、クリスマスカードのイラストなんかも、すべてAffinity Designerでデザインできてしまいます。

ただ、印刷をしてから加工が必要なものは印刷通販ではAIファイルでの入稿が必須な場合が多いです。なので、封筒や卓上カレンダーのように印刷後に加工が必要なものは、僕はAffinity Designerでデザインを作ってクライアントの承認をもらって、それをイラレで清書するといったことをしています。

あと、Affinityツールは縦書きや日本語の禁足処理ができないなど、弱点もありますのでご注意ください。万能なツールではあるものの、日本語に特化した機能が弱いのは残念です。

Affinityでデザイン、イラレで清書というフローもあり？

ここはちょっと余談になりますけど…

シンプルなベクターシェイプは、Affinity Designerからイラレにコピペが問題なくできます。なので、Illustratorでゼロから作り直す必要はないです。

たとえば、いろいろなデザインのバリエーションを試したり、変更を加えているとデザイン要素のサイズや位置の数値がおかしくなる場合もあるので、それらの最終確認も含めて、一度ツールを変えて「清書」するというフローも悪くないと考えてます。

ページものは、テンプレートだけデザイン承認までAffinity Designerで、作り込みはAdobe Illustratorなんてのもありですかね？まぁ、そこまでしてAffinity Designerを使う必要ないんじゃない？と思われそうですがw

使い心地の良いAffinity Designer

僕はIllustratorをそこまでがっつり使っていたわけではないので比較が難しいですが、Affinity Designerのほうが使い心地が良い気がしています。ツールとしてのUI思想がシンプルなんですかね？あと、動作が軽いというのも、なにげに大きいですよね。

イラレはめちゃくちゃ機能がたくさんありますが、それだけに、難しいというか。複雑というか。

Adobeツールはちょっと価格がお高いだけで嫌いなわけではないので、いろいろ使えるのが良いと思っている派なんですが、Affinity Designerに慣れちゃうと、デザインする際はついAffinity Designerを起動しちゃいますw

Affinityツールに向いているプロジェクト

さて、そんなAffinityツールですが、僕がこれらのツールを使うのに向いていると思うプロジェクトは以下のようなケースです。

Affinity向きのプロジェクト「ウェブサイトだけじゃなくてロゴと名刺も作ってほしい」「ロゴは利用ガイドラインも作ってほしい」 ★個人または少人数チーム ★年齢層高めのクライアント

クライアントから、ウェブサイトだけじゃなくて、ロゴや名刺、しかも、ロゴについては利用ガイドラインも作って欲しいなんていう依頼を受けた場合
そういった依頼を、僕みたいなフリーランスの個人、または、少人数チームで受ける場合
さらに、年齢層が若干高めのクライアントで、一緒にXD使ってドキュメントをシェアしてコメントしたり、Figmaを使って一緒に同時更新なんてのが難しい場合

どれも当てはまる場合は、Affinityツールがもってこいのプロジェクトだと思います。

こんなふうに使ってます

最近、まさにそんなプロジェクトの依頼が僕に来たんですが、そのプロジェクトではAffinityツールを以下のように使っています。

Affinity Designer

ロゴのデザイン
名刺のデザイン
フローチャート
ワイヤーフレーム
デザイン・カンプ
素材の書き出し
その他の印刷物（Adobe Illustratorと併用する場合もあり）

ロゴや名刺のデザインからウェブサイトのデザインカンプ、そして、最終画像素材の書き出しまで、ほとんどをAffinity Designerで作っています。ただ、先述した通り、封筒や卓上カレンダーのような印刷後に加工が必要なものにはAdobe Illustratorを併用しています。仕方がないのでAmazonで割引があった際に、年間プランを購入しました。

Affinity Photo

写真の加工

Affinity Publisher

ロゴの利用ガイドライン

ロゴの利用ガイドラインや提案書のような、複数ページ必要な資料についてはPublisherを使っています。

余談1: Notion

Notionについては、プレゼンの際も動画でも触れてないんですが、やっぱり便利なツールですね〜。要件や仕様の整理、ノートやメモの管理、調査資料の整理など、たとえば、Affinityツールで作った画像やPDFを貼り付けてまとめておくこともできるし、2020年は有料版で使っていこうと思っています。

余談2: ツールは適材適所で選ぶのがいい

Affinityツールに向いているプロジェクトもありますが、逆に

ちょっとした動きを入れたプロトタイプを作りたい場合はAdobe XD、
チームでデザインするのが必須な時はFigma、
他のアプリとの連携が必須の場合はSketch

など、向き不向きはあると思うので、ツールは適材適所で使うのが良いと思います。なので、どれも使えるようになっておくと良いのかなぁ、と思ったりw

Affinityスイートの抜群の互換性

これら3つのAffinityツールの互換性は抜群なので、3つのツールを行き来してもストレスなく作業ができます。また、Affinity Publisherには「Studio Link」という画期的な機能がついていて、DesignerとPhotoがインストールされていると、Publisher内からそれら2つのアプリを使えます。なので、Publisherを使っている時はDesignerとPhotoを起動する必要がなくて、アプリ間を行き来する必要もありません。

聞いたところによると、.afdesignや.afphotoといった拡張子はファイルを開くアプリを判別するためにつけられているだけで、実は、3つのアプリのファイルの中身のフォーマットは一緒だそうです。「Affinity」という言葉は「密接な関係、相性、親近感、親和力」という意味を持つんですが、もともとそういった哲学と思想のもとに作られたツール群なんですね。

ウェブ制作に役立つ便利な使い方

さて、前置きがめちゃくちゃ長くなりましたが、ここからが本題のAffinity Designerのウェブ制作に役立つ便利な使い方のご紹介です。基本的な機能のように思えるものも多いかもしれませんが、ある意味痒いところに手が届くこれらの機能は、作業効率を大きく上げてくれます。

複数解像度の画像書き出し機能

複数解像度の画像の書き出し。Affinity Designerの書き出しペルソナの画面キャプチャ。複数解像度の画像の書き出しが設定されている

Affinity Designerには「書き出しペルソナ」という操作モードがあって、そこからウェブ用に画像素材を書き出すことができます。いろいろ細かい設定ができる便利なツールで、たとえば、レスポンシブイメージ用に複数解像度の画像の書き出しも数クリックで簡単にできます。

やり方

書き出しペルソナの「スライス」パネルで、書き出したいスライスの左にある矢印（❶）をクリックすると、書き出しの詳細設定が見られます。そこで、「+」アイコン（❷）を押すと簡単に2x、3x、4xの画像を追加できます。それから、書き出しアイコン（❸）をクリックすると一度に画像が書き出せます。

書き出す際のファイル名やフォーマットも、ここから細かく設定できて便利です。

違う種類の画像の書き出し

複数解像度の画像だけでなく、たとえばSVGとPNGといった違う種類の画像ファイルを書き出すのも簡単にできます。

モダンな開発者の方々はあんまりやらないのかもしれませんが、SVGのフォールバック用にPNG画像も書き出しておきたいなんて時にも便利です。

やり方

さきほどの書き出しペルソナのスライスパネルで、今度は違うところにある「+」アイコン（❶）をクリックすると、他の種類の画像（SVG、JPG、GIFなどなど）を書き出し画像として追加できます。追加後に書き出しアイコン（❷）をクリックすると、設定した画像を一気に書き出せます。楽ちんですねぇ〜

書き出すスライスの追加方法

書き出す画像はスライスを設定して、画像の種類などの設定をして書き出します。スライスはレイヤーなどから自動で作られている場合が多いですが、より細かく設定をしたいときのためにスライスを追加する方法が複数用意されています。

レイヤーの一覧からスライスをつくる

さきほどの書き出しペルソナの、今度は、レイヤーパネルから、書き出したいレイヤーをクリックして選択します（❶）。次に画面の下のほうにある「スライスの作成」ボタン（❷）をクリックするとスライスが追加できます。

Affinity Designerではマスクやクリッピングがレイヤーの移動で簡単にできるので、ウェブ用にはマスクなしの元画像を書き出したいなんてときにこの機能が役に立ちます。

ちょっとした機能ですが、使いこなせると便利で役立つ機能です。

要素を選択してスライスをつくる

デザイン要素から直接スライスを作ることも可能です。

たとえば写真を書き出したい場合、まずはツールからスライス選択ツール（❶）を選んで写真を右クリックすると、コンテキストメニューで「スライスを作成」という項目が出てきます（❷）。これをクリックすると選んだ写真からスライスが作れます。

グルーピングされている要素は、ここでダブルクリックすると展開されて中の要素が選択できるので、そこで右クリックしてコンテキストメニューからスライスを作ることもできます。

アセットとシンボル機能

ワイヤーフレームやデザインカンプを作る時に便利なのがアセットとシンボル機能です。

アセット機能

アセット機能は、よく使うデザイン要素を登録しておく機能で、Affinity Designerでは独自のカスタムセットをカテゴリに分けて登録ができます。先日、17ページ分のウェブサイトのワイヤーフレームを作ったんですが、アセットをAtomic Designの考え方でAtoms、Molecules、Organismsにカテゴリ分けして使ってみたんですが、なかなか作業が捗りました。僕はワイヤーフレームの要素はプロジェクトに特化したデザインを入れ込まないシンプルなものにしているので、アセット登録しておくと他のプロジェクトでも使いまわせて便利です。

アセットパネルはメニューから「表示 → スタジオ → アセット」で表示できます。あと、環境設定のキーボードショートカットから、ショートカットを登録しておくとパネルの表示・非表示を簡単にできるので便利です。

Affinity Designerの環境設定のキーボードショートカットパネルの画面キャプチャ。ドロップダウンで「デザイナー」と「その他」を選んだ状態

キーボードショートカットのドロップダウンで「デザイナー」と「その他」を選ぶと「アセットパネルを切り替え」という項目があるので、そこでショートカットを設定できます。

シンボル機能

シンボル機能は、複数箇所で使用するデザイン要素を登録しておくと、あとで一気に変更ができる機能です。デザインカンプをつくる際に、複数ページで共通して使用するヘッダーやフッター、ロゴ、矢印アイコンなどを登録しておくと、あとで一気にサイズや色を変えられるのですごく便利です。

シンボルのある特定の部分だけ個別の設定をする機能もあるので、使いこなせるとさらに便利になります。

シンボルパネルはメニューから「表示 → スタジオ → シンボル」で表示できます。シンボルパネルにもショートカットキーを設定しておくと便利です。先程の環境設定のキーボードショートカットパネルのドロップダウンで「デザイナー」と「その他」を選ぶと「シンボルパネルを切り替え」という項目があります。

公式チュートリアルビデオがわかりやすいですよ

アセットとシンボル機能の基本的な使い方は、以下の公式チュートリアルビデオがわかりやすいです。ビデオ自体は英語ですが日本語字幕がついてます。

レスポンシブ・デザインに便利な「制約」機能

レスポンシブなウェブサイトのデザインカンプを作る際に便利なのがAffinity Designerの制約機能です。

Affinity Designerの制約機能の説明。ウェブサイトのヘッダーがレスポンシブ・ウェブサイト用に複数サイズで展開されている

たとえば、上のスライドのようなウェブサイトのヘッダーをタブレットとモバイルの画面幅に展開していきたい場合、制約機能を使うとタブレットやモバイル用のアートボードにコピペするだけで、自動でヘッダーの幅やロゴ、メニューを配置するように設定ができます。

タブレットとモバイルの間のサイズも念のためカンプを作って検証したいなんて時も、アートボードをコピペして幅を変えるだけで対応できちゃいます。

制約とシンボルの組み合わせに注意

僕が実際のプロジェクトで使った際、ヘッダーやフッターをシンボルにして、それらシンボルに制約を設定したのですが、いろいろ変更すると操作の「取り消し」が効かなくなったり制約がおかしいことになる現象に何度も遭遇しました。100%再現しきれてくて解決策を提示できないのが残念ですが、制約を設定する際は、念のため元のファイルをバックアップしておいたほうが良いかもしれません。特にシンボルと組み合わせて制約を使うときはお気をつけください。「こうしたらこうなる」という再現性が確認できたら、公式フォーラムでバグ申請したいと思っています。

アートボードを個別ページとしてPDFで書き出し

先日、17ページ分のワイヤーフレームを作ったんですが、クライアントチェックの際にPNGに書き出して送ったら、なぜか見られないということがあって、PDFに書き出して送ったら見られた、なんてことがありました。Affinity Designerではページごとに、また、すべてのアートボードを1つのPDFとして書き出せます。17のファイルを送るより、17ページの1つのPDFとして送れるほうが煩雑にならずにすむので重宝しました。

すべてのクライアントがパソコン操作に慣れているわけではないので、こういった融通の効いた対応ができるAffinity Designerは便利なツールです。

Gitみたいな「ブランチ保存」機能

これはバージョン1.7から搭載された機能なんですが、デザインをする過程である時点までさかのぼって新しく作業をすると、上のスライドのように履歴パネルに分岐アイコンが表示されます。このアイコンをクリックすると、履歴をさかのぼる前のものと行き来することができます。

ちょっとしたデザインの調整を繰り返していると、「あぁ、さっきのやつの方が良かった〜」なんてこともありますよね？そんな時に、この「ブランチ保存機能」を使うと便利です。

ファイルを閉じても履歴が残る！

さらに、Affinity Designerにはドキュメントに履歴を保存する機能がついていて、ドキュメントを閉じても履歴を残すことができます。ファイルメニューで「ドキュメントに関する履歴を保存」をチェックしてファイルを保存するだけです。もちろん、このブランチ保存機能の分岐に関する履歴もしっかり保存されます。

以上、かなり長くなってしまいましたが、Affinity Designerのウェブ制作に役立つ便利な機能でした！

ウェブ制作でAffinity Designerを使う際の注意点

ここからは、注意点を2つ紹介します。Affinity Designerをウェブ制作に使ってみて、事前に知っていたら楽だったのにと思ったことです。

少数ピクセルに注意

まず一つ目は、少数ピクセルについてです。

以下のいずれかに小数点以下の数値が含まれていると、上のスライドのように、ピクセルで書き出す際に図の境界線がにじんでしまうので注意が必要です。

オブジェクトのサイズ
オブジェクトの位置
アートボードの位置

小数が発生するケース。Affinity Designerのツールバーのキャプチャ画像

上のスライドのツールバーのキャプチャ画像にあるように、Affinity Designerには「ピクセル配列を強制的に適用」や「ピクセル全体で移動」などの補助機能があって、ある程度までならサイズや位置に小数が含まれないようにコントロールできます。

それでも、以下の場合はどうしても少数が発生してしまいます。

グループをリサイズするとき
テキストにスナップするとき
計算式でリサイズするとき

グループをリサイズすると、グループ全体は整数でも、なかにある要素のサイズや位置が少数になる場合もあります。テキストはそもそも小数を含むサイズになってしまう場合が多いので、テキスト要素に他の要素をスナップさせると位置に小数が含まれてしまいます。また、変換パネルで計算式を使ってサイズの変更をすると、意図せずに小数が発生することもあります。

これらに気をつけないと、書き出したら境界線がにじんでいたなんてことや、画像サイズがおかしくなることもあります。意識していないと知らぬ間にこういったことが起こっている場合もあります。デザインの全工程を通して気をつけて作業したほうが良いです。後で苦労します。僕は後で苦労しました。。。

ピクセル・ライブプレビュー機能

そんな時のためにAffinity Designerにはピクセル・ライブプレビューという機能がついていて、ピクセル表示をプレビューすることができます。

ツールバーの「Pixel表示モード」をクリックすると、ピクセル表示になります。また、上のスライドのようにベクターとピクセルで画面を分割して表示するには、表示メニューから「表示 → ビューを分割」を選ぶか,キーを押します。

書き出す前にピクセル・ライブプレビューで確認するというワークフローにしても良いかもしれませんね。

環境設定のユニットタイプの小数位の設定にも注意

環境設定のユーザーインターフェイスパネルのキャプチャ画面。「ユニットタイプの小数位」のピクセル設定部分がオレンジの丸で囲まれている

あと、環境設定のユーザーインターフェイスパネルに「ユニットタイプの小数位」という設定があって、ここのピクセルの設定を「0」に変えても上で紹介した問題は解決しませんのでご注意ください！

僕は勘違いしていて、ここを「0」に設定すれば、デザイン要素のサイズも位置も小数を含まないようにできるのかと思ったら、ユーザーインターフェイスでの表示だけでした。

実際には小数を含むサイズなのに、ただ表示されていないだけです。これも、僕はやってみて気づいて後で苦労したのでご注意ください！

さて、最後にもう一つ注意点を紹介します。

書き出したSVGに要注意

Affinity Designerで書き出したSVGを、そのままCSSで背景画像として使うとIE11で背景画像が中央寄せになってしまいます。詳しくはこの記事を参照いただきたいですが、現状、回避策としてはテキストエディタなどでSVGファイルを開いて編集をするのが良さそうです。

この問題はsvgタグのwidthとheight属性が「100%」だと発生します。なので、この2つの属性の数値を、上のスライドのようにピクセル値に修正する解決します。

僕の場合、コーディングをしてブラウザチェックの際にこれに気づいて、原因究明と解決にかなりの時間を費やしてしまいました。ご注意ください！！

以上、ウェブ制作に役立つAffinity Designerの使い方と注意点でした！

質問など遠慮なくTwitterでお声がけください。@rriver でお待ちしてます。

あと、最後に1つ宣伝です。

今年はAffinityアドベントカレンダーを作ってみたので、ぜひ、見てみてください。みなさん、Affinityに関する情報を共有してくれています。ありがとうございます。

それから、過去の日付でもかまいませんので、よかったらご参加ください！

Macで色のコントラストがチェックできる2つのカラーピッカーツール

2019/12/19 0:56 | 制作・効率化ツール

今年はWebアクセシビリティ Advent Calendar 2019 )に参加させてもらいました。18日目の記事です（すみません、19日になってしまいました。。。）。

以前、このブログで「Contrast」という色のアクセシビリティをチェックするツールを紹介したことがあるんですが、その後に試した2つの有料アプリをご紹介します。Contrastは色のアクセシビリティのチェックに特化したツールですが、今回紹介する2つのアプリはコントラストチェッカー機能が付いたカラーピッカーです。

Macのみです。Winユーザーの方々、ご容赦を。。。

まずは1つ目。

Sip

Sip はコントラストチェッカー機能が付いた多機能カラーピッカーです。$10で1年間分の更新がついているライセンスが購入できます。ライセンスが切れたら半額で更新、または、その時点のバージョンを継続して使えます。

Sipのコントラストチェッカーが便利なのは、ツール内で色を調整したり、コントラストに問題がある場合は自動でAAAに準拠する色を選んでくれるところです。

Contrastのようなツールだと、コントラストに問題がなくなるまで何度も色を画面からピックする必要がありますが、Sipのコントラストチェッカーの場合、その場で色を調整してコントラストに問題のない色を選ぶことができます。便利ですよね。

ツールのメニューから「Check Contrast」を選ぶとコントラストチェッカーが表示されます。

他にもこんな機能があって便利です

画面から拾った色をあとで使えるパレットに保存・編集する機能
拾った色やパレットに簡単にアクセスできるDock機能
色をCSS Hex、CSS RGBA、独自のカスタムフォーマットでクリップボードにコピーする機能

続いて2つ目。

Kelir Pro

Kelir Pro もコントラストチェッカーが付いた多機能カラーピッカーです。Mac App Storeで250円で購入できます。Kelir Proのコントラストチェッカーの良いところは、どのレベルのコントラストに準拠しているか一眼でわかるところです。

たとえば、以下の2つの色を選んだ場合、AA Largeには準拠するけどAA NormalやAAA Largeには準拠しないというのがわかります。

ちょっと不便なのは、Sipのようにコントラストチェッカーから直接色が拾えないところです。コントラストチェッカーで選べるのは履歴に残っている色だけなんですね。

他にもこんな機能がついてます

拾った色の色合いや補色から色を選ぶ機能
画面から拾った色をあとで使えるパレットに保存・編集する機能
画像から色を拾う機能
グラデーションを確認する機能

他にもいろいろあるコントラストのチェックツール

今回ご紹介したのはコントラストのチェック機能がついたカラーピッカーですが、コントラストをチェックするツールは他にもいろいろあるんですね。無料で、しかもMacとWinの両方で使えるものや、WebAIMのContrast Checkerのようなブラウザ上で動くものもあります。いろいろ試してみる価値ありそうですね（すみません、検証できてません）。

ということで、Macで色のコントラストがチェックできる2つのカラーピッカーツールのご紹介でした！

macOS CatalinaのAlfredで同じアプリが2回表示される問題の解決法

2019/10/18 9:32 | 制作・効率化ツール

macOS CatalinaのAlfredで同じアプリが2回表示される

macOSをCatalinaにアップグレードすると、Alfredで同じアプリが2回表示される場合があります。

これは、Alfredで「reload」とタイプして実行すれば解決します。

この「reload」を実行するとアプリケーションのキャッシュやリロードのスクリプトがクリアされるので、同じアプリが2回表示されなくなります。Settings > Advanced > 「Clear Application Cache」をクリックしても同様に解決します。

Alfred 4.0.5を使っている場合

Alfred 4.0.5のアップデートではAlfredの初回起動の際に自動でCacheをクリアしてくれるようになっているので、Catalinaにアップグレードする前にAlfredが4.0.5にアップデートされていた場合は、この問題は発生しないはずです。

Alfred 3でも最新バージョンの購入は必要ない…はず

Alfred 3でも同じ方法で解決するようなので、最新バージョンを購入する前にこの「reload」を試してみることをおすすめします。（自分はAlfred 4を使っていてAlfred 3では確認できていないので確実な情報でなくてすみません。。。）良いアプリなので購入してもいいんですけどねw 僕はMega Supporter（39ポンド）ライセンスを購入して永久無料アップグレードできるようにしています。

gori.meさんのCatalina関連の不具合情報まとめの記事に「最新バージョン購入で解決」と書かれているんですが（10月18日 9:00現在）、購入は必要ないと思うのでお気をつけください。gori.meさんの記事にはコメントを入れておきました。ありがたい記事なので、気付いて修正してもらえるといいな…。

そのほかの注意点など

Alfred公式のヘルプサイトにCatalinaについてのまとめページがあったので、そちらを参照されることをおすすめします。まとめページの要点は以下の通りです。

Alfred 4を使っている場合

4.0.5のアップデートが出ているので、アップデートされていることを確認
Catalinaの最新のアップデートをインストールする
同じアプリが2つ表示されたら「reload」をタイプする
探しているアプリが出てこなかったらSettings > Features > Search ScopeのところにあるResetボタンをクリックして、Alfredで「reload」をタイプする（新規インストールの場合はアプリがインデックスされるまで数時間待つ）

Alfred 3を使っている場合

Alfred 3でも使える。3.8.5以上にアップデートされているか要確認
Alfred 3ではiTunesのMini Playerが使えなくなる

その他のAlfred関連の記事

macOS CatalinaにするとVirtualBoxで発生するWindows 10のクラッシュがアップデートで解消

2019/10/17 11:05 | 制作・効率化ツール

macOSをCatalinaにアップグレードしたらVirtualBox 6.0.12でWindows 10を起動するとクラッシュするようになってしまいました。2019年10月17日10:00現在、このバグが修正された6.0.14が公開されているのでインストールすると良いかもしれません。僕の環境ではアップデートをインストールしたら問題が解消されました。いまのところ問題なく動いています。

Catalinaへのアップグレード後に発生したVirtualBox 6.0.12のバグ

僕の場合、macOSをCatalinaにアップレードしたらVirtualBox（6.0.12）自体は問題なく起動するのですが、Windows 10を起動してウィンドウを切り替えたりリサイズしようとすると、すぐにクラッシュしてしまう症状が出ました。

バグとして報告されていて、VirtualBoxのフォーラムでも同じ症状が出ている方がたくさんコメントをあげていました。

回避策もいくつか紹介されていて、僕も6.0.14のアップデートが公開されるまでは、こちらで紹介されていたヘッドレス起動を試してましたが、Win10の動作がすごく遅かったです。

さいごにひとこと

いろいろなところに多大な影響を及ぼすOSのアップデートは慎重に！

そのひとことに尽きます。

新機能を使いたい気持ちをグッとこらえて、1〜2カ月待って、さまざまなアプリがアップデートされてからOSをアップグレードするのが良いですね。どうしてもアップグレードしたかったら予備機を用意してやるとか、そのほかの方法でやるとか。

SVG背景画像でwidthとheight属性が100%だとIE11で中央寄せになってしまうバグ

2019/10/11 21:52 | ウェブ制作・運営ノウハウ

先日、予想外のところでIE11のバグ（現象？）に出くわしたのでメモしておきます。

svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します（アスペクト比が同じ場合、バグに気づきません）。

※SVG伝道師の松田さんが「一概にバグではないと思う」とツィートされていたので参考までに仕様へのリンクを記事の最後に追記しておきました。

バグが発生する条件とデモ

実際の表示はデモページでご覧ください。IE11で見ると一番最初の三日月だけ、中央寄せになってしまっています。

デモはこちら

このバグはSVGとCSSで以下のサンプルコードのような指定をすると発生します。

SVG

下の画像のようにサイズが132 x 160pxの三日月のSVGでwidthとheight属性に100%を指定します。

<svg width="100%" height="100%" viewBox="0 0 132 160" version="1.1" ... >

CSS

SVGと同じ高さ（160px）で幅（400px）が違う領域にSVG画像を背景として指定します。背景画像は左上に配置されるようにleft topを指定します。

.box-moon {
  width: 400px;
  height: 160px;
  background: #002667 url(../img/sharp-moon-default.svg) no-repeat left top;
}

表示の違い

IE11では三日月が指定領域の中央に配置されますが、最新版のChrome、Firefox、Safari、Edgeなど、そのほかのブラウザでは左寄せに配置されます。

対処法

対処法は簡単です。widthとheight属性をpx値で記述すればIE11でも他のブラウザと同様の表示になります。

<svg width="132" height="160" viewBox="0 0 132 160" version="1.1" ... >

問題が発生した理由

最近、制作にはAffinity Designerを使ってるんですが、SVGを書き出すとデフォルトではwidthとheight属性に100%が記述されます。そのSVGをそのまま背景画像として使用したため、今回のようなバグに出くわしました。

Affinity Designerでは、SVGを書き出す際に「viewBoxを設定する」というオプションを外せばwidthとheight属性がpx値で記述されますが、その場合viewBoxが記述されなくなります。viewBoxの記述がないと別の問題が発生するので避けたいところです。

Affinity Designerの「書き出しペルソナ」のSVG書き出しオプション画面

ということで、現状、書き出したSVGをテキストエディターで開いてwidthとheight属性の値を修正しています。

Adobe Illustratorでは？

Adobeは契約してないのでIllustratorのSVG書き出しでどのような記述がされるか確認できませんが、IllustratorでもSVGを書き出して使う際は注意した方が良さそうです。

さいごにひとこと

IE11はIE9以前のブラウザと比べるとそこまで悪いブラウザだとは思っていなかったので、今回のバグは意表を突かれた感じでした。対処法がシンプルなのでそこまで大きな問題ではないですが…

今回のケースのように、SVGの書き出しはグラフィックソフトの仕様によっては気付きにくいバグが発生することもあるので注意が必要です。

【追記1】そもそもバグではないのかも？

SVG伝道師の松田さんが「一概にバグではないと思う」とツィートされていて、関連する仕様へのリンクもつぶやかれていました。こちらにも仕様へのリンクを追加しておきます。

IE11が間違っているのか、それとも松田さんがツィートされているように他のブラウザの忖度なのか、僕にはちょっと判断できかねますが、この仕様の2つのセクション（7.2と7.12の部分）を読む限りではIE11の解釈が間違っていて、他のブラウザの解釈が正しいようにも思えるような？

この記事で紹介した事象は、7.2 The initial viewportに書かれている以下の3つの条件（要約してます）にあてはまるので、SVGの背景画像の幅はCSSの指定に従うIE11以外のブラウザの解釈があっている、というのが今のところの僕の見解です。

SVGが外部リソースとして読み込まれている
CSSでスタイルが指定されている
CSSポジショニング・プロパティが指定されている

もうちょっと確認が必要…

SVGにwidthが記述されてない時ってどうだったけ？というのを確認するために、VirtualBoxでWin10を起動しようと思ったらクラッシュするので、確認できたらまた追記します。ちなみに、これはmacOSをCatalinaにアップグレードすると発生するVirtualBoxのバグなんですが、2019年10月15日にリリースされた6.0.14で修正されているようです（10/16 10:00現在、.dmgファイルが見当たりません）。

その後…

この記事で紹介したデモページで確認すると、SVGにwidthが記述されていない場合、IE11ではほかのブラウザと同様に背景が左寄せで表示されました。「If either of these are not specified, a value of ‘100%’ must be assumed.」と仕様に書いてあって、ここで言う「these」はwidthとheight属性のことで、それらの属性が記述されていない場合は100%が想定されるとのことなので、100%が記述されているときと表示が違うのはおかしいです。

よって、これは「バグ」と言ってもいいのかな？いいとも〜。ということで、いいのかな？ご査収よろしくお願いします。

ウェブ制作に便利な各ブラウザの開発ツール「キャッシュ無効化」機能

2019/10/07 19:48 | 制作・効率化ツール

コードを書いて、ブラウザでチェックして…
画像を書き出して、ブラウザでチェックして…という作業をしていて、ブラウザのキャッシュが残っていて困ったことってありませんか？

そんな時に便利なのが開発ツールのキャッシュ無効化機能です。Firefox、Chrome、Safari、Microsoft Edgeのそれぞれの開発ツールに搭載されている機能です。ちょっとしたことなんですけど、知っているのとそうでないのとでは作業効率がだいぶ変わってくるんですよね。

以下、各ブラウザの開発ツールで設定を変える方法です。

Firefoxの開発ツールのキャッシュ無効化

Firefoxの開発ツールで「ネットワーク」タブを開くと「キャッシュを無効化」というオプションがあります。ここにチェックを入れるとツールボックスが開いている時はキャッシュが無効化されます。

Firefoxの開発ツールのネットワークタブが表示された画面。オレンジの矢印で「キャッシュ無効化」のオプションが指し示されている

開発ツールの設定からオプションを変更する

開発ツールの設定画面からも同様に設定を変更できます。

Firefoxの開発ツールの設定を開くためのメニューが表示された画面。オレンジの矢印でメニュー部分が指し示されている

設定画面の「詳細設定」の下にある「HTTPキャッシュを無効化（ツールボックスが開いているとき）」オプションから設定を変更できます。

Firefoxの開発ツールの設定画面。オレンジの矢印でオプションの表示場所が指し示されている

Chromeの開発ツールのキャッシュ無効化

開発ツールを開いて「Network」タブを選択すると「Disable cache」というオプションがあります。このオプションにチェックを入れると開発ツールを開いている間はキャッシュが無効化されます。

Chromeの開発ツールでNetworkタブを開いた状態の画面。オレンジの矢印でオプションの表示場所が指し示されている

開発ツールの設定からオプションを変更する

ChromeでもFirefoxと同様に開発ツールの設定画面からもオプションを変更できます。

Chromeの開発ツールの設定画面を開くためのメニューが開いている状態の画面。オレンジの矢印で設定メニューが指し示されている

設定画面の「Network」の下にオプションを変更するチェックボックスがあります。

Chromeの開発ツールの設定画面。オレンジの矢印で当該のオプションが指し示されている

Safariの場合

Safariの開発ツールでネットワークタブを開くと、下の画面キャプチャのように左の方にアイコンがあって、そのアイコンをクリックすると「リソースの読み込み時にリソースキャッシュを無視」ができます。

Safariの開発ツールのネットワークタブを開いた画面。キャッシュを無効化するオプションがオレンジの矢印で指し示されている

Microsoft Edgeの場合

Microsoft Edgeでは開発ツールの「ネットワーク」タブに「常にサーバーから更新する」というオプションがあります。

Microsoft Edgeの開発ツールでネットワークタブを開いた状態の画面。オレンジの矢印でオプションが指し示されている

各ブラウザのバージョン

ここに記載した情報は以下のブラウザのバージョンの時点のものです。開発ツールは機能の名称や場所が頻繁に変わる場合もあるるので要注意です。

Mac / Win Firefox 69.0.2
Mac / Win Chrome 77.0.3865.90
Safari 13.0.1
MS Edge 44.18362.329.0

さいごにひとこと

以上、各ブラウザの開発ツールでキャッシュを無効化する方法のまとめでした！ただでさえやることが多いウェブ制作なので、ちょっとしたところでミスをしないように、便利なツールは使いこなしていきたいですね。開発ツールには様々な便利機能があるので、僕も使いこなせるように一つ一つ学んで行こうと思っています。

では、Have fun building websites!!

ノートPCをディスプレイにつなげて作業するならノートPCスタンドがおすすめ

2019/10/05 15:47 | IT・ガジェット

ウェブ制作をする時はMacBook Proにサブディスプレイをつなげて作業してるんですが、先日、ふと2つのディスプレイの高さが違って作業効率が悪いことに気がついてしまいました。位置が低い方のMacBook Proを覗き込むことになるので姿勢も悪くなるし。首回りが疲れて肩こりの原因にもなりそうなんですよね。

そこで、以前から少し気になっていたノートPC用の折りたたみ式スタンドを買ってみました。

結果、大正解！でした。

2つの画面が近くなって、ものすごく作業がしやすくなりました。高さが違うだけでこんなにも違うもんなんですね。驚きました。姿勢も良くなったし、こんなことならもっと早く買っておけば良かったw

ノートPCをサブのディスプレイにつなげて使ってる方には絶対おすすめです。

折りたたみ式ノートPCスタンド

Amazon Japanで2,000円ちょい（購入時は2,199円）で購入できるこちらの製品です。僕が買った製品は在庫切れになっていたので、まったく同じと思われる製品にリンクを代えておきました。。。が、さらにその製品も在庫切れなので「2020年最新の改良版」という製品があったのでリンクしときます。こちらだと高さ調整できないですが、考えてみれば僕は一番高いのしか使ったないのでいいのかも。

お手頃な価格で、
6段階で高さ調節ができて、
使わない時は折りたたんでしまえる。
製品の作りもしっかりしてます。

Amzon Japanには似たような製品がたくさん売ってますが、これにして良かったんじゃないかと思ってます（比較をしたわけではないので…）。

こんな製品です

折りたたんだ状態はこんな感じです。

裏には高さ調整用の溝がついてます。

ノートPCに傷がつかないようにシリコンパッドが付いています。

MacBook Proを乗せるとこんな感じです。一番上と下で結構高さが変わります。

折りたたんだ状態の厚さはこんな感じです。重量はけっこう重いので、持ち運びに向いているかというと微妙です。バックパックに入れて持ち歩く分には許容範囲だと思いますが…

MacBook Proの上に折りたたんだノートPCスタンドを乗せた写真。厚さの比較

デスクはこんな感じになりました。

ノートPCを置くスタンドなので、それなりのサイズがあってスペースが必要になります。

恐れ多くも、家にあった一番分厚い本のSteve Jobsの伝記を台にしてみたりしたんですが…やっぱりこれでは低かったですw

さいごにひとこと

とくに誰かに頼まれたわけでもないんですが、超絶便利だったので紹介記事を書いてみました。ノートPCをサブのディスプレイにつなげて使ってるなら、ほんとオススメですよw

Alfredを複数ディスプレイで使うときに表示するスクリーンを選ぶ方法

2019/09/10 16:26 | 制作・効率化ツール

複数ディスプレイを使って作業をする際に、いま見ているスクリーンにAlfredが表示されなくて不便だと感じたことはありませんか？

僕はウェブ制作などの作業をするときはMacBook Proをacerの外付けディスプレイにつなげて使っているんですが、AlfredがMacBook Proのスクリーンにしか表示されなくて不便だと感じていました。そこで、設定を探してみたらありました！作業中のスクリーンにAlfredを表示するオプションがあったんですね。

ただ、この設定が隠れていて見つけにくかったのでメモっておきます。

Alfredを表示するスクリーンを選ぶ方法

以下の手順で複数ディスプレイを使っている際にAlfredが表示されるスクリーンを選べます。

1. Alfredの設定画面を開く

まずはAlfredの設定画面を開きます。Alfredを表示させて⌘ + ,で設定画面を開きます。設定画面を開いたらAppearanceタブをクリックします。

2. AppearanceタブのOptionsを開く

ちょっとわかりづらいですが、Appearanceタブを表示させると左下のほうにOptionsボタンがあるのでクリックします。

Alfredの設定画面でAppearanceタブが表示されている画面のキャプチャ

3. Show Alfred onの設定を変える

Show Alfred onという設定で、Alfredを表示するスクリーンを選ぶことができます。

Alfredの設定画面でAppearanceタブでOptionsが表示されている画面のキャプチャ

設定の選択肢は以下の通りです。

AlfredのShow Alfred onの設定オプションの説明
設定	Alfredが表示されるスクリーン
default screen	システム環境設定のディスプレイで設定されているデフォルトのスクリーンに表示される（これがデフォルトの設定）
mouse screen	マウスカーソルが表示されているスクリーンに表示される
active screen	アクティブなウィンドウがあるスクリーンに表示される

僕の場合、はじめは「active screen」にして使ってみたんですがマウスカーソルがあるほうに出てきたほうが便利だったので「mouse sreen」に変更しました。

さいごに…

ということで、複数モニターでAlfredを使う際に、Alfredが表示されるモニターを選ぶ方法でした。

その他のAlfred関連の記事

ロゴをデザインする際に参考になる5冊の本

2019/07/27 16:17 | Bookレビュー

ロゴをデザインさせてもらう機会があったので、ブレスト用にロゴに関する本を図書館で何冊か借りてきて読んでみました。それぞれ違う良さがあったので、それぞれの概要と自分にとって参考になった点をメモしておきます。

特に最初の2冊は蔵書にしたいと思える内容でした。この2冊はいつでも手に取って見返せるようにしておきたい。以下、好きな順で紹介しています。

日本語のロゴ・メイキング
ロゴデザインのロジック
ロゴデザインのアイデア!
実例つきロゴのデザイン
新しい時代のブランドロゴのデザイン

日本語のロゴ・メイキング

ラフやスケッチ、色やフォントの検討案など、ボツ案を含む制作物（提出資料？）が見られる貴重な本です。掲載されている事例は25件ですが、この5冊の中では各事例の制作プロセスが一番詳しく載っています。

普段あまり表に出てこないボツ案なども含めた制作の過程が見られるのは貴重だと思いました。ロゴは見た目もさることながらコンセプトやクライアントと一緒に進める制作のプロセスが大切だと考えているので、個人的にはこの本が一番役に立ちました。

Amazon.co.jpのレビューで「掲載されているロゴの質もそこまで良くない」というコメントがありましたが、個人的には、それよりも大切なことがこの本からは学べると思いました。立案やラフからはじまり、どういった提案をして、なにがボツになり、なにが受け入れられて最終デザインとして残ったのかが見られるのはとても参考になりました。

気になった言葉

「実際に採用されたロゴがどのようなコンセプトで作られ、造形的なブラッシュアップをされていったのか？そのメイキングを25事例紹介します。」（p.2）

ロゴデザインのロジック — 同業者に語りたくなるグラフィックとブランドイメージの関係性とひみつ

アイデア集めやロゴ制作の勉強に役に立つ本です。
65組織のロゴについて、組織の概要、ターゲット設定、ブランディング展開、ロゴのねらい、キーコンセプト、デザインコンセプト、それから展開例が簡潔にまとめられています。ビジュアル・デザインだけでない各社のロゴ制作へのアプローチ方法が載っているので、ロゴ制作のロジックが学べてすごく参考になります。

それぞれのロゴの「ねらい」 → 「キーコンセプト」 → 「デザインコンセプト」の順に読んでいくと、デザインの意図や課題の解決手法がわかりやすく学べます。ロゴを制作する際に必要な観点や視点、コンセプトをどうデザインに落とし込んだのかを具体例を見ながら学べるのは本当にありがたいです。

気になった言葉

「デザインは感性だけで制作するものではありません。『誰に対して、どのような目的でデザインしているのか』という、論理的なねらいが求められます。」（p.2）

ロゴデザインのアイデア! — 実例で学ぶ!! プロのデザインルール&テクニック

800点のロゴタイプやロゴマークが掲載されたデザイン見本集です。デザインテーマ別（勢いのあるロゴ、ひらめきのあるロゴ、表情のあるロゴ、親のあるロゴなど）に整理されてロゴが紹介されています。また、他の4冊にはない「ロゴの基礎知識」というセクションで、ロゴ制作の基本のキ的なことが学べます。すごく基本的な内容ですが、制作プロセスや制作の際の注意点をもう一度整理するのに役に立ちました。

気になった言葉

言葉ではないですが、p.19に載っていたロゴのイメージを2軸のマトリックス型で表したチャート（下図参照）がわかりやすくて良いと思いました。

ロゴのイメージを明確にするための2軸のマトリックス型チャート。縦軸の上に「冷たい・クール」、下に「温かい・親しみを感じる」。横軸の左に「伝統的・安定感」、右に「新しい・スピード感」が配置されており、ロゴのイメージがどこに位置付けられるべきか丸を入れる。この図では右下に丸が入っていて「新しい・スピード感」があり「温かい・親しみを感じる」をロゴのイメージに位置付けている

自分のロゴ制作の際にもクライアントとのイメージ確認のために活用させてもらいました。上図のように、これから制作するロゴのイメージをどの辺に位置付けたいか丸をつけてもらいました。この位置付けをあらかじめクライアントと確認しておくと、細かいデザインの選択や決断の際に指標になって役に立ちます。

実例つきロゴのデザイン

業種カテゴリ別に企業のロゴと展開例が数多く掲載されています。業種ごとにどのようなロゴが制作され展開されているのかが見られます。たくさん掲載されているので、アイディア集めや脳内ブレストに役立ちそうです。また、インタビューのチャプターが2つあって、合計6企業のロゴ制作の過程が詳しく読めます。インタビューではブランディングのどの部分を、ロゴを使ってどのように解決しようとしたのか、また、ロゴがどのようなコンセプトで作られたのかが見られて参考になります。

気になった言葉

「ブランディングにおいてのロゴの役割は、目に見えない価値やイメージを具現化し、消費者とのコミュニケーションツールのひとつとして、広くブランドを浸透させていくことです。」（p. 4）

新しい時代のブランドロゴのデザイン — ダイナミック・アイデンティティのアイデア97

単にロゴマークをデザインするのではなく、現代の情報消費に合わせてロゴをブランディングに有機的に活用する方法が紹介されています。ロゴの「システム」をデザインして、統一されたブランド・イメージを保ちつつも多様なビジュアル・アイデンティティを構築する方法です。ロゴのデザインというよりは、ロゴを中心にしてどのようにブランドの世界観を作れるかが学べる本です。

「システム」を作って、ある一定のビジュアル・ルールを守りながらも、より柔軟に展開されたロゴの事例が多く紹介されています。より高度な手法ですが、共感を得るためのブランディングには効果的だと感じました。

気になった言葉

「『ダイナミック』なVIを作るためには、モーションだけでなく、もっと自由が必要だ。例えば、構成要素のどれかを、次々に姿を変える可変的なものにする。そうすれば、VIはより柔軟になるだろう。固定された構成要素は、ユーザーがブランドを認識する手立てとなる。しかしその一方で、可変的な要素こそが、ブランドに命を吹き込み、進化の余地を生み出すものになり得るのだ。」（p. 10）

WordPressデータベース復元の際にphpMyAdminで「Incorrect format parameter」エラーが出た時の対処法

2019/04/19 14:19 | ウェブ制作・運営ノウハウ

phpMyAdminでWordPressのデータベースをインポートしようとしたら「Incorrect format parameter」というエラーが出てきて困ったので対処法をメモっておきます。MacでMAMPを使ってローカル環境にWordPressブログを復元しようとした際に起こったエラーです。

結論から言ってしまうと、データベースのファイルサイズが大きすぎて読み込めないのが原因でした。「Incorrect format parameter」というエラーの内容からは想像できなかったので戸惑いました。エラーの文言を変えて欲しい。あと、Firefox（66.0.3/Mac）だと、そもそもインポートできなかったので要注意です。Chrome（73.0.3683.103/Mac）では問題ありませんでした。

エラー画面は以下のように表示されます。

解決方法

MAMPのphp.iniで設定を変えることで問題が解決しました。
変更したのは以下の2つの項目の値です。

php.iniで変更した設定項目
設定項目	変更前	変更後
upload_max_filesize	2M	32M
post_max_size	8M	32M

僕の場合、データベースファイルが13.6MBだったので、上の2つの設定を余裕を持って32Mにしました。これで、データベースファイルが大きくなっても、しばらくは設定変更しなくて済むでしょう。

php.iniの設定確認

MAMPを立ち上げて「Open WebStart Page」をクリックするとMAMPのスタートページがブラウザで開きます。

メニューの「TOOLS」から「PHPINFO」を選ぶとphp.iniに設定されている項目の値が一覧で表示されます。

このページで、先ほどの2つの項目を検索すると設定されている値が確認できます。

php.iniの保存場所

PHPINFOの「Loaded Configuration File 」の値を見ると、php.iniの保存場所が確認できます。

僕の環境では以下にありました。

/Applications/MAMP/bin/php/php7.2.14/conf/php.ini

php.iniの編集

php.iniをテキストエディターで開いて、先ほどの2つの項目を変更します。

post_max_size = 8M
upload_max_filesize = 2M

それぞれの項目の値を以下のように変更します。

post_max_size = 32M
upload_max_filesize = 32M

MAMPでサーバを再起動してPHPINFOを確認して、値が変更されていれば設定完了です。

僕の場合は、これで問題なくデータベースファイルをインポートできるようになりました。ちなみに、インポートには結構な時間がかかります。

各種バージョンのメモ

エラーが発生した際の、アプリやサーバのバージョンは以下の通りでした。

アプリとサーバのバージョン
MAMP	5.3
phpMyAdmin	4.8.5
MySQL	5.7.25

ちなみにWordPressのデータベースは以下の環境でエクスポートしたものです。

エクスポート元の環境
MySQL	5.5.59-log
phpMyAdmin	3.3.10.5

MAMPでMacのローカル環境にSSL（https://localhost）を設定する方法

2019/04/01 0:13 | 制作・効率化ツール

Macのローカル環境でSSL（https://localhost）を使えるようにするための設定方法をまとめました。手順が複雑で忘れてしまいそうなんで（「NHKなんで…」的に）。

（追記: 2021年3月7日）この記事の方法よりも簡単な方法があったので違う記事にまとめました。よければそちらをご覧ください。

この記事を書いた時点では僕の環境（macOS Catalina 10.15.5 / MAMP 5.5）では問題なありませんでしたがMAMP 6.0でApacheが2.4にアップデートされ設定の変更が必要になりました。情報を追加したので、MAMP 6.xをお使いの場合はそちらの設定変更もお忘れなく！この設定を変更したらmacOS Big Sur 11.2.2 / MAMP 6.3で問題なく動きました。

サーバ証明書と鍵を作る

以下の手順でサーバ証明書を設定します。以下の作業はすべてコマンドラインで行います。opensslというツールが必要になるのでHomebrewなどでインストールする必要があります。

最終的には以下の2つのフィルを作成するために一連の作業を行います。

server.crt（サーバ証明書）
server.key（サーバ秘密鍵）

以下、すべて/Applications/MAMP/conf/apache/内にkeysというディレクトリを作って作業をします。まずはディレクトリを作って、そのディレクトリに移動しましょう。

$ cd /Applications/MAMP/conf/apache/keys/

1. ローカル認証局の秘密鍵を作る

$ openssl genrsa -des3 -out local-ca.key 2048

パスフレーズを聞かれるので、入力してメモっておきます。あとで使います。

2. ローカル認証局の証明書を作る

$ openssl req -x509 -new -nodes -key local-ca.key -sha256 -days 1825 -out local-ca.pem

先ほどメモったパスフレーズを入力すると、いろいろ質問されるので「Common Name」のところだけ「localhost」と入力して、残りはEnterを入力します。

Enter pass phrase for local-ca.key:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) []:
State or Province Name (full name) []:
Locality Name (eg, city) []:
Organization Name (eg, company) []:
Organizational Unit Name (eg, section) []:
Common Name (eg, fully qualified host name) []:localhost
Email Address []:

これでlocal-ca.pemという（オレオレ）ローカル認証局の証明書ができました。

3. サーバの秘密鍵を作る

$ openssl genrsa -out server.key 2048

4. 証明書署名要求（CSR）を作る

ここでもいろいろ質問されるので「Common Name」のところだけ「localhost」と入力して、残りはEnterを入力します。

$ openssl req -new -key server.key -out server.csr

5. Extension Fileを作る

以下の内容でv3.extというファイルを作成します。次のステップで使います。

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

6. サーバ証明書を作る

$ openssl x509 -req -in server.csr -CA local-ca.pem -CAkey local-ca.key -CAcreateserial -out server.crt -days 1825 -sha256 -extfile v3.ext

これでApacheの設定に必要な2つのファイル作成が完了しました。

server.crt
server.key

キーチェーンに証明書を追加する

ChromeとSafariで下のキャプチャのようなセキュリティの警告が表示されるのを防ぐために、キーチェーンに証明書を追加します。Firefoxはこの設定をしても警告ページが出てきます。Chromeは73.0.3683.86、Safariは12.1 (14607.1.40.1.4)、Firefoxは66.0.2で確認しました（いずれもmacOS Mojave 10.14.4）。

local-ca.pemをキーチェーンに追加する

先ほど作ったlocal-ca.pemというファイルをキーチェーンに追加します。キーチェーンアクセスを開いてサイドバーの「システム」にファイルをドロップします。パスワードを入力すると、以下のように「localhost」の証明書が追加されます。

証明書をダブルクリックするとウィンドウが出てくるので、「信頼」を開いて「この証明書を使用するとき：」のドロップダウンから「常に信頼」を選びます。

これで設定は完了です。

MAMPとApacheを設定する

はじめに注意！もしもの時のために、以下で変更する設定ファイルはバックアップを取っておきましょう。ちなみに、ここで使っているのはMAMP 5.3です。

MAMPでApacheのポートを80にする

MAMPの「Preferences」の「Ports」で「Apache Port」を80にします。

httpd.confの編集

MAMPのApacheの初期設定ではSSLの設定ファイルの読み込みがコメントアウトされています。httpd.conf（Apacheの設定ファイル）で、以下のように「#」を取ってコメントを外します。

# Secure (SSL/TLS) connections
Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

httpd-ssl.confの編集

「SSL Virtual Host Context」のセクションの以下の4つを変更すれば設定完了です。

httpd-ssl.confで設定する項目
項目	設定
DocumentRoot	サイトのルートディレクトリ
ServerName	localhostに設定
SSLCertificateFile	さっき作ったserver.crtファイルを指定
SSLCertificateKeyFile	さっき作ったserver.keyファイルを指定

僕のローカル環境では以下のように設定されています。

##
## SSL Virtual Host Context
##

<VirtualHost _default_:443>

#   General setup for the virtual host
DocumentRoot "/Users/rriver/Sites/parashuto.com/site"
ServerName localhost
ServerAdmin you@example.com
ErrorLog "/Applications/MAMP/Library/logs/error_log"
TransferLog "/Applications/MAMP/Library/logs/access_log"

#   SSL Engine Switch:
#   Enable/Disable SSL for this virtual host.
SSLEngine on

#   SSL Cipher Suite:
#   List the ciphers that the client is permitted to negotiate.
#   See the mod_ssl documentation for a complete list.
SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL

#   Server Certificate:
#   Point SSLCertificateFile at a PEM encoded certificate.  If
#   the certificate is encrypted, then you will be prompted for a
#   pass phrase.  Note that a kill -HUP will prompt again.  Keep
#   in mind that if you have both an RSA and a DSA certificate you
#   can configure both in parallel (to also allow the use of DSA
#   ciphers, etc.)
SSLCertificateFile "/Applications/MAMP/conf/apache/keys/server.crt"
#SSLCertificateFile "/Applications/MAMP/conf/apache/server-dsa.crt"

#   Server Private Key:
#   If the key is not combined with the certificate, use this
#   directive to point at the key file.  Keep in mind that if
#   you've both a RSA and a DSA private key you can configure
#   both in parallel (to also allow the use of DSA ciphers, etc.)
SSLCertificateKeyFile "/Applications/MAMP/conf/apache/keys/server.key"
#SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server-dsa.key"

httpd-ssl.confのSSLMutexの記述を編集する（MAMP 6.0以降のみ）

MAMP 6.0からApacheが2.4.xにアップデートされたので、httpd-ssl.confにあるSSLMutexという記述を修正する必要があります。MAMP 5.xを使っていてApacheが2.2以前のバージョンの場合は修正の必要はありません。Apacheの2.2から2.4へのアップグレードの公式ガイドのページにも、この設定を変更するよう記述がありました。僕のMAMP 5.5の環境では、この部分の変更なしで動いています。

MAMP 6.0以降の場合、Apache 2.4からSSLMutexの設定が無効になったため、この設定を変更しないとエラーが出てサーバーが起動しません（厳密に言うと、SSLMutexがMutexという設定項目に変更された）。そこで、設定を以下のように変更します。

該当箇所

SSLMutex "file:/Applications/MAMP/Library/logs/ssl_mutex"

以下に修正します。

Mutex default

これで全ての設定完了です！

参考にさせてもらったサイト

以下のサイトを参考にさせていただきました。ありがとうございました！

更新情報

httpd-ssl.confの設定変更について情報を追加しました（2021/3/7）
macOS Big Sur 11.2.2 / MAMP 6.3で設定を確認して情報を追加しました（2021/3/6）

70歳のお父さんにサイト移行の手続きは難しい。Yahoo!ジオシティーズ終了の持つ意味

2019/03/15 6:11 | ウェブについての考察など

先日、Yahoo!ジオシティーズの終了に伴うサイト移行手続きで困っている知り合いのお父さんのヘルプをしてきました。70歳を超える方ですが、独自ドメインを取得して自分で20年近くウェブサイトを運営してきたそうです。なので、ウェブに関する知識はある程度持ち合わせている方でした。

サイトを見てみたら情熱あふれるコンテンツで、一所懸命アップデートしているのが伝わってくる内容でした。ウェブ制作をしている自分の職業柄、細かいデザインの部分だとかナビゲーションの分かりにくさだとか、サイトの作りが気にならなくもなかったわけですが。ページを見ていたら「発信したい！」「この情報を求めている人に伝えたい！」という思いが伝わってきて胸が熱くなりました。

アクセシビリティも、デザインも、最新技術も。どれも大切ですが、やっぱり一番大切なのは「伝えたい」という熱意なんですね。長年ウェブ制作やってますが、改めて気付かされました。

そして、「こんな素晴らしいウェブサイトを死なせてはいけない！」と、強く思いました。

3月末までの移行期限

3月末までにどうにか移行しなくてはいけないとのことで、はじめはメールのやり取りだけで作業だけは終わらせてしまおうと考えてたんですが、その後の運営のことも考えたら一緒に移行作業をした方が良いと思い直しました。そして、仕事帰りにお父さんのお宅にお邪魔して一緒に移行作業をしてきました。

ログインしていると見られる移行案内ページがあったので、その案内の内容をベースに順を追って作業をしていきました。

現状のセットアップの確認（ドメインやメールなど）
ファイルのバックアップ（ローカルにファイルが保存してあることを確認）
移行先サーバの新規登録
ホームページ・ビルダーのFTP設定の追加
移行先にファイルをアップロード
ドメイン設定の変更

「一緒に作業」がポイント

移行先は自分も使ったことがあるさくらのレンタルサーバかロリポップで迷ったんですが、お話したら結構ネットの知識がありそうだったので、ロリポップよりはましかと思ってさくらに決めました。ロリポップの方が初心者には親切かと思ったんですけどね。あと、年配の方でもポップなデザインがOKか確認したい気持ちもありましたが、そんな余裕は僕にはありませんでした。

途中、これは素人には絶対無理だろ。。。というハードルも一緒に乗り越えつつ、だいたい2時間程度で無事に作業を終了。あとはドメインの設定が反映されるのを待つだけというところまでやって、とりあえずその時の作業は完了。

大切なのはお父さんにプロセスをしっかり説明して、一つ一つ理解してもらいながら、自分で手を動かしてもらいながら進めることでした。僕が代わりに作業をすることは簡単です。でも、それをやってしまうと何か困ったことがあった時に、お父さんが自分で対処できなくなってしまいます。

無事に移行完了！！

知り合いのお父さんとは初対面でしたが、せっかくなので一緒にご飯を食べに行って、1時間ほど経ったあとページを確認してみたら無事に移行が完了していました！

移行が完了しているのを見たときは、なんかジワっと目尻が熱くなりましたw
自分のサイトのときは業務的にやってしまうので、そんなことないんですけどね。

お父さんが「夜中まで頑張ったけど、どうしても自分ではできなかった。サイトのファンとのつながりがなくなると思うと悲しくて…」みたいなことを言っているのを聞いていたので、移行が完了したときは余計に嬉しかったのかもしれません。

ということで、無事に移行が完了してよかったー！とりあえず一安心。

もう少し様子を見て、お父さんが次のアップデートを自分でできたら、ミッション・コンプリートですかね。その日まで、少しそわそわしながら見守りたいと思います。

※雑記ノートサイト「R note」に掲載した記事を、再編集してこちらにも掲載しました。

アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える

2019/02/25 6:41 | ウェブ制作・運営ノウハウ

前回の「アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）」の続きで、今回はもう少し複雑なテーブルについて（の考察を）まとめてみます。具体的に言うと行と列をスパンさせる場合のコーディングのやり方です。そもそも複雑なテーブルはシンプルなものに置き換えるという考えをベースにしつつ、列をスパンさせる場合のcolgroupと、行をスパンさせる場合のrowgroup + tbodyを使ったコーディングのやり方を整理してみました。

それ、本当に役に立つの？

はじめにネタばらし的に書いてしまうと、実は今回紹介するデータ・テーブルの例では、colgroupやrowgroupを使っても使わなくてもVoiceOverでの読み上げに違いがありませんでした。ググると出てくるidとheaders属性を使うやり方も試してみましたが、こちらも読み上げに変わりはありませんでした（idとheaders属性の使用はソースが煩雑になってしまってあまり現実的ではないです）。

なので「これって本当に役に立つのかな？」という疑問が残っています。

でも、テーブルの構造をソースコードで明示しておくことには意味があると思うので、基本的なコーディングのやり方くらいは覚えておこうと思います。ソースコードを読み取って解釈するのはVoiceOverだけじゃないですし。複雑なテーブルにせざるを得ない状況（クライアントの要望とか？）もあると思います。

ちょっと複雑なデータ・テーブルのコーディング

W3Cのウェブアクセシビリティ・チュートリアルの内容をもとに、自分なりに検証して必要だと思う内容を整理してみました。

今回まとめたのは以下の2つのコーディングのやり方です。

見出し列をグルーピングするcolgroupの使い方
見出し行をグルーピングするtbodyとrowgroupの使い方

実は、この「ちょっと複雑」というところがキモで、これ以上複雑な構造のテーブルは使わない方が良いと考えています。複雑なテーブルはユニバーサルにわかりやすくするのが困難なので、そもそもの構造を見直すのが得策だと思うからです。もちろん、目的によって判断基準は違ってきますが、より多くのユーザに、よりわかりやすく情報を提供したいのであれば、複雑な構造のデータ・テーブルはシンプルに再構成するなどの工夫をすべきです。

見出し列をグルーピングするcolgroupの使い方

まずは、列をスパンさせてグルーピングする場合のコーディングのやり方です。以下のようなテーブルのコーディングです。

サンプル1：メンバーの好き嫌い
	食べ物		スポーツ
	トマト	ピーマン	野球	柔道
トム	好き	嫌い	嫌い	好き
ジョン	嫌い	好き	嫌い	好き

ソースコード

全体のソースコードは以下の通りです。

<table>
  <caption>メンバーの好き嫌い</caption>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th rowspan="2">&nbsp;</th>
    <th colspan="2" scope="colgroup">食べ物</th>
    <th colspan="2" scope="colgroup">スポーツ</th>
  </tr>
  <tr>
    <th scope="col">トマト</th>
    <th scope="col">ピーマン</th>
    <th scope="col">野球</th>
    <th scope="col">柔道</th>
  </tr>
  <tr>
    <th scope="row">トム</th>
    <td>好き</td>
    <td>嫌い</td>
    <td>嫌い</td>
    <td>好き</td>
  </tr>
  <tr>
    <th scope="row">ジョン</th>
    <td>嫌い</td>
    <td>好き</td>
    <td>嫌い</td>
    <td>好き</td>
  </tr>
</table>

コーディングの要点

コーディングの要点は2つあります。

colgroup要素で構造を定義
scope属性でグルーピングした見出しと列をひもづける

それぞれ見ていきましょう。

1. colgroup要素で構造を定義

まず、colとcolgroup要素を使って列のグループ構成をtableタグのすぐ下に定義します。1つのセルをcol、スパンする列をcolgroup要素とspan属性を使って記述します。スパンさせるセルの数も含め、合計が見出しのセルの数の合計と同じなるようにします。

<table>
  <caption>メンバーの好き嫌い</caption>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>

<!-- 略 -->

2. scopeでグルーピングした見出しと列をひもづける

scope属性を使って見出しと列、見出しと行をひもづけます。まずは、scope="colgroup"でグルーピングした列とcolgroup要素をひもづけます。

<!-- 略 -->
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th rowspan="2">&nbsp;</th>
    <th colspan="2" scope="colgroup">食べ物</th>
    <th colspan="2" scope="colgroup">スポーツ</th>
  </tr>
<!-- 略 -->

それから、scope="row"で、行の見出しと行をひもづけます。

<!-- 略 -->
  <tr>
    <th scope="row">トム</th>
    <td>好き</td>
    <td>嫌い</td>
    <td>嫌い</td>
    <td>好き</td>
  </tr>
<!-- 略 -->

以上で、スパンさせたテーブルの構造をHTMLで明示することができました。

VoiceOverで読み上げると…

たとえば、上述したサンプルのテーブルで「トマト」を選択するとVoiceOverでは以下のように読み上げられます。

メンバーの好き嫌い、食べ物、トマト、行2、列2

トマトが「食べ物」のグループに属することがわかっていいですね。

ただ、その下のセル（好き）を選択すると、「トム、食べ物、好き」としか読み上げられないので、テーブルの構造を頭の中で描けてないとトマトのことを言っているのかピーマンなのかわかりません。

これを考えると、以下のようにテーブルを2つに分けた方が親切かもしれません。データの比較は難しくなるかもしれませんが、内容の理解が難しくなるよりはましだと思います。

メンバーの好き嫌い（野菜）
	トマト	ピーマン
トム	好き	嫌い
ジョン	嫌い	好き

メンバーの好き嫌い（スポーツ）
	野球	柔道
トム	嫌い	好き
ジョン	嫌い	好き

colgroupとscopeを入れない場合

ちなみに、colgroupやscopeを入れないバージョンを作ってVoiceOverで読み上げてみたんですが、読み上げ内容に特に変わりありませんでした。他のスクリーンリーダーやデバイスだと変わるのっでしょうか？この辺は今後の調査課題です。

ヘッダー行のグルーピングをするtbodyとrowgroupの使い方

今度は行をスパンするデータ・テーブルのコーディングのやり方です。以下のようなテーブルのコーディングです。

サンプル2：ボトムスの在庫
商品名	色	サイズ
パンタロン	赤	L、M、S
	青	L、S、XS
	緑	XL、M、XS
コーデュロイ	茶	XL、M、S
コーデュロイ	チャーコール	S、XS

ソースコード

全体のソースコードは以下の通りです。

<table width="100%">
  <caption>サンプル2： ボトムスの在庫</caption>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">色</th>
      <th scope="col">サイズ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">パンタロン</th>
      <th scope="row">赤</th>
      <td>L、M、S</td>
    </tr>
    <tr>
      <th scope="row">青</th>
      <td>L、S、XS</td>
    </tr>
    <tr>
      <th scope="row">緑</th>
      <td>XL、M、XS</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">コーデュロイ</th>
      <th scope="row">茶</th>
      <td>XL、M、S</td>
    </tr>
    <tr>
      <th scope="row">チャーコール</th>
      <td>S、XS</td>
    </tr>
  </tbody>
</table>

要点は以下の2つです。

tbodyでスパンした行をグルーピングする
スパンした行にrowgroupを指定する

1. tbodyでスパンした行をグルーピングする

スパンした行を以下のようにtbody要素を使ってグルーピングします。tbody要素は1つのテーブルで複数回使っていいんですね。僕はてっきり1回だけだと思ってました。

<!-- 略 -->
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">パンタロン</th>
      <th scope="row">赤</th>
      <td>L、M、S</td>
    </tr>
    <tr>
      <th scope="row">青</th>
      <td>L、S、XS</td>
    </tr>
    <tr>
      <th scope="row">緑</th>
      <td>XL、M、XS</td>
    </tr>
  </tbody>
  <tbody>
    <!-- 略 -->
  </tbody>
<!-- 略 -->

2. スパンした行にrowgroupを指定する

次にスパンしたセルにscope属性を使ってrowgroupを指定します。

<!-- 略 -->
      <th rowspan="3" scope="rowgroup">パンタロン</th>
<!-- 略 -->

これだけです！

VoiceOverで読み上げると…

たとえば、テーブルの外にフォーカスがある状態でパンタロンの青を選択すると以下のように読み上げてくれます。

ボトムスの在庫、パンタロン、色、青、行3、列2

ここまではわかりやすいですね。ところが、パンタロンの青のサイズ（L、S、XS）を選択すると、以下のように読み上げられます。

ボトムスの在庫、パンタロン、サイズ、L、S、XS、行3、列3

この読み上げだと、どの色のパンタロンなのかわからないですね。

テーブルを上から順番に読み上げていけば理解できるんですけどね。それでも、以下のようにテーブルを分割した方が親切かもしれません。

分割したテーブルの例

パンタロンの在庫
色	サイズ
赤	L、M、S
青	L、S、XS
緑	XL、M、XS

コーデュロイの在庫
色	サイズ
茶	XL、M、S
チャーコール	S、XS

さいごに

今回は、アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングのやり方をまとめてみました。結局、「本当に役に立つのか？」という疑問が残り、セルはスパンさせずにテーブルを分割した方が良さそうだという結論に至りました。

でも、colgroupやrowgroupなどの基本的な使い方は覚えておきたいと思います。VoiceOver以外のスクリーンリーダーが、よりわかりやすく読み上げてくれるかもしれないですし、こうやってコーディングしておけば将来VoiceOverが進化した時に、読み上げ方が変わっているかもしれません。

colgroupやrowgroupを指定するコーディングは、それほど手間のかかることでもないですし、基本に忠実にコーディングしていこうと思います。

では、Enjoy making accessible tables!

アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）

2019/02/05 6:13 | 制作・効率化ツール

先日、ふと「アクセシビリティを考慮したデータ・テーブルのコーディングってどうやるんだっけ？」と、思ったのでやり方をまとめてみます。これまでもセマンティックなコーディングはしていたものの、セマンティックス以外に注意すべき点はあるのか？データ・テーブルはスクリーンリーダーでどのように読まれるのか？が気になったので、調べて整理してみました。

主にWebAIMの「Creating Accessible Tables 」とWAI Web Accessibility Tutorialsの「Table Concepts 」という2つのサイトを参考にさせてもらいました。

ちなみに、データ・テーブルとはデータを表形式で表示する以下のようなテーブルのことを言います。

データ・テーブルの例
画像	オリジナル	91%	85%	81%
sample01.jpg	582KB	164KB	128KB	112KB
sample02.jpg	341KB	89KB	64KB	55KB
sample03.jpg	398KB	94KB	72KB	64KB
sample04.jpg	267KB	54KB	40KB	34KB

テーブルといってもシンプルなものから複雑なものまであるので、まずはシンプルなテーブルをコーディングする際に必要なことを「基本編」としてまとめます。複雑なテーブルについては後日整理します。

なにごとも、まずは基本から！

3つの基本

シンプルなテーブルのコーディングでは、以下の3つを確実に行います。この3つを守るだけでもデータ・テーブルをアクセシビリティを考慮したものにできます。

テーブルの説明を入れる
表の見出しを指定する
セルを適切な見出しに紐付ける

まずは基本を確実に、条件反射でできるくらいに習慣化できるといいですね。

1. テーブルの説明を入れる

見出しや説明なしにいきなりテーブルを見せられても（読まれても）わかりずらいので、テーブルの説明を入れます。テーブルの説明はcaption要素に入れることが推奨されています。~~caption要素で説明しきれない詳しい説明はsummary属性を使って書きます（あとで`summary`についても説明します）。~~

caption要素の使い方

caption要素は<table>タグのすぐ後に1つだけ入れます（1つしか入れちゃダメ！）。そして、このcaption要素にテーブルの短い説明を入れます。以下、コードの例です。

<table>
  <caption>テーブルの短い説明</caption>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

表示例

上のソースがレンダリングされると以下のように表示されます。CSSでスタイルは追加されています。

テーブルの短い説明
見出し1	見出し2	見出し3
データ	データ	データ

VoiceOverで読み上げると…

上のテーブルをVoiceOverで読み上げると以下のようになります。

テーブルの短い説明、表の開始位置です、2行、3列

caption要素が入っていないテーブルだと、最初のセルが選択された際に、セルの内容から読み上げられます。

見出し1、行1、列1、表の開始位置です、2行、3列

ちょっとした差ですが、いきなり見出しが読み上げられるので、テーブルの読み上げが始まったことがわかりづらいです。やっぱりcaption要素またはテーブルの前に説明が入っていた方が親切です。

summary属性について

複雑なテーブルの場合は、詳しい説明をsummary属性を使って書くのが良いという情報が散見されますが、summary属性はHTML5で廃止されているので使用は避けたほうが良さそうです（@bakeraさんにアドバイスいただきました）。代わりにaria-describedby属性やfigure要素を使った方法がW3Cウェブサイトで紹介されています。この辺は、複雑なデータ・テーブルについての記事を書くときに一緒に紹介できればと思います。p要素で説明を書いて、それをテーブルに紐づけるという方法です。

W3Cの仕様では、summary属性は非視覚メディア向けにテーブルの詳しい説明を書くために使うと説明されています。たとえば、複雑なテーブルで行や列がどのように構成され、それぞれのセルに何が入っているのかを詳しく説明するために使うものです。シンプルなテーブルではsummary属性は必要ない場合が多いです。

~~また、caption要素とsummary属性は明確に役割を分けられているので、両方を使う場合は同じ情報をリピートしても意味がありません。~~

※ summary属性はサポート状況がよくないので使わなくても良いという情報もありました。入れても無駄と考えるか、属性がサポートされる場合の付加情報として入れておくか。この辺は考え方次第ですね。

2. 表の見出しを指定する

th要素を使って、行と列、または、行か列のヘッダーを指定します。一番シンプルな例だと以下のようになります。

<table>
  <caption>テーブルの短い説明</caption>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

表示例

上のソースがレンダリングされると以下のように表示されます。CSSでスタイルは追加されています。

テーブルの短い説明
見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

VoiceOverで読み上げると…

上に示したようにthを使ってテーブルを組むとVoiceOverが見出しを認識してくれるので、列を移動した際にどの見出しの列にあるデータかわかるように「見出し」を先に読み上げてくれます。

たとえば「データ1」を読み上げてから「データ2」を選択すると「見出し2、データ2…」といったように読み上げられます。読み上げられているセルの見出しがわかりやすくて親切ですね。

行と列に見出しを入れる場合

では、行と列に見出しを入れるとどうなるか、もう少し現実味のある情報をテーブルに入れて見てみます。

<table>
  <caption>メンバーの趣向</caption>
  <tr>
    <th>メンバー</th>
    <th>好きなスポーツ</th>
    <th>嫌いな食べ物</th>
  </tr>
  <tr>
    <th>トム</th>
    <td>野球</td>
    <td>バナナ</td>
  </tr>
  <tr>
    <th>ジョン</th>
    <td>バスケットボール</td>
    <td>ベーコン</td>
  </tr>
</table>

表示例

上のソースがレンダリングされると以下のように表示されます。CSSでスタイルは追加されています。

メンバーの趣向
メンバー	好きなスポーツ	嫌いな食べ物
トム	野球	バナナ
ジョン	バスケットボール	ベーコン

VoiceOverで読み上げると…

VoiceOverを立ち上げて、テーブルの外にフォーカスがある状態でこのテーブルの「野球」を選択すると以下のように読み上げてくれます。

メンバーの趣向、トム、好きなスポーツ、野球、行2、列2

テーブルの外にフォーカスがあったので、まずはcaption要素にあるテーブルの説明を読み上げて、見出しの「トム」と「好きなスポーツ」を読み上げてから、選択されたセルの内容「野球」を読み上げてくれます。

次に「ベーコン」を選択すると以下のように読み上げてくれます。

ジョン、嫌いな食べ物、ベーコン、行3、列3、表の終了位置です

次に「バスケットボール」を選択すると以下のように読み上げてくれます。

好きなスポーツ、バスケットボール、行3、列2

スクリーンリーダーがコンテキストを理解して、必要ない見出しを省略してくれるんですね。たとえばもっと大きなテーブルだったら、同じ列を読み上げてるのに毎回「ジョン」と言われても鬱陶しいですよね。

th要素で見出しを入れておくと、スクリーンリーダーがいい感じに読み上げてくれるのでテーブルの内容がわかりやすくなります。逆に、見出しを入れないと、選択されたセルの内容が読まれるだけなのでテーブルを最初から読み上げないと理解するのが難しくなります。

3. セルを適切な見出しに紐付ける

列と行の両方にヘッダーがある場合、どちらのヘッダーかを指定するscope属性を指定することが推奨されています。列のヘッダーにはscope="col"を、行のヘッダーにはscope="row"を入れます。

たとえば、以下のような記述になります。

<tr>
  <th scope="col">列ヘッダー1</th>
  <th scope="col">列ヘッダー2</th>
  <th scope="col">列ヘッダー3</th>
</tr>
<tr>
  <th scope="row">行ヘッダー1</th>
  <td>データ</td>
  <td>データ</td>
</tr>

ここで紹介しているシンプルなテーブルではscope属性がなくてもVoiceOverがいい感じに読み上げてくれます。ただ、スクリーンリーダーはVoiceOverだけではないので、デフォルトで入れるように習慣づけておいた方が良さそうです。そうすれば、より複雑なテーブルのコーディングの際にも忘れることなく記述ができます。

以上が、アクセシビリティを考慮したデータ・テーブルのコーディングの3つの基本でした。

その他の注意点

情報を集めていて、僕が気になった点をあと3つほど書いておきます。

セルをスパン（統合）させる場合

セルをスパン（統合）させる場合でもscopeは適用されるとのことですが、スクリーンリーダーなどによっては複雑な構造のテーブルはサポートされていないそうなので、できるだけフラットでシンプルなテーブルの構築を心がけたほうが良さそうです。（テーブルだけじゃなくて、他の要素でもそうですね。シンプルイズベスト！）

ちなみに、より複雑な構造のテーブルについてはheaders属性やid属性を使った記述方法もあるらしいですが推奨されていないそうです。どうしても必要になってしまった場合のオプションとして覚えておけば良さそうです。

セルの幅指定について

ページが横スクロールしないようにするために、セルの幅は指定せずにブラウザのウィンドウ幅に合わせた自動的なレイアウトに任せるのが推奨されています。文字が拡大された場合なども考えてセルの高さも指定しないほうが良いです。

とはいえ、幅を指定しないとテーブルが見にくくなるケースもあります。なので、幅を指定する場合はパーセントなどの相対値を使うことが推奨されています。

theadやtbodyについて

thead、tfoot、tbodyはアクセシビリティ的には意味がないそうです。ただ、プリントするときにテーブルが複数ページに印刷される場合に、ヘッダーをリピートしてくれるそうです（要検証）。長いデータ・テーブルの場合、印刷される確率も上がりそうなので入れておくと親切ですね。

以上、アクセシビリティを考慮したデータ・テーブルのコーディングの基本についてまとめてみました。

Let’s have fun coding accessible data tables!

参考にした情報

以下のページを参考にさせてもらいました。

summary属性の廃止について

更新情報

summary属性についてのセクションを修正しました（2019/2/6）
行と列の表記が逆になっていたので修正しました（2019/2/19）

iPadをセカンドディスプレイにできるDuet Displayの使い方

2019/01/09 6:23 | 制作・効率化ツール

Gatsbyサイトの制作の際やJS寺子屋の課題やReactのチュートリアルをやる際に、スクリーンが2つあったら便利なのにと思っていたので、iPadをセカンドディスプレイにできるDuet Display を入れてみました。インストールに少しばかり手こづりましたが快適に動いています。かなり便利です。

MacBookとiPadを持っていて、1度でもスクリーンスペース足りないなぁと思ったことがある方には絶対オススメです。ウェブ制作にも重宝します。

Macアプリは無料ですけど、iOSアプリの方は有料（購入時1,200円）なのでご注意を！

導入手順

導入手順は以下の通りです。

無料のMacアプリをインストール
有料のiOSアプリをインストール（期間限定50%OFFとのことで1,200円でした。ほんとに期間限定なのかな？）
Macアプリを起動する（ツールバーにアイコンが出てきます）
MacとiPadをケーブルでつなぐ
iPadでアプリを起動（最初に出てくる設定はスキップでOK）

僕の場合、最初はうまく認識されなくて、Macアプリで設定を変更しようとしたらフリーズしました。仕方なく再起動して再度試したら問題なく認識されました。以降、まったく問題なく動いています。

設定の手順は、サルワカさんの記事「iPadがサブディスプレイに！アプリ「Duet Display」の使い方」が詳しくてわかりやすかったです。

実行環境

僕の実行環境は以下の通りです。Macの場合はOS X 10.9以上でiOS 7以上のiPad全機種に対応とのことです。それから、Win 7以上でも使えるそうです。あと、試してないのでiPhoneにも対応とありますが役に立つかは不明ですw

Mac

MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports)
macOS Mojave 10.14.2
Duet 2.0.4.6

iPad

iPad Pro 9.7インチ
iOS 12.1.1
Duet Display 2.0.9

ケーブル

USB-C – Lightningケーブルは持っていないので、USB-C to USB-A変換アダプタをつけて使っています。それでも問題なく動いてます。これ↓↓

もう一つのオプション

もう一つのオプションとしてはLuna Displayがありますけど、こちらは80ドル近くするので高めの値段ですね。ワイヤレスは便利そうですけど、結局Macにドングルを刺すので利便性はあまり変わらないと思います。勝手な想像ですが、有線のほうが安定してそうだし。

さいごに

ということで、iPadをMacBookのセカンドディスプレイにできるDuet Displayの紹介でした。僕は「え？！無料なの！」と思ってMacアプリを入れたらiOSアプリが有料だったので「あら、そうんなんだ…」となりました。UX的には惜しいですが、高くないですし十分にその価値はあると思います。

活用して勉強しよう。そうしよう。

Enjoy learning!

2018年のRriverを振り返る

2018/12/30 12:16 | ウェブについての考察など

2018年もあと2日になりましたね。今年もありがとうございました。
このブログに書いたことが、わずかでも世界の誰かの（それが1人でも）役に立ったなら嬉しいです。

2018年に書いた記事を見ながら、この記事を書いたときはあんなこと考えてたなぁ、こんなことあったなぁと、いろいろ思い出しています。楽しいことも苦しいことも、ありましたね。

さて、それでは2018年のRriverを振り返ってみます。

2018年に書いた記事

2017年に引き続き週1本を目標にしてたんですが、「役に立つ」記事を週に1本書くのは簡単じゃないですね。今年は8月のGoogleのアルゴリズムアップデート（Moz – Google Algorithm Change History ）の影響で（たぶん）、このブログのアクセスが急激に下がってしまったこともあり、9月と10月はやる気をなくしてほとんど記事を公開しませんでした。仕事でもいろいろあったし、いま思い出すと、なんか辛い時期だったのかもなぁ。

アクセス数が全てじゃないですが、可視化しやすいのでついつい気にしてしまいます。でも、2019年は本数やアクセス数を意識し過ぎずに「役に立つ情報」を目指して書いていこうと思います。

2018年	46本
2017年	44本
2016年	42本
2015年	28本
2014年	15本

アクセスランキングトップ10

2018年に書いた記事の中で、年間を通してアクセスの多かった記事をご紹介します。

1. position: stickyの面白い使い方と使用時の注意点

2. CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法

3. スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」

4. JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた

5. CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い

6. CSS Gridでレイアウトやフレームワークの考え方・作り方が変わる

7. Apple Watch（watchOS 5）向けのレスポンシブ対応についてのまとめ

8. iPad向けのイラスト・UI設計・グラフィックデザインツール「Affinity Designer for iPad」が最強かも

9. 色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利

10. iPad Pro用に買った極薄・軽量のコンパクトBluetoothキーボードがかなり良い

さいごに

ということで、2018年の振り返りでした！
では、みなさま、良いお年をお過ごしください。

Enjoy 紅白!

「日本のウェブ制作者がメインに使うブラウザ」のアンケート結果とFirefoxに移行すべき理由

2018/12/21 22:20 | ウェブについての考察など

先日、Twitterで「ウェブ制作者がメインで使っているブラウザ」についてアンケートをしたら、なんと！542名に回答いただきました。結果は以下の通りです。アンケートにご協力いただいた方々、本当にありがとうございました！！

Chromeが85%って！

Chromeが多いのは予想はしてましたけど、ここまで圧倒的だとは思いませんでした。StatCounterの日本のデスクトップでのChromeのシェア（58.46%）と比べても、圧倒的に多いいですね。

ユーザシェアがトップのブラウザだし、開発ツールや拡張機能も充実してるからですかね？ウェブ制作者の方々が使っているブラウザなので、もう少し多様性に富んでいてもいいと思ったんですが、そうでもなかったですね。

ちなみに、StatCounterの2018年11月の日本でのデスクトップのブラウザシェアは以下のような割合になってます。

モバイルも含むすべてのプラットフォームの結果は以下のようにになります。

モバイルでは、まだSafariが頑張ってますけど、それでもChromeすごいですね。

Firefoxを使いませんか？

僕がこのアンケートを行った理由は、実はFirefoxをもっと応援したいからです。そして、なぜFirefoxを応援したいのかというと、Chromeが圧倒的なシェアを誇っていて、オープンなウェブがだんだんGoogle帝国に制圧されている気がしてならないからです。Googleのやっていることすべてが悪いとは思いませんが、力を持ちすぎると意図に反して良からぬことも起きますよね。

たとえば、Googleの検索結果でのAMPページの特別扱いとか。検索エンジンの圧倒的なシェアを利用して独自の仕様をごり押しすることも実際行われているんですよね。「Don’t be evil」マントラは失われてしまったんですね。

だから、「せめてウェブ制作者くらいはFirefoxを使いませんか？」と、思うわけです。
ブラウザの、そして、大きくはウェブの多様性を保つためにも「Firefoxを死なせることだけは避けないといけない」と、思うわけです。

やっぱり多様性は大切

では、なぜ多様性が必要なのか？

MicrosoftがEdgeでのChromiumの採用を発表したことで、Googleが大きな影響力を持つChromiumでの実装がウェブを支配することが確実になりました（いまでもそうですけど）。歴史を見ても、いまの世界情勢を見てもわかると思うんですけど、力が集中してしまうとろくなことが起こりませんよね？

Googleがあえて悪意あることをやるというのも考えにくいですし（こんなニュースもありますが）、オープンソースソフトウェア開発の「オープン」という言葉を信じたいですけども。それでも、先ほど書いたAMP関連の動きなどを見ていると、やっぱり不安になります。力を持つと善悪の判断バランスが変わってしまうんですね。

Chromiumに致命的な脆弱性が発覚したら

ちょっと視点を変えた例を挙げてみます。
たとえばChromiumに致命的な脆弱性が発覚して、Chromiumベースのブラウザがしばらくの間は危険で使えなくなったとします。その時、代替として安心して使えるブラウザがなかったとしたら？ウェブというプラットフォームが止まってしまいます。

単純にFirefoxが良いから

余談になりますが、そもそも僕がFirefoxを使っている理由は、単純にFirefoxが良いと思うからからです。Web制作に必要なDevToolsもアドオンも充実してますし、Quantumになってサクサク動いてChromeを使っている時よりもMacBook Proのファンがブンブン言わなくなった気がします。あと、UIデザインもFirefoxの方が好きです。それから、Firefoxのプライバシーやセキュリティに対する考え方のほうが僕は共感を持てます。

ただ、この辺は個人の好みもあったりするので、ここではあえて触れませんでした。ここで訴えたかったメインのポイントはそこじゃない、というか。それ以上のもっと大きな問題だから、というか。

ということで、Firefoxの良いところは、これから少しずつ記事にしていこうと思います。

追記: 2018/12/28

いまならまだFirefoxがある

でも、いまならまだFirefoxがあります。

前述した例のような状況に陥らないためにも、Firefoxには頑張ってもらわなきゃならないんですよね。そして、Firefoxに頑張ってもらうためには、ウェブ制作者の方々にはFirefoxでも問題なく挙動するウェブサイトやアプリを作ってもらわなくてはならないんですよね。さらに、Firefoxでおかしな挙動を見つけたらバグをレポートするようになったら最高です（まずは自分がやれよという話ですけど）。

選択肢がある、そして、選択できるということは素晴らしいことです。また、健全な競争が素敵なイノベーションを促すと思います。でも、多様性がなければ、それは不可能です。

ということで、今日からFirefoxを使い始めませんか？みんなでウェブを守りましょう！

Firefoxをダウンロード

GatsbyJS + Airtable + NetlifyでJAMstackな雑記サイトはじめました

2018/12/17 8:21 | ウェブ制作・運営ノウハウ

JAMstack な静的サイトジェネレーター（Static Site Generator）を試してみたかったので、雑記を書くためのサイトを作ってみました。（JAMstackってなによ？という方はこちら）

その名も「R note」。このブログ「Rriver」のノートという意味です。

いまのところ、主にGatsbyJSを使ったサイト制作についてメモを書き残しています。あと、このブログでは書かないような小ネタとか、その瞬間思ったことを、勢いにまかせてちょこちょこメモっていこうと思います。

今回使ったJAMstackの構成

静的サイトジェネレーターもいろいろあるし、Headless CMSやデプロイ用のプラットフォームもたくさんあるみたいなんですが、今回採用したのは以下の3つです。

この3つを組み合わせてゼロから構築しています。Gatsbyにはすぐに使えるテンプレート的なもの（Starter）があって、それを使えばブログ的なサイトはすぐに作れます。でも今回は勉強のために、あえてゼロから構築しています。おかげで、かなり勉強になってます。

GatsbyJS

GatsbyはReactベースの静的サイトジェネレーターで、Reactで作ったテンプレートを静的なHTMLに書き出してくれるツールです。Reactの勉強にももってこいです。似たツールにJekyll 、Hexo 、Hugo 、Nuxt などがあります。他にもまだまだたくさんあます。

Gatsbyを選んだ理由は、以下の4つが大きかったです。

ReactベースなのでReactの勉強にもなる
データソースを選ばない（Markdownファイル、WordPress、Contentfulなど、ファイルでもAPIでも、柔軟にデータを引っ張ってくる仕組みが整っています）
Gatsby自体の開発がアクティブ（最近バージョン2が出ましたし、出資も受けたとか）
ドキュメントとチュートリアルが充実していて、しかもわかりやすい。チュートリアルは一通りやれば仕組みや作り方が理解できます。

Airtable

コンテンツはAirtableというサービスを使って管理しています。Airtableに入力したコンテンツがGatsbyを経由して静的HTMLに書き出されます。Airtableは「チームでオンラインで便利にデータを管理しよう！」というサービスで、APIが用意されていてGatsbyで容易にデータにアクセスできるようになっています。

似たようなサービスにはFirebase 、Contentful 、GraphCMS などがあります。FirebaseはAirtableとNetlifyを合わせたようなサービスですかね？Googleがやってるサービスで、なんか強そう（何が？）ですね。Kayacさんが「徹底比較！Firebase vs Netlify (2018年版) – KAYAC engineers’ blog 」という比較記事を出してます。今後、Firebaseあたりを突っついてみたいと思います。強そうなんで。

Airtableを選んだ理由は2つありました。

1. UIがわかりやすい

Contentfulも試したのですが、Airtableの方がUIが一般向けでフレンドリーでした。Airtable使いやすいです。Contentfulは、もっと技術者寄りな感じです。雑記サイトなので、サクッと書いてサクッと公開したいので、シンプルでわかりやすいのを重視しました。

2. マルチプラットフォームでアプリが用意されている

Mac、iOS、Android、Windows向けにアプリが用意されていて便利です。ウェブアプリもしっかりしてるんですが、モバイルだと若干使いづらかったり、アプリの方がサクサク動いたり優勢な面もあるのでありがたいです。いつでもどこでも手軽に雑記をつけたいので、ここは意外と大きい要因になりました。

あと、今後誰かのためにGatsbyサイトを作ることを考えて、コンテンツ管理の快適さも意識してみました。他の誰かに使ってもらう場合には特に大切です。Airtableではデータのインポートも簡単にできました。

Netlify

Netlifyのサーバ上でコマンドを走らせてサイトを構築（build）してデプロイ（deploy）、ホスト（serve）するというのを自動化してくれるサービスです。基本的にはGithubなどと連携して、リポジトリに変更をプッシュするとサイトをデプロイしてくれます。

「静的サイトのホスティングサービス」と説明されていることが多いですが、それだとちょっと説明が足りないような？Netlifyのウェブサイトには「プラットフォーム」と書いてあるんですけど、それも漠然としていてなんだかわからないですしね。説明の難しいサービスですw

似たサービスはHeroku あたりですかね？ビルドとデプロイだけならDeployHQ とかBuddy というサービスも見かけました。あと、Firebaseもありますね。Netflixは違いますw

さいごに

ということで、GatsbyJS + Airtable + NetlifyでJAMstackでモダンな雑記サイトを作ったことのご紹介でした。この辺のツールやサービスについては、それぞれについてもう少し掘り下げて整理して、このブログでも書いていければと思っています。

サーバがなくてもツールやサービスを柔軟に組み合わせて、データを引っ張ってきてウェブサイトを作れるって、すごい便利な時代ですね。JAMstackは、すごく柔軟で自由な感じが気に入りました。条件や状況に合わせてツールやサービスを選んで、より最適なソリューションが構築できそうです。

昔はデータベースにはODBC経由でしか接続できなかったんですけどね（たぶんウソw）

最後にもう一度、雑記サイトの宣伝。「R note」の方もよろしくお願いします。

では、Let’s enjoy JAMstacking!

WordPress 4.9.9でSVGがアップロードできない！原因と応急処置

2018/12/16 11:45 | ウェブ制作・運営ノウハウ

このWordPressブログでSVG画像をアップロードしようと思ったら「セキュリティの理由によりこのファイル形式は許可されていません」とエラーが出てくるようになってしまいました。このブログでは「SVG Support 」というプラグインを入れて対応していたんですが、どうやらWordPress 4.9.9でプラグインが機能しなくなってしまったようです。

参考までに以前書いたSVGについての記事へのリンクです：

当面の対処法

当面は以下の2つの方法のどちらかで対処ができそうです。

1. プラグインを入れ替える

取り急ぎ、このブログでは「Safe SVG 」というプラグインに入れ替えて対処しました。こちらのプラグインは4.9.9でテストされていて、5.0.1にアップデートしたこのブログでも問題なく機能しました。

2. SVGファイルにXML宣言を追加する

SVGファイルをテキストエディタで開いてXML宣言が入っているか確認します。以下が入っていなかったら、SVGファイルの最初の行に追加します。

<?xml version="1.0" encoding="utf-8"?>

このブログで使っていたSupport SVGプラグインのSupportページでプラグイン開発者の方がコメントをしてくれていました。開発者の方は対策を講じたいと言っているのですが、一人で開発しているプラグインで、しかも、彼が今週手術するとかで、すぐに対応するのは難しいとのことです。大変な時に調査してコメントまで残してくれて、ありがたいですね。しっかり療養して治してほしいです。

functions.phpにMIMEタイプを追加してもダメだした

ちなみに、functions.phpに以下のfilterを入れてもダメでした。ここは関係ないみたいですね（というか、プラグインでこの辺が対処されてるはず）。

// Add SVG support
function add_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'add_mime_types');

原因

WordPress 5.0.1でアップロードされるファイルのMIMEの確認が強化されて、アップロードされるファイルの拡張子と内容がマッチしているか確認をするようになったとのことです。この辺が怪しそうですけど、SVGがアップロードできなくなったのは4.9.9なので、直接関係しているかはわかりません。（ひょんさんより「4.9.9も5.0.1と同じセキュリティアップデート」とのコメントをいただきました。4.9.9からSVGがアップロードできなくなったのは、MIMEの確認の強化が原因のようですね。）

アップロードファイルのMIMEの検証について

以下のページの「MIME validation for uploaded files」というセクションに該当する情報が書かれていました。

SVGファイルの検証について

また、コメント欄のconnoroharaさんのコメントに、SVGファイルの検証（Validation）について書かれていて、この辺が一番怪しそうです。

I do see a downside with SVG though. Most of the time, when an SVG is used, the <?xml?> tag is stripped. Adobe Illustrator does this by default when exporting to SVG. This leads to these SVG files to not pass validation.
Since SVG is becoming more and more popular nowadays (and for good reason!), I would say that an SVG should be validated in a different way, allowing SVG files with their <?xml?> stripped to pass validation, if possible.

以下、意訳です。

SVGについてはダウンサイドが考えられます。ほとんどの場合、SVGが使われる際には<?xml?>が削除されてしまいます。Adobe IllustoratorではSVGに書き出す際、デフォルトでそれが行われます。これが、それらのSVGファイルが検証を通らない原因になります。
SVGはますます人気が高まっているので（しかも良い理由で！）、可能であれば<?xml?>が削除されたSVGが検証を通るように、SVGは他の方法で検証されるべきだと思います。

僕がアップロードして失敗したSVGファイルは、確かに<?xml?>タグが入っていませんでした。Affinity Designerで「SVG(Web用)」として書き出したものです。ちなみに「SVG(書き出し用)」で書き出した場合、<?xml?>タグ（XML宣言）は残っていました。これだったらファイル検証をパスするのかな？

Safe SVGのSanitizationについて

これが原因だとすると、functions.phpにfilterを追加してもダメだったのが納得です。だけど、Safe SVGプラグインではどうやって対処してるんだろう？

Safe SVGではSVGファイルのチェックにsvg-sanitizer というライブラリを使っていて、セキュリティの問題がないかチェックしているそうです。もしかして、このSanitization（消毒）の際に<?xml?>タグを挿入してるのかな？

プラグインのサポートページの情報

以下、参考までにSVG Supportプラグインのサポートページに、2つのスレッドが立っていました。この辺を追っていったら、後日、もう少し詳しい原因と解決方法が見つかるかもしれません。

新たな情報が見つかったら、この記事に追加していきます。取り急ぎ、ご報告でした！

更新情報

追加の情報が出てきたので、情報を追加して文章を整理しました（2018/12/17）

Microsoft、レンダリング・エンジンの自社開発辞めるってよ

2018/12/11 14:30 | ウェブについての考察など

先日、MicrosoftがEdgeのレンダリングエンジンをChromiumのものに変更すると発表して話題になりました。賛否あるみたいですが、個人的には「Microsoftがやってくれた！」という気持ちと「オープンなウェブの未来は大丈夫なのか？」という心配とが混在していて、ウェブ制作者としては複雑な気持ちです。

ということで、今回の件について自分なりの考えを書き残しておこうと思います。

Microsoftの発表

Microsoftの発表はWindowsブログで見られます。

Today we’re announcing that we intend to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the web for all web developers.

以下、意訳です。

本日、デスクトップ向けのMicrosoft Edgeの開発においてChromiumオープンソースプロジェクトを採用する予定であることを発表します。これにより、私たちの顧客にはより良いウェブの互換性を、そして、すべてのウェブ開発者にはウェブの断片化の縮小を作ることが出来るでしょう。

今回の発表の要点

上述のブログ記事の内容から僕が読み取った今回の発表の要点は以下の通りです：

デスクトップ向けMicrosoft Edgeの開発にChromiumを採用する
ウェブでの互換性が向上する（Chromeでは見られるけどEdgeでは見られないといったことがなくなる）
開発者の負担が軽減される（HTML、CSS、JSが同じように解釈されるのでテストが楽になる）
サポート対象のWindowsのすべてのバージョンでEdgeが使えるようになる
OSのアップデートを待つ必要がなくなるため、Edgeのアップデートをより頻繁にできる
macOSなどの他のプラットフォームでの提供も可能になる（Macを使う開発者に気を使ってる？）
MicrosoftがChromiumオープンソースプロジェクトに、より大きく関わり貢献していく
Preview Buildを2019年初旬に公開する予定

Microsoftにとってはベストな選択

まず思ったのは、ブラウザ・シェアを落としてしまったMicrosoftとしては、現段階でできるベストな決断だということです。ここまで大胆な決断をできるとは！びっくりです。やりましたね、Microsoft。

開発用テキストエディターとしてシェアを伸ばしているVS Codeしかり、開発者の間で話題を耳にするようになったSurfaceしかり。最近のMicrosoftは、また面白くなってきたなぁという印象がじわりじわりと強まっています。ナデラCEOの功績が大きいんですかね？

Microsoftのメリット

MicrosoftはChromiumを導入することでOSSのリソースを活用できて、ユーザにとって、より互換性のある体験を提供でき、ウェブ開発者の負担を下げることもできる。また、Chromiumプロジェクトへの関わりを強めることで、ChromiumをWindowsにとって良いプラットフォームにすべく働きかけることができる。さらには、シェア・トップのChrome（Google）に好き勝手にされないように監視の目を光らせることもできる（少なくとも影響力を高めることはできるはずです）。

Edgeでシェアの奪回を図ったけど、難しかったから違う方法で攻める。3年間やってダメだったのだから賢明な判断だと思います。ただ、今回の発表のような巧妙な方法は想像もしませんでした。チェスをしてるみたいで、ビル・ゲーツ時代のMSの再来か？と、思ってしまいます。

プライドを捨てた闘いぶり

ある意味、Microsoftはプライドを捨ててますよね？

だって、Internet Explorerでブラウザの栄華を誇ったMicrosoftが独自のエンジンの開発を辞めて競合のものを採用するんですもんね。それでも、この決断ができたというのは、個人的にはすごいと思います。

瀕死状態のAppleにSteve Jobsが戻ってきた時に、Bill Gatesに支援を求めたのを思い出します。Macworld Boston 1997 でスクリーンにBill Gatesが出てきて大ブーイングをくらった時のことを鮮明に覚えています。懐かしいw Appleもあの時は起死回生でしたね。

オープンなウェブの未来は大丈夫？

オープンソースソフトウェア（OSS）コミュニティがどのように運営され意思決定がされるのか、まったく知識がなくて想像の域を逸しないですが、MicrosoftがChromiumへの貢献度を高めることで、各種開発や実装への意見を強めることが可能になると想像します。それを前提に考えると、Microsoftが、強くなりすぎたChrome = Googleの抑止力になるのでは？とも思えます。

であればウェブ全体にとってはそんなに悪いことではないのかも？と思います。どっちみちChrome（Chromium）の独占状態にあるのなら、MSが入ってきてくれた方がまだましなのかな、と思うんですよね。考えが甘いのかな？

この辺は、実際にOSS開発に携わっている方、また、経験がある方に話を伺ってみたいです。

業界最大手2社がウェブの未来を牛耳ってしまう？

懸念として残るのは、ウェブの基盤となるブラウザ・エンジンを業界最大手の2社が事実上牛耳ってしまうということでしょうか。オープンソースとはいえ、リソースを豊富に持つ者（GoogleとMicrosoft）が発言権を強くするような気がしますし。OperaはすでにChromiumを採用しているので、開発に参加していると思っていいのでしょうか？どうせなら、AppleやFirefoxもChromiumの開発に参加すればいいのに（WebkitやServo~~Gecko~~の開発は継続しつつ…）。そうしたら、違った未来が見えるような、見えないような？

参考記事

VSCodeのカラーテーマの詳細をカスタマイズする方法

2018/11/30 12:30 | 制作・効率化ツール

最近、巷で噂のVSCode（Visual Studio Code）を使い始めています。なかなかいですねw

で、カラーテーマはMonokaiにしてるんですが、いまいちアクティブなタブが判別しづらいんですね。デフォルトだとこんな感じです。

それで、カラーテーマの細かいカスタマイズをする方法を探してみました。

やっぱり、あるんですね。

カラー設定のカスタマイズ方法

VSCodeのカラーテーマのカスタマイズの方法は以下の通りです。

まず、 ⌘ + , で設定画面（Settings）を出します。

一番上にある検索ボックスで「color」と入力します。「Workbench: Color Customization」というセクションがあるので「Edit in settings.json」をクリックします。

エディターが出てくるので「workbench.colorCustomizations」という設定を追加します。ユーザ設定を変更する場合は「USER SETTINGS」、Workspaceごとにカスタマイズする場合は「WORKSPACE SETTINGS」のタブに設定を加えます。

他に何も設定が入っていない場合は、以下を丸々追加するとアクティブなタブの下にボーダーを入れることができます。

{
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#00ff6a"
  }
}

僕の場合は、すでにいくつか設定を変更していたので以下のようになりました。

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Monokai",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
	"editor.minimap.enabled": false,
  "workbench.editor.tabSizing": "shrink",
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#00ff6a"
  }
}

設定変更後

設定を変更した後は以下のような見た目になりました。デフォルトよりはマシなんじゃないかなぁ、とw

設定できる色の一覧

設定できる色の一覧はVS CodeのDocsで見られます。

Theme Color Reference

タブのテキストの色も変えたいんですが、それは見つけられませんでした…。

ちなみに、設定変更の説明もVS CodeのDocsにありました。

User and Workspace Settings

さいごに

ずっとAtomエディターを使ってきたんですが、巷で噂のエディターを試してみたかったのでVSCodeを使ってみています。ここ数日使ってますが、サクサク動くし拡張機能（Extensions）やカラーテーマも充実していていいですね。

他にも色々な便利機能がたくさんありそうなので、これから試していくのが楽しみです。

ということで、しばらくはVSCodeを使ってみようと思います。

Pages: 1 2 3 4 5 6 7 ... 16 17

画像配置の3つの方法

「画像」として配置される

1. レイヤーパネルに「レイヤー名（画像）」と表示される

2. 画像のサイズ変更や置換ができる

3. 画像の編集ができない

「ピクセル」として配置される

「埋め込みドキュメント」として配置される

スプレッド（ページ）の選択

ページボックス（表示境界領域）の選択

ドキュメントの編集

ドキュメントの置換

さいごに

その他のAffinity Designer関連の記事

バグの詳細

対処法1

対処法2

対処法3

メモ

flexbox関連のバグの他の記事

さいごに

バグの詳細

対処法

メモ

flexbox関連のバグの他の記事

さいごに

突撃！Rriverの在宅開発環境

メインの端末

ディスプレー

キーボード

マウス

スピーカー

机と椅子

在宅開発環境の良い点

通勤の時間とストレスがなくなる

作業に集中できる

無駄な浪費が減る

飲み物事情の改善

猫と一緒に過ごせる

在宅開発環境の悪い点

運動量が減る

食事の準備に時間がかかる

際限なく仕事ができてしまう

外見を気にしなくなる

今後、在宅開発環境をどうしたいですか？

さいごに

目次

macOS Catalinaのhostsファイルの場所

hostsファイルの編集

hostsファイルの記述方法

設定後の確認方法

DNSキャッシュをクリア／フラッシュする方法

DNSキャッシュをクリアする方法

キャッシュをフラッシュする方法

さいごにひとこと

Control Stripのリスタート

Touch Bar 全体のリスタート

MojaveとCatalina

SierraとHigh Sierra

さいごに

Apple製ワイヤレスキーボードの接続をリセットする方法

Firefoxで解像度を指定してフルページのスクリーンショットを撮る方法

モバイル表示でフルページのスクリーンショットを撮りたい場合

:screenshotコマンドのオプション

目次

既存の設定のバックアップ

個別にバックアップは必要ない？

最新版のMAMPをダウンロードしてインストール

設定ファイルの更新

ApacheとMySQLのポート番号の変更

Firefoxでセキュリティの警告画面が出る

さいごにひとこと

目次

動画版もあります

はじめに

アジェンダ

Affinityツールを好きな理由

グラフィックデザインをはじめたい方にも最適

フル機能iPad版もある、プロ向け本格ツール

Affinity Designerが一番好き！

Affinityでデザイン、イラレで清書というフローもあり？

【追記1】そもそもバグではないのかも？