ブログをg.o.a.tとQiitaへ移行しました

長年、ウェビングスタジオのドメインで書いてきたブログですが、雑記をg.o.a.t、技術情報をQiitaへ移行しました。
活動報告などは、Twitter、Facebookでもお知らせしていきます。

雑記(g.o.a.t)
https://webbingstudio.goat.me/

技術情報(Qiita)
https://qiita.com/webbingstudio@github

自分のドメインで配信する「オウンドメディア」の重要性はわかっているのですが、近頃はなかなかまとまったブログを書けていませんでした。

さらに「うぇびんさんのブログはa-blog cmsの有用な情報があるけれど、探しにくいので、検索に対応してほしい」などと言われたり、過去の記事についても掘り起こしや書き直しが必要になってきました。

そんなこんなで、気軽に書けることや情報を探してもらいやすいことを、当面優先することにします。


リニューアルするする詐欺になっているこのサイトですが、ベースのCMSも変えるかもしれません。

このサイトを勉強目的でa-blog cmsへ移行してから8年が経ち、おかげさまで、a-blog cmsは日常的に業務で扱うようになりました。ありがとうございます。
その間に、屋号サイトでa-blog cmsが得意とする物量が多いコンテンツを扱うことはなくなり、技術者の間で注目されている、Craft CMSを学習したい欲が出てきました。
なので、8年前と同じように、またCraftで一から屋号サイトを作り直すかもしれません。もちろんこのブログはa-blog cmsのまま残しておきます。

8年前と違っているのは、私自身に、魔改造にならない構築ノウハウと、恥ずかしくないレベルのコーディングスキルが身についていることです。
今のスキルで、来年で開業10周年を迎えるウェビングスタジオのサイトを立ち上げられればと思っています。


というわけで改めて。移転先も宜しくお願いいたします。

雑記(g.o.a.t)
https://webbingstudio.goat.me/

技術情報(Qiita)
https://qiita.com/webbingstudio@github

美しいゲーミングキーボード「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スポーツの激しい操作にも耐えられる堅牢さとキー反応速度を持っているので、コーディングにも役立ちます。

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

この記事には続きがあります

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


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

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

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

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

この記事には続きがあります

Illustrator CC 2017から書き出したSVGは、GIMP 2.8.22で正しく表示できない


2017-07-06追記: 問題が起きる原因と対策を、記事にまとめていただきました。
GIMPでSVGファイルの表示が崩れる問題とその解決策 - 週刊SVG
圧縮された座標パスを正確に解析できない、既知の不具合です。GIMPで編集可能とする場合は、圧縮ツールを使わないようにしてください。また、Illustratorの場合は非圧縮となる「別名で保存」などを使用してください。

エントリー末尾の補足情報も参照ください。

表題の通りです。同じ状況になる人がいずれ出てくるかもしれないので共有します。

結論から書きますが、これはGIMP側の仕様で、ブラウザでの表示においては問題ありません。
どうもGIMPは、SVG関連の対応は読み込み・書き出しともに遅れているようです。

Android Studioでも色情報が引き継がれない問題が報告されています。

Sketchたまご: Illustratorから書き出したsvgをAndroid StudioにImportすると色情報が反映されないことの解決法

この記事には続きがあります

Atomic Designの思想でCSSフレームワークを作るのは難しいので代替案を考える


一昨日、「FLOCSSがわかりにくい」「Atomic Designの思想でフレームワークを作ってみたい」という記事を書いたところ、とてもたくさんの感想をいただきました。

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

大半がフロントエンドエンジニアからの突っ込みです。著名な方々にもたくさん意見をいただいただのでまとめました。ありがとうございます。

「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」に識者たちの鋭すぎる突っ込みが入る - Togetterまとめ

Atomic DesignがCSS設計に適していない理由

ピクセルグリッドの高津戸さんによると、そもそもAtomic DesignはCSSやJSの設計とは全く関係ないそうですが、よく考えてみると、たしかに厳密な階層構造を持っているAtomic Designの設計は、デザインレベルからの意思統一が可能な環境でなければ破綻してしまいます。

私はデザインを外部に発注することが多いですし、CMSベースで構築すると、どうしてもマークアップやクラスの命名に手を出せない箇所が出てきます(※)。

そんなこんなで、Atomic Designを採用することは諦めて、既存のCSS設計を、専門のマークアップエンジニアではなくても理解しやすくする方向で考え直すことにしました。

この記事には続きがあります