自作のCSSフレームワークで特に気に入っているコンポーネントの話


先月公開したCSSフレームワーク「echo.css」ですが、「どんなページが作れるかのサンプルがないと、イメージしにくいんじゃないかな」と言われました。

それで、ドキュメントよりも先にテンプレートを作っています。日曜日はチクチク制作をしておりました。

echo.cssのモジュール群で特に気に入っているのが、冒頭の画像の「c-flip」というコンポーネントです。デスクトップでは写真を大胆に表示し、モバイルでは写真が上、文章が下となります。



初出は、昨年稲葉さんと制作したa-blog cms用のテーマ「zeroichi_lp」です。

この時点でも充分使い勝手は良かったですが、実際の案件で使ううちに、デスクトップでの表示が8パターンまで必要なことがわかってきました。使用する背景画像によって、適切な文字配置は全く異なるためです。デザイン上の理由もあります。

  • 画像全面+コンテンツ白背景・左寄せ
  • 画像全面+コンテンツ黒背景・左寄せ
  • 画像全面+コンテンツ白背景・右寄せ
  • 画像全面+コンテンツ黒背景・右寄せ
  • 画像半分+コンテンツ白背景・左寄せ
  • 画像半分+コンテンツ黒背景・左寄せ
  • 画像半分+コンテンツ白背景・右寄せ
  • 画像半分+コンテンツ黒背景・右寄せ

8パターンのデザインを簡単に切り替えるために、サブクラスなどをずいぶん整理して現在に至ります。詳しくはこのコンポーネントの解説ページをご覧ください。

https://cms-skill.com/echo-css/styleguide/component-flip.html

私が制作するサイトは、ほぼすべてCMSを介して制作し、さらにその半分くらいが、フォーマットができてから原稿が入ります。その際に想定外の画像やテキストをどれだけ少ない工数で補完できるかを、自分の独自スキルとして磨きたいと日々考えています。これは少なくとも、AIには当分できないことです。


投稿者名 うぇびん 投稿日時 2018年11月04日 | Permalink

いい加減、音声入力でブログを書きたい

勝間和代さんが今年のはじめころから、執筆を音声入力にしたらびっくりするくらい効率化できた、とレポートを書いています。

音声入力による生産性の向上は、ざっくり「3倍」くらいのイメージ - 勝間和代が徹底的にマニアックな話をアップするブログ

私はずっと、音声入力でブログを書くことに憧れています。だいたい、月旅行が実現するような未来に生きているのに、文字入力が未だに手でしかできないなんておかしいじゃないですか。

一年に一度のペースで何度も試しているのですがその度に挫折しています。今回また、何度目かの挑戦をすることにしました。

普段はブログ記事を、メイン機であるMacBook Proの2016年モデルで書きます。先日、OSをMojaveにバージョンアップしたばかりなので、Mojaveと Bluetoothヘッドセットでの音声入力を試しました。

占星術士の石井ゆかりさんの占いを読み上げてみたのですが…



散々な結果でした…これではSiriもまともに使えるか怪しいものです。Appleの純正イヤホンなら大丈夫ではないかと思い、まったく同じ文章を読み直しましたが…



(°言° )

精度が変わらないどころか悪化しました。

音声入力の精度はスマートフォンの方が高いといいます。なので今度は、ZenFone3+Google音声入力と、最初と同じBluetoothヘッドセットで試してみました。


おぉ。今度はほぼ正確に入力することができました。

ですが、文節ごとに半角スペースが入ってしまうので、入力後にスペースを削除しなければいけません。ちょっと面倒くさいです…しかも音声で入力された箇所はタップして別の候補に変更するか、削除するかを選べるのですが、句読点を入れるときにこの機能が仇となり、間違って文節を一個消してしまいました。


音声入力をするにあたって、もうひとつハードルがあります。それは、肝心の私の言葉が出てこないという、身も蓋もない話です。

私はかなり饒舌で、一般の人と比べると語彙も多いと自覚しています。ですが、私 の頭に浮かぶ文章は、通常100文字くらいのフレーズが多く、順番もバラバラで、しかもあっという間に忘れてしまいます。

