ふたたび愛知県へ戻ります

刈谷ハイウェイオアシスの観覧車が好きです


2019年も半年を過ぎました。来年のお話をいただくことも多くなりましたので、早めにお知らせをいたします。

二年半ほど拠点としていた愛知県へ、ふたたび戻ることになりました。
今度は一時的な移住ではなく、永住をするつもりです。
年内を目処に、10月か11月頃を予定しておりますが、どのあたりに住むかなどは、まだ非公開とさせてください。

札幌へ戻った主な理由は、2016年当時の記事に書いたとおりですが、無理をして体調を崩してしまったこともありました。一番ひどいときは、夜中まで働いても全然仕事が進まないし、寝てもよく眠れないような状態でした。

その後、治療の甲斐あって以前より元気に明るく働けるようになりました。一年ほど前から、機会があればもう一度、大好きな愛知県で暮らしてみたいと思うようになり、この記事を書いています。

「前も暮らしていたから勝手はわかるし、なんとかなるさ」というノリですが、ぶっちゃけアテはありません。
名古屋周辺の皆様、冬季、来年度の案件がありましたらご相談ください。特に、a-blog cms・MovableType.net案件だととても喜びます。

引っ越して落ち着いたら、また車に乗ってお城を見に行きたいです。


投稿者名 うぇびん 投稿日時 2019年07月02日 | Permalink

a-blog cmsでシステムで処理できない曜日表記に対応する

2019-07-06追記
文中で「a-blog cmsのIFブロックは、エントリーの基本情報の日付は条件分岐で判定できますが、カスタムフィールドの値を校正オプションで変換したあとの日付はできないようなのです。」と書いていましたが、できます。死にたい。訂正してお詫び申し上げます。
いずれにしても、SetRenderedで変数化しておいた方が、サイト内の複数箇所で利用しやすいことは代わりありません。


曜日が丸囲み漢字になっている


画像のようなカンプを受け取りました。曜日が「丸囲み漢字」になっています。

丸囲み漢字はユニコードで表示できないことはありませんが、CMSで扱うのは困難です。かといって、画像を書き出してimg要素にしたり、CSSの:after疑似要素で丸を重ねたりすると工数が増えます。
カッコ囲みに変更させてもらおうかと思ったのですが、全体のデザインとのバランスを考えるとデザイナーさんの希望を叶えたいところでした。

実装した経緯を記事にしておきます。
お急ぎの方は「解決方法」からどうぞ。
WordPressでの解決方法もあります。こちらへどうぞ。

※文章の都合上「日付型カスタムフィールド」と書いていますが、普通の文字列です。a-blog cmsは、Y-m-d形式であれば日付フォーマットを適用できる仕様です。

マークアップ

望ましいと考えられるマークアップは以下です。
この記号は「日本語表記の略語」ですから、abbr要素でマークアップして、title属性に国際表記を付与します。lang属性も入れようかと思いましたが、文書自体が日本語だと宣言しているのでやめました。

<p>
<abbr title="Monday">&#12938;</abbr><br>
<abbr title="Tuesday">&#12939;</abbr><br>
<abbr title="Wednesday">&#12940;</abbr><br>
<abbr title="Thursday">&#12941;</abbr><br>
<abbr title="Friday">&#12942;</abbr><br>
<abbr title="Saturday">&#12943;</abbr><br>
<abbr title="Sunday">&#12944;</abbr>
</p>

上記のコードを表示すると以下のようになります。







a-blog cmsの「共通設定」を試してみる