日常会話やTwitterなどは大得意ですが、 セミナーのプレゼンや、こういった音声入力は、文章をまとめきれずに言葉に詰まってしまい、まるでうまくいきません。

勝間さんは、音声入力の精度の問題で実用化できなかったと記事に書いていましたが、どちらかというと一般の人は私のように、言葉をまとめることが苦手だからできない人が多いのではないかと思います。人前で話す機会が少ない仕事をしていると尚更でしょう。

実は、ここまでのブログ記事は音声入力で書いてから、あとでキーボードで加筆しています。

Google音声入力の精度はやはり凄いですが、先述の通り、文節ごとにスペースが入ってしまう問題があったり、句読点が入力できなかったりするので、いちいち戻って文章を直さなければなりません。

入力は一瞬ですが、キーボードと違って「とりあえず考えついた順に書き出す」ということができないので、少しずつしか進みません。スマートフォンのUIだと、文章を直すのにも時間がかかります。 やはり、人前でまとまった話をすることに相当慣れている人でなければ、長い文章を音声入力にするのは、なかなか難しいなと感じました。

ただ、スマートフォンの音声入力は完全に実用レベルになったと思うので、もっと積極的に使いたいです。常にメモアプリを起動しておいて、思いついたブログの記事のネタを、忘れないうちに音声入力するという手がありますよね。

スマートフォンをiPhoneXsに変えることにしたので、Siriや音声入力の精度が、以前使っていたiPhone 7と比べてどのくらい高くなっているのか期待したいです。


投稿者名 うぇびん 投稿日時 2018年11月03日 | Permalink

ブログをリニューアルしました


このブログ、つまり、ウェビングスタジオのメインブログをリニューアルしました。

リニューアルというか、長年積み重なった設定を初期化して、a-blog cmsのブログ用公式テーマ「blog2015」をベースにしたという縮小に近い改修です。
blog2015は読みやすく扱いやすいテーマです。使っている他の人のブログを見て気になっていました。この機会に使ってみることにします。

15年近く続けてきたブログが昨年ころから書けなくなり、g.o.a.tへ移転してみたり、非公開の場所で完全にプライベートの日記を書いてみたりしていました。
一方でTwitterやFacebookは大量に投稿していたので、書けなかったのは「役に立つ情報が充実した、人気が出そうな記事を書かなければならない」というプレッシャーのせいだと思います。
私のライフログが、私のドメインにまったく残っていないのは、やっぱり悲しいです。

純粋な技術情報はQiitaで書いているので、今後はブログをはじめた頃の原点に戻って、私個人の日記と対外活動を中心に書いていこうと思います。

ちょっと待て、カテゴリーを消す前に

リニューアルにあたって、記事の分類を、タグのみにしました。昨今のレンタルブログはカテゴリーを廃したものが多いですし、ブログのような雑多な記事は複数のタームを持つタイプの分類の方が自分自身も後々探しやすいです。

a-blog cmsはエントリーからカテゴリーを外すのが簡単です。管理ページで全記事を選択して、一括修正のプルダウンで「カテゴリー>なし」を選ぶだけです。

300件から、えいやっとカテゴリーを剥がしたところで、あることに気づきました。

a-blog cmsは、エントリーURLにカテゴリー名が含まれるということに。

例えば、このブログ内で歴代最高の人気記事となっている「GitHubとBitbucketの比較:Webデザイナーの業務にはBitbucketが向いている」だと、

https://webbingstudio.com/weblog/internet/entry-651.html

https://webbingstudio.com/weblog/entry-651.html
になり、すべての被リンクが切れてしまうということです。

心の中で「ああああああああああああああああああああああああああああああああああああああああああ」と叫びましたがもう遅いです。それに、ある程度手数やリスクをかけても、このタイミングでカテゴリーは廃止したい気持ちは変わりません。

加筆

アップルップルのかずみちさんから「.htaccessを書かなくてもいいんだよ」と、「entry_301_redirect」オプションのことを教えていただきました。これがオンになっていると、エントリーのファイル名に重複がなければ、カテゴリーを変更してもエントリーのリンクが切れません。

結局、以下のように.htaccessを書いてリダイレクトさせました。どう考えてももっと短い書き方があります。