a-blog cmsの「コンフィグ>共通」設定には、曜日をどのように表示するかという設定があります。通常は「日〜土」の普通の漢字表記ですが、任意の文字列に変更可能です。
この文字列は、エントリー関連モジュールの {date#week} 変数で表示できます。



じゃあ下のように書けばいいよね、と思ったのですが…

<p>
<abbr title="{date#l}">{date#week}</abbr>
</p>

ここで問題が発生しました。
今回は、日付型カスタムフィールドで日程を表示している箇所があったのです。

{entry_sample_date}[date('l')] → Sundayなどの英語表記

{entry_sample_date}[date('week')] → PHPのdate関数にはないので何も表示されない

a-blog cmsの日付型カスタムフィールドの場合、使えるフォーマットは「PHPのdate関数と同じ種類」となっています。このため、先程のa-blog cms独自のフォーマット変換は適用されません。

改めて、プログラムでの処理を考えることになりました。

出し分け方を考える

プログラムでの処理の流れを考えるとこのようになります。

  • エントリーの曜日を取得
  • PHPのDateフォーマットの「N」に変換し、1〜7の数値を取得
  • 数字を条件にabbrでマークアップした記号を出力

WordPressの例

WordPressであれば、get_post_time関数を利用することになるでしょうか。ifを使おうかと思いましたが、配列をそのまま呼び出した方がスマートですね。

<?php
    $week_mark = array(
        '<abbr title="Monday">&#12938;</abbr>',
        '<abbr title="Tuesday">&#12939;</abbr>',
        '<abbr title="Wednesday">&#12940;</abbr>',
        '<abbr title="Thursday">&#12941;</abbr>',
        '<abbr title="Friday">&#12942;</abbr>',
        '<abbr title="Saturday">&#12943;</abbr>',
        '<abbr title="Sunday">&#12944;</abbr>'
    );
    $week_number = get_post_time( 'N' ) + 1;

    // 番号に該当する曜日記号を出力
    echo $week_mark[$week_number];

?>

同様の処理をa-blog cmsのIFブロックで行おうとしたのですが…また、カスタムフィールドならではの問題が発生してしまいました。

<!-- BEGIN_IF [{date#N}/eq/1] -->
<abbr title="Monday">&#12938;</abbr>
<!-- ELSE_IF [{date#N}/eq/2] -->
<abbr title="Tuesday">&#12939;</abbr>
・・・

a-blog cmsのIFブロックは、エントリーの基本情報の日付は条件分岐で判定できますが、カスタムフィールドの値を校正オプションで変換したあとの日付はできないようなのです。

できます。失礼いたしました。

<!-- BEGIN_IF [{entry_sample_date}[date('N')]/eq/1] -->
<abbr title="Monday">&#12938;</abbr>
<!-- ELSE_IF [{entry_sample_date}[date('N')]/eq/2] -->
<abbr title="Tuesday">&#12939;</abbr>
・・・

さすがにちょっと悩みましたが、先月の合宿のハンズオンでやった、SetRenderedの利用が参考になりました。

カスタムユニットを動的化してみよう | 2019春合宿 | ハンズオン | a-blog cms developer
https://developer.a-blogcms.jp/hands-on/camp2019spring/entry-3132.html

解決方法

最終的に、以下のように構築して解決しました。これであれば日付でもカスタムフィールドでも対応できます。

1. 曜日用のテンプレートを作成する

vars_week.html」というテンプレートをテーマ内に作成し、以下の通り記述します。それぞれの変数名は「label_week_(数字)」で、数字は月曜日から日曜日まで、1〜7とします。

<!-- BEGIN_SetRendered id="label_week_1" --><abbr title="Monday">&#12938;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_2" --><abbr title="Tuesday">&#12939;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_3" --><abbr title="Wednesday">&#12940;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_4" --><abbr title="Thursday">&#12941;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_5" --><abbr title="Friday">&#12942;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_6" --><abbr title="Saturday">&#12943;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_7" --><abbr title="Sunday">&#12944;</abbr><!-- END_SetRendered -->

2. テンプレートを読み込む

曜日を使用する可能性があるテンプレートの冒頭で、この変数群テンプレートを読み込みます。

@include("/vars_week.html")

3. 変数を呼び出す

通常のエントリーの日付であれば以下のように記述します。

<!-- GET_Rendered id="label_week_{date#N}" trim="1" -->

Y-m-d形式のカスタムフィールドで、フィールド名が「entry_sample_date」であれば以下のように記述します。

<!-- GET_Rendered id="label_week_{entry_sample_date}[date('N')]" trim="1" -->

補足:校正オプションの自作

今回はやりませんでしたが、a-blog cmsは校正オプションを自作できますから
「Y-m-d形式の文字列を渡すと、先述のWordPressの場合の処理を通して、丸囲み漢字を返す」
という校正オプションを作ってしまう手もあります。

ただし、拡張を自作する場合は将来のバージョンアップやサーバー移転の際に漏れが出ないよう注意が必要です。

まとめ

こうして、丸囲み曜日を文書的にもシステム的にも問題なく表示できるようになりました。今回はたまたま丸囲み曜日でしたが、「弥生」とか「神無月」のような日本の古い月表記、a-blog cmsがサポートしていない言語の曜日表記にも使えますね。

なお、今回の場合、解決までに30分程度だったので問題なかったですが、時間がかかりすぎるようならカッコ囲みにさせてもらうなどの相談をしたほうが良いと思います。どのくらいかかりそうか、詰まったときに解決のヒントになりそうな引き出しがどのくらいで出てくるかで、そのあたりのバランスを考えています。

a-blog cms Traning Campのハンズオンは、毎回参考になることが多いので助かってます。アーカイブがあるのでぜひ見てみてくださいね。

https://developer.a-blogcms.jp/hands-on/


投稿者名 うぇびん 投稿日時 2019年06月30日 | Permalink

Qiitaで書いていたCMSの技術情報をこのブログに戻します

2019年6月30日時点のQiitaのマイページ


二年ほど、CMS関連の技術情報はQiitaで書くようにして、このブログは考え方や雑記としていましたが、今日からこのブログに戻します。

私のマイページはこちらでした。
https://qiita.com/webbingstudio@github

Qiitaで書いていた記事は、技術の散逸を防ぐ必要があるので、惜しいですがサービス終了まで残します。Qiitaへリンクを貼るだけのエントリーを作ることも考えましたが、Googleにスパム扱いされるかもしれませんし…

戻す理由

記事と著者が結びつかない

私もQiitaを利用していて感じたことですが、どんなに役に立つ情報を見つけても、記事の著者を意識することができません。
ブログ記事から情報を見つけた場合は、メインビジュアルや目立つところにある運営者のプロフィールを見てフォローなどを考えるのですが、Qiitaはそれができませんし、まったくしてもらえることもありませんでした。

技術情報をオープンソースのように扱うという理想をQiitaが追っているのであれば、これは理想的な設計かもしれませんが、私は技術者である前にフリーランスの個人事業主です。私を知ってもらえないと困るのです。

継続性が低いコンテンツしか読んでもらえない

以下は、私のQiitaのいいねランキングです。ほとんどがトラブルシューティングです。

まあこれも予想はしましたが、jQueryとWordPressばかりで、a-blog cmsとMovable Typeは一件もありません。一位に至ってはHomebrewです。よほどでない限り一回しか参照しないし、あと数年で不要になりそうな知識です。

私自身も、こういった継続性が低いコンテンツにはお世話になっているのですが、本業とは関係がないトラブルシューティングばかりいいねされるとテンションが下がります。
本業と関係ないけど、困っている人のお役に立ちたい記事だけQiitaに書く手もあるかもしれません。

「ブログ見てます」に応えたい

a-blog cmsのイベントへ行くと、「うぇびんさんのブログ見てます」「うぇびんさんのブログに助けられました」と何人かの人に言われます。お世辞ではなく本当にそう思ってくださっているようです。

a-blog cmsは国内の主要CMSのひとつとなりましたが、まだまだユーザー数は少ないです。Qiitaの記事を見に来た人と比べると微々たるものでしょう。ですが、そういう人たちのために記事を書き続けたいなと思っていますし、CMSブランドを問わない構築上の知識なども後進のために残したいと思っています。

というわけでQiitaに書いてもいいねされそうにない、マニアックな記事をまた一本書きます。


投稿者名 うぇびん 投稿日時 2019年06月30日 | Permalink

a-blog cms Training Camp 2019 Springに参加しました

2019年5月17日・18日の二日間、今年も半年に一度の「a-blog cms Training Camp 2019 Spring」に参加してきました。

https://ablogcms.doorkeeper.jp/events/87478/

前回は東京での開催となりましたが、今年の春はいつもの国際センターとベースキャンプ名古屋が会場です。
参加するともらえる、公式Tシャツも新しくなったので早速二日目に着ました。

一週間遅れになりましたが、イベントの主な内容と、最近のa-blog cmsコミュニティの動向をレポートします。


a-blog cms awards 2019授賞式



今回のCampの最大の見どころは「a-blog cms awards 2019」の結果発表でした。
a-blog cmsの公開事例をレポートも含め募集する、という、これまでにない本格的な公募企画です。a-blog cmsに限らず、CMSの構築を仕事にしている方なら参考になる事例集サイトにもなりました。ぜひ、サイトを見てみてください。

https://www.a-blogcms.jp/awards/

受賞した4サイトの雑感としては以下です。

影響?

この企画があった影響なのか、イベントの「ユーザー発表」の内容がいつもと大きく変わりました。
いつもは最新事例の紹介が中心ですが、新しい技術を試した実験的なレポートや、a-blog cmsを使い始めて三ヶ月の感想など、未来を見ている発表が多かったです。こんな事ができるのか…!という驚きも多く、活気があるCampになったと感じます。

リーグラフィさん


写真:水越祐介(株式会社リーグラフィ)

リーグラフィの水越さん

私は「いえズーム」で応募しましたが見事に落選しました。全力でレポートを書いただけに悔しくて商品のiPad Proを自腹で買ってしまったくらいです。

https://www.a-blogcms.jp/awards/case/iezoom.html

ですが、同じ札幌のリーグラフィさんがデザイン賞を受賞したのはとてもうれしいことでした。
リーグラフィの水越さんと平澤さんは、CSS Nite in Sapporoのサイトを共同運営していることもあり、だいぶ前からa-blog cmsの勉強会や協業を通して情報交換をしています。

今回、リーグラフィさんがawardsにたくさん素晴らしい事例を応募したので、いろいろな事情で勉強会の維持が難しい北海道のウェブ業界でも、検索などを通して注目してもらえるだろう、と願っています。

すずきカレーさん

ユーザビリティ賞を受賞した「リフォームのヤマハナ」を制作したのは愛知県の制作会社、ルーコの鈴木(すずきカレー)さんです。
汎用テーマを使用しているので一見オーソドックスですが、その裏側はCMS構築をしている人なら驚くような気配りにあふれています。「a-blog cmsは、PHPを書かずに高度な管理画面のカスタマイズが可能である」という事例でもあります。

鈴木さんは、かなりの古参ユーザーです。a-blog cmsに関する有用な記事を多数公開し、フォーラムでの投稿数もダントツで多いです。…が、非常に謙虚な人で、いつも申し訳なさそうにしていて、目立とうとしません。
先日、鈴木さんのインタビューが公開されましたが、やっぱり自分のことを「パワー控えめ」と言っています。awards受賞で、すずきカレーさんがもっと注目されればいいなあと思っています。

「 a-blog cms がクライアントの架け橋に。」”パワー控えめ”でも確かなスキルと信頼関係を築ける | ユーザーインタビュー

ユーザー発表の感想

非常に多くの発表があったので、一部の感想のみ書きます。すみません。

Ver.2.10について(アップルップル伊藤さん)

a-blog cmsは、アップデートが活発なCMSです。伊藤さんによる最新バージョンの紹介を毎回楽しみにしています。   2.9系までは新機能の追加が多かったのですが、2.10は根幹に関わる既存機能の見直しが行われました。

  • メディア機能の拡張
  • 管理画面スタイルシートの改良
  • サブカテゴリーの追加
  • コンフィグセットの追加(コンフィグの使い回しが可能に)

私は既にいくつかのサイトを2.10にアップデートしていますが、これだけの変更をして、テーマへの影響が最小限だったのがすごいです。

メディア機能は、WordPressと遜色ない機能になりました。伊藤さんのスライドを抜粋すると以下のとおりです。

  • 画像・ファイルの一元管理
  • メディア機能画面で画像の編集が可能になった
  • トリミングの際に被写体を指定できる
  • SVGに対応
  • ファイルに公開ステータスを追加
  • メディアを使うMedia_Bannerモジュールの追加

ただし、既存の画像ユニットからメディアユニットへの移行は工数がかかるし、両方を混在させると混乱のもとになるので、必ずしも採用しなくても良い、新規案件ならアリかも、といった話をされていました。

ここぞというときに使えるCSVインポート(ヘルツ筒井さん)

筒井さんの発表は、a-blog cmsのCSVインポートの事例と、活用する利点についてでした。
a-blog cmsはCSVインポート機能を標準で搭載しています。もちろん、プラグインは不要です!カスタムフィールドはもちろん、テキストやマークダウンであれば、ユニットとして移行することもできます。

他のCMSで運用されていた、コンテンツが多いサイトの移行の際は、CSVインポートが活躍します。また、新規追加だけでなく更新も可能なので、カスタムフィールドをスプレッドシートで編集して一気に書き換えるということもできます。

カスタムフィールドのデータを表敬式でPDFに書き出す方法(SUZULABO太田さん)

まったく知らなかったのですが、テキスト形式でデータを送ると、クライアントサイドでPDFを生成するスクリプトがあるのだそうです。

クライアントサイドでPDFを生成できる「pdfmake」を使ってみる | Tips Note by TAM

この「pdfmake」のデータをa-blog cmsのカスタムフィールドで生成して、表形式のPDFにして返すという事例の発表でした。
複雑な会員情報や食品のアレルギー情報の提供などをするコンテンツに大いに使えそうな技術で、久しぶりに何か理由をつけて実装してみたくなる発表でした。

a-blog cmsの初心者向けコンテンツを整備してる話(アップルップル井斉さん)

開発元の一番若い社員さんは、二年目の井斉さんと菅原さんです。今回は井斉さんの発表について書こうと思います。

井斉さんはこの一年間、a-blog cms関連の初心者が見るコンテンツの整備を進めていました。アップルップルに入社して、自分が学習をはじめたときに、チュートリアルのページ構成がわかりにくかったことがきっかけだったそうです。

プログラミング的思考に慣れていたり、他のCMSで豊富な構築経験があると、ちょっとくらい、文章の流れがずれていても理解できるようになります。また、書く側も反復学習とか文章の構造にに視点をおいて書くようになります。
ですが、そういう補完ができない初心者には、初心者向けの文書構造を考える必要があるのです。そういった、初心者の目線をまだ覚えている人にしかできない施策を説明されていました。

製品紹介動画は、すべてAdobe XDのアニメーションで作ったもので、ナレーションも井斉さん自身が声を当てている力作です。

もうひとりの菅原さんの発表も、すずきカレーさんの管理画面カスタマイズの基礎を解説した内容なので、a-blog cmsがこれからな人は見てほしいです。

私の1年間とa-blog cmsだからできる簡単UI対応 - Speaker Deck

グループワーク「a-blog cms川柳」

Campでは、毎回適当に班決めをして行う、グループワークがあります。昨年春はクイズ、昨年秋はかるた大会で、今年はどうなるのかと思ったら「川柳」でした。

限られた文字数で意味が通る文章にして、かつ、ウケを狙うというのはけっこう難しいです。私と、大阪のエバンジェリストの坂本さんがいる班ではこうなりました。3つのうち2つが内輪ネタです。

田村しか 使っていない レイアウト
だけだと、ワクグミの田村さんをdisっているようにしか見えませんが、レイアウト機能は新規作成の工数が高すぎて、頻繁に使用している田村さんしか有効活用できていないので、他のCMSのウィジェットのような、もっとシンプルな機能にしてほしいという要望が込められています。
私個人は、サイトの根幹に関わる設定が、エクスポートしにくいデータベース依存になってしまうという懸念もあります。

内輪ネタって、コミュニティの信頼関係を伝えるものでもありますが、躊躇います。初心者が多いWordPressコミュニティでは、よく「内輪ネタが多すぎてひく」という感想があって悩んだりしていると聞きます。私と坂本さんは、同じ班のはじめて参加した人たちに言葉の整理をしてもらったり、川柳に出てきた人のことを紹介したりしていました。

なお優勝は「その機能 有償ならば できますよ?」でした…
大規模案件あるあるですね…

私にとってのCamp


川邉さんの描く、謎のユルいイラストのファンです


今回は、関わっている人たちを軸にCampのレポートを書きました。ああまた長くなった。4時間もかかっています。

私が半年に一度、遠方から参加している理由は、もちろん最新情報を得るためでもありますが、私の精神的健康のためです。私が日々自宅から配信していることが、他のユーザーに届いていることを確認するのが目的になりつつあるのです。

金沢の15VISIONのデザイナー、川邉さんはウェブ制作だけでなく、商業漫画、イラスト、動画、最近はPythonにまで手を出しはじめている人です。
ですが、私について「うぇびんさんは、金沢でa-blog cmsの勉強会があることをTwitterで教えてくれて、それがきっかけでa-blog cmsに出会って、15VISIONに入った」と言います。川邉さんの最近のスキルを見るにつけ恐縮してしまいます。

それでも、こうして私が札幌でコツコツa-blog cmsの情報共有を続けていることが、日本の誰かに届いているというのはうれしくもありますし、今後も続けると思います。今回も「Twitterでa-blog cms関係のツイートを見ていたら悟空みたいにワクワクしてきた!」と言って参加された方がいました。

a-blog cmsはもうすぐ、リリース10年になります。既に国内のCMSでは屈指の機能とコミュニティを有している、安定したCMSになりました。
興味がありましたら次は8月くらいになりそうですが、札幌のCMS Mix「a-blog cmsの回」に来てください。
次回のa-blog cms Traning Campは11月ですよ!


投稿者名 うぇびん 投稿日時 2019年05月25日 | Permalink

ウェブ制作を2019年から勉強する人に教えたいこと


年に二、三回、初学者向けのHTML・CSS講座の講師をしています。対象は社会人ですから、生徒のほとんどは新人研修の一環で派遣されてきたか、企業のウェブ担をすることになった人たちです。

短い日程では、最低限のウェブサイトを作成するところまでを教えるまでが精一杯ですから、2019年の時点で学んでほしいこと、知ってほしいことを資料にまとめて終了後に渡しました。
許可を頂いたので、その資料の内容を記事として公開します。

理解しやすい表現を優先しているので、もやもやを感じる方もいるかもしれません。その場合はぜひ、補足記事などを書いて教えてくださるとありがたいです。

わかりやすいCSS設計



divでモジュール化しよう

ウェブサイトはページ内で、ナビゲーション、リスト、記事、写真ギャラリーなどの、多くの部品に分かれています。

HTML・CSSコーディングでは、これらの部品を「モジュール」と定義して、部品ごとにdivで囲んでクラス名をつける手法が主流となっています。
この手法で制作すると、二回目以降のサイト制作で部品を切り離して使いまわしたり、修正や間違いがあったときに編集しやすくなります。

<div class="sample">
    <h2 class="sample-title">サンプルモジュールのタイトルです</h2>
    <div class="sample-contents">
        <p>サンプルモジュールの本文です</p>
        <p>サンプルモジュールの本文です</p>
    </div><!-- /.sample-contents -->
    <p class="sample-link"><a href="more.html">詳しくはこちら</a></p>
</div><!-- /.sample -->

classの付け方

このとき、ほぼすべてのモジュールは「id」ではなく「class」で管理するのが望ましいとされています。idで定義したCSSは優先度が高くなり、編集や上書きがしにくくなるためです。
また「モジュール名+ハイフン+パーツ名」と、ハイフンつなぎで記述するのが一般的です。

※大規模サイトでは、アンダーバーを含む高度な記述が採用されることもあります(BEMと呼ばれています)。

以下の例の通り、階層もできるだけ浅くして定義するのが、最近の主流となっています。

.sample {
  ...
}

.sample-title {
  ...
}

.sample-contents {
  ...
}

.sample-contents p {
  ...
}

.sample-link {
  ...
}

.sample-link a {
  ...
}

見出しは要素名で定義しない

「.sample-title」クラスに注目してください。「.sample h2」と書いてもよいはずですが、クラスを作成しています。
これはマークアップの都合や他のサイトへの使い回しで、見出しがh2要素ではなくなったときに、修正が発生しないようにしているのです。

見出しレベルはコンテンツによって変動するので、見出しは要素名で定義しない方が柔軟な設計ができます。

モバイル対応



なぜモバイルに対応する必要があるのか?

スマートフォンが登場した2008年以降、スマートフォンでウェブサイトへ訪問する割合は非常に高くなっています。
幅が狭いモバイル端末での読みやすさに配慮するのはもちろんのことですが、検索エンジン最大手のGoogleが、「モバイル端末に対応していないと判断したウェブサイトの検索結果での評価を下げる※」ことを公表しているため、2019年現在では、ほぼすべてのウェブサイトのモバイル対応が必須となっています。

※デスクトップ専用サイトとして判定するため、モバイル環境においての順位判定に影響する、という意味です。モバイル対応さえしていればコンテンツがめちゃくちゃでも良い、という意味ではありません。

モバイル対応ではないと判定される主な基準

  • モバイル端末の画面幅でコンテンツが画面からはみ出す
  • リンクボタンのクリックできる範囲が小さい
  • リンクボタン同士が近すぎる
  • 表示速度が遅い

最低限行いたいこと

「ウィンドウの幅を縮めたときに、下にスクロールバーが出ないよう制作する」のが最低限の対応となります。
以下の工夫で、コーディングの知識が浅くてもモバイル対応は可能です。

  • widthではなく、max-widthで幅を指定する
  • 画像に「max-width: 100%;」「height: auto;」を指定する(画面サイズに合わせて伸縮するようになります)
  • table等の、幅の扱いが難しい要素の使用を避ける

レスポンシブウェブデザインとは

表示している端末に応じてレイアウトを変更させるウェブデザインの手法は、「レスポンシブウェブデザイン(RWD)」と呼ばれています。 画面サイズを条件として適用するCSSを変更する「メディアクエリ」という手法を活用します。

メディアクエリの使い方

これは、画面サイズが768ピクセル(タブレット縦持ち)以上のときに、見出しのサイズを24ピクセル、かつ中央寄せにする例です。
スマートフォンでは基本値の18ピクセルとなります。

※一般にはfont-sizeの単位はem・remを使用することが多いですが、初学者には概念の理解が難しいので、サンプルはピクセルとしています

h2 {
  font-size: 18px;
}
        
@media (min-width: 768px) {
  h2 {
    font-size: 24px;
    text-align: center;
  }
}

モバイルファースト

上の例の通り、スマートフォンのCSSを定義してから、タブレットのとき、デスクトップのとき、と上書きしていく方が制作がしやすいです。また、シンプルな画面から作りはじめることで、無駄のない設計ができます。
この考え方は「モバイルファースト」と呼ばれています。

古いデザインのサイトが減っている理由

15年ほど前まで、ページ全体のレイアウトはtable要素(巨大な表)や、フレームセットと呼ばれる、画面を分割する技術で作られていました。古いブラウザがCSSを正しく解釈できなかったため、安定して表示できるこれらの技術は広く普及していました。

table要素で作ったサイトは幅が固定されているので、小さな画面で適切に表示できません。このためここ数年はリニューアルが盛んに行われ、それに伴って、古いデザインのサイトは消えつつあります。

俳優の阿部寛さんのウェブサイトは、当時の技術で作られたHTMLを現在も更新し続けており、「貴重な技術遺産」と呼ばれています。興味がある人はソースコードをのぞいてみてください。

http://abehiroshi.la.coocan.jp/

エディタ


サイト画面:Sublime Text

Sublime Text公式サイト


ウェブ制作向けのエディタ

講座では、今後の講座との関係で「統合開発環境」と呼ばれるアプリケーションを使用することがあります。ですが、ウェブ制作のみを行っている技術者は、もっとシンプルな「テキストエディタ」と呼ばれるアプリケーションを使用しています。

テキストエディタと統合開発環境の違い

動作が軽い

機能が少ないため起動が早く、動作が軽いです。

コード編集を補助する機能

コードを早く編集することに特化したアプリケーションなので、同じ単語を選択して一度に編集したり、画面を文字単位ではなく長方形に選択したりできます。

テンプレート機能がない

どのプログラム言語のファイルを作成するのかを選ぶと、自動でひな形を作成する機能はありません。ある程度コーディングに慣れている必要があります。

内部サーバーを作る機能がない

プログラムをその場で実行するための、内部サーバーを立ち上げる機能がありません。

※拡張機能を追加するとできるようになるエディタもあります

代表的なエディタ

ウェブ制作者が使用している代表的なエディタです。初心者にとっては、各エディタの違いはあまりありません。どれも無償で提供されているので、好みで選んでください。

Sublime Text

https://www.sublimetext.com/

コーディング向けエディタの先駆けとなったアプリです。便利な機能を早い段階から備え、愛用者の間では「恋するエディタ」とまで呼ばれています。有志が作成した拡張機能も多いです。

Atom

https://atom.io/

コード共有サービス「GitHub」が提供するエディタです。「ハックできるエディタ」と呼ばれ、CSSやJavaScriptなどの、ウェブ制作者が知っている技術でカスタマイズできます。
外観を細かく変更でき、視覚、色覚に障害がある人にも向いています。

Brackets

http://brackets.io/

画像加工ソフト「PhotoShop」を販売しているAdobeが提供するエディタです。ファイルを更新するとChromeが自動的に更新されるライブプレビュー、カラーコードを書くとその場で色を確認できるなど、デザインを同時に扱う人に優しい機能があります。 日本語のガイドブックは札幌のエンジニアが書いています。Kindleで無料で読むことができます。

https://www.amazon.co.jp/dp/B019SPFHX2/ref=cm_sw_r_tw_dp_U_x_Aj1SCb3QGFG0M

ウェブフォント


サイト画面:Google Fonts

Google Fonts公式サイト


CSSの「フォント」の授業で、font-familyで使用できるのは、OSに入っているフォントだけと説明しました。
ですが近年では、サーバー内に設置したフォントファイルを読み込んで利用できる「ウェブフォント」という技術が開発されています。
自分でフォントファイルをサーバーに設置する方法もありますが、ここでは簡単に利用できるフォントサービスを通した使い方を紹介します。

ウェブフォントの利点

  • OSを問わず同じフォントを表示することができる
  • 文章をコピーできる
  • 画面を拡大してもぼやけない
  • CSSで色や大きさを調整できる
  • 簡単に修正できる(画像ロゴだとHTMLでは修正できません)

代表的なフォントサービス

Google Fonts

https://fonts.google.com/

やや表示が遅いですが、無料で使用できます。学習におすすめです。

FONTPLUS

https://webfont.fontplus.jp/

ソフトバンクが提供しています。多彩なフォント会社の文字を提供しており、ブラウザ上での試し書きもできます。

Adobe Fonts

https://fonts.adobe.com/?locale=ja-JP

Adobeが提供しています。PhotoShopなどの同社のパッケージを契約していると同時に使用できます。

TypeSquare

http://typesquare.com/special/

モリサワが提供しています。人気が高いモリサワのフォントをほぼ全て利用できます。

ウェブフォントの使い方

head要素にタグを貼り付ける

サービス側が提供しているコード(scriptタグ)を、head要素内に貼り付けます。全ページに貼り付けてください。
また、サービスに記載されている、使用することにしたフォントの正確な名前をコピーしておいてください。

CSSにフォント名を書く

フォント名を、font-familyプロパティでCSSに記述します。

以下の例では、h1要素とh2要素が「筑紫Aオールド明朝」になります。万一フォントが読み込めなかったときのために、OS用のフォントも記述しておきましょう。

h1, h2 {
  font-family: "FOT-筑紫Aオールド明朝 Pr6N B", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

学習のコツ



技術書選び

HTMLとCSSの技術書は、初学者のうちは一冊は読んでおくことをお勧めします。
Amazonで「HTML CSS」と検索したときに、三年以内に出版されて評価が高い本は、どれも間違いはありません。

※ウェブ制作者は嘘のレビューを書きません。正しい情報を提供することの大切さを仕事を通して知っているからです。

レビューには「まったくの初心者向け」か「ある程度HTMLとCSSが書ける人向け」かが書かれていますから、よく読んで自分に合いそうな本を選びましょう。

コピペと写経

まず、便利そうなHTMLやCSSのサンプルを見つけたら、どんどん自分のサイトにコピー・ペーストしましょう。効果や役割を理解できたら、属性値などを手で書き直してみてください。
正しいコードを書いていくうちに、早くて正しいコーディングが身についていきます。

また、よほど急ぐ仕事でない限りは、次に作るサイトに使い回すことを想定してコードを書きましょう。

SNSの活用

手軽な情報収集には、やはりTwitterがおすすめです。「ウェブデザイナー」「コーダー」「フロントエンドエンジニア」などをプロフィールに記載している、フォロワーが数百人以上の人たちをフォローしてみましょう。

皆さん普段は雑談が多いですが、たまに有名な技術者のブログ記事や、勉強会の様子をツイートすることがあります。それらをたどって、ブログの著者や、勉強会の主催者をフォローして、さらに正しい情報を集めていきましょう。

情報を得るだけではなく、自分自身も学習したこと、読んだ記事をメモ代わりにどんどんアウトプットしていくようにしましょう。

ウェブ系の勉強会へ行こう

「初心者向け」と書いてある勉強会や、講師がたくさん出演するセミナーイベントを見つけたら、参加してみましょう。

もしかすると内容が難しすぎるかもしれません。それでも、新しい目標を得たり、高い技術を持つ人との出会いにつながるかもしれません。

参加する際は、以下に注意しましょう。

メモを取る

紙でもノートパソコンでもいいので書き残しましょう。

Twitterのハッシュタグをチェックする

スマホがあれば。アカウントがなくても見られます。参加者や他の講師が「副音声」として、便利な補足情報や自分の仕事での使い方をツイートしていることがあります。

スーツではなく平服で参加する

スーツの人はちょっと話しかけづらいのです。懇親会のときも移動しづらいです。

名刺を持参する

どんな仕事をしているかの情報交換を忘れずに!

地方勉強会

東京から遠くても、活発な勉強会がある地域は多いです。地元の大きな都市で勉強会がないか調べてみてください。

札幌では「SaCSS(サックス)」というウェブ系の勉強会が、長年に渡って開催されています。先日、10周年を迎えました。
札幌で最前線で活躍するウェブ制作者に気軽に会うことができるので、北海道の方はウェブ制作に慣れてきたらぜひ参加してみてください。

https://sacss.net/

まとめ

資料の内容は以上です。

ウェブ制作では「キーワード」を知るだけで、その言葉で検索して解決できることは多いです。この資料で太字になっている箇所がそのキーワードです。検索するときは、必ず検索オプションで「一年以内」でも調べてください。新しい情報が出ている可能性もあります。

jQueryは!?と思った人が多いかもしれません。jQueryについては以下の理由で割愛しました。

  • 会社勤務であれば、当面先輩が担当することになる
  • JavaScriptのクエリセレクタとの境界が曖昧になってきている
  • HTMLとCSSを学習すると自然にたどり着く

私が独学でウェブ制作を学習した2003年頃は、正しい技術書も少なく、SNSもブログも存在しておらず、ずいぶん苦労した記憶があります。 この記事が、なにから手を付けてよいかわからなくなった初学者の助けになれば幸いです。


投稿者名 うぇびん 投稿日時 2019年04月15日 | Permalink