# a-blog cms以外のコンテンツ(a-blog cmsを動作させないディレクトリ)
RewriteCond %{REQUEST_URI} !^/?weblog/life/
RewriteCond %{REQUEST_URI} !^/?weblog/work/
RewriteCond %{REQUEST_URI} !^/?weblog/cms/
RewriteCond %{REQUEST_URI} !^/?weblog/webdesign/
RewriteCond %{REQUEST_URI} !^/?weblog/others/
RewriteCond %{REQUEST_URI} !^/?weblog/internet/
RewriteCond %{REQUEST_URI} !^/?weblog/study/
RewriteCond %{REQUEST_URI} !^/?weblog/think/

・・・

# ブログカテゴリー廃止
RewriteCond %{REQUEST_URI} ^/?weblog/life/
RewriteRule ^/?weblog/life/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/work/
RewriteRule ^/?weblog/work/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/cms/
RewriteRule ^/?weblog/cms/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/webdesign/
RewriteRule ^/?weblog/webdesign/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/others/
RewriteRule ^/?weblog/others/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/internet/
RewriteRule ^/?weblog/internet/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/study/
RewriteRule ^/?weblog/study/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/think/
RewriteRule ^/?weblog/think/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

私らしいフォント

CSSフレームワークが完成したので、屋号サイトも、シンプルでコンテンツ押しのデザインへのリニューアルを考えているところです。

ブログの外観は公式テーマのままですが、全体のフォントを新しいサイトで使用予定のフォントにしました。
中見出し、本文は「FOT-セザンヌ ProN M」、大見出しは「FOT-ロダンカトレア Pro DB」を採用しています。

https://webfont.fontplus.jp/font-list/cezannepron-m



セザンヌは東京駅でも採用されている比較的ありふれたゴシック体ですが、ヒラギノよりも文字幅が細く、文字の書き始めに強い力が入った跡があります。
背筋を伸ばし、凛と声を張って話す、年配の女性を連想させます。
それは私がなりたい姿で、このサイトに合っている文字かなと考えて選びました。


そんなこんなで、またブログの記事が長くなってしまうのでこの辺で。
書きたいことは浮かんでいるのだから、タイトルだけ付けた下書き記事を作っておくといいのかも。


投稿者名 うぇびん(管) 投稿日時 2018年11月01日 | Permalink

美しいゲーミングキーボード「Razer BlackWidow」を仕事に導入して三ヶ月経ちました


私たちの仕事の機材で、最もピンキリとなるのがキーボードです。安い品でもコーディングはできるので、後回しになりがちです。

自宅では、MacBook Proを「クラムシェルモード」で使っています。これまではApple純正のUSBキーボードを使っていましたが、三ヶ月前にPCを自作したときに、思い切ってメカニカルキーボードを購入することにしました。

Happy Hacking KeyboardREALFORCEも検討しましたが、最終的に購入したのは業務用ではなく、ゲーム用の「Razer BlackWidow X Tournament Edition Chroma」でした。名前が長いです。

Razer BlackWidow X Tournament Edition Chroma テンキーレスゲーミングキーボード 英語配列版 【正規保証品】 RZ03-01770100-R3M1


Razerはゲーミングデバイスの有名メーカーのひとつです。高級なゲーミングデバイスはeスポーツの激しい操作にも耐えられる堅牢さとキー反応速度を持っているので、コーディングにも役立ちます。

これを購入した理由、三ヶ月使ってみての感想などをまとめます。


投稿者名 うぇびん 投稿日時 2017年07月09日 | Permalink

CMSの構築を考慮したコーディングとかクラスの命名規則の話


先日、CSSフレームワークについて記事を書いてから、今後のコーディング設計について具体的に考えています。

【Webdesign】Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい | ウェビンブログ

というより、再利用性のある業務用テーマの制作をいくつか依頼されており、いずれにしても着手しなければならないのです。

私の主業務が、CMS(それも特定のブランドによらない)を組み込んだサイトの制作であることを前提に、自分はどう設計していったらよいか、考えていることを書いておきます。


投稿者名 うぇびん 投稿日時 2017年07月08日 | Permalink