仕事

今どきのテクニック満載！ HTML5 & CSS3 デザインレシピ集

どうも、ご無沙汰しております。今年はスギ花粉の当たり年なのか、例年になく症状がひどいです（グズッ）。

昨年は体調など諸々の理由で主に自宅で仕事をしていたのですが、今年の年始から再び高田馬場のコワーキングスペース「CASE Shinjuku」さんに出戻って、快適な環境で作業をしております。やっぱり広いスペースは気持ちいいですね。

私が離れていた間にもCASEさんの月額会員は着々と増えておりまして、そのお一人がStudio 947の狩野祐東さんで、HTMLやCSS、JavaScriptなどwebの技術書を執筆されています。

そういったご縁で近刊の著書をご恵贈いただきました。私もweb技術指導も仕事にしておりますので、レビューを書かせていただこうと思います。

ただいま直々に昨日発売の新刊を著者の狩野さんからご恵贈いただきましたので、書評書きます。

五十嵐 武志さん(@takeshi81)がシェアした投稿 –

「HTML5 & CSS3 デザインレシピ集」のおすすめポイント

1. HTML5.1準拠のマークアップテクニック300例収録

私見ですが、最近web関係というとWordPressなどCMSの解説書、ReactやVue.jsなどのフロントエンドフレームワークの解説書が多く、基本であるモダンなHTML5とCSS3のテクニックを学べる書籍というのが、かなり少なかったという印象です。

どうしてもHTML5はブラウザ実装が先に進んでしまい、使おうとしている要素や技術がどのブラウザで使用できるのか、Can I useなどのサイトで確認してから実装する、といったことを日々しているというのが現状だと思います。

またちょっとした小技などもweb検索に頼りがちになり、検索エンジンでヒットしたwebページを参考にしたりすることになりますが、どうしても情報が散逸して、まめにブックマークでもしておかないと忘れてしまい、また検索するようなこともしばしばです。

この「HTML5 & CSS3 デザインレシピ集」では、そういった小技が定番から高度なものまで、300例も収録されているので、逆引きリファレンスとしてとても最適なつくりになっています。

2. CSSボックスモデルの事例が、float版とflexbox版に2パターンを併記

Flexbox、いいですよね。Bootstrap 4でも、リリースの途中でboxのデフォルトがfloatからflexboxへ変更されました。案件によりfloatを使わないといけないこともあると思いますが、「HTML5 & CSS3 デザインレシピ集」では、float版とflexbox版の両方の例が載っています。

3. 初心者が助かる定番テクニックから、transition、transformなど高度な技まで網羅

収録サンプルと目次のページを見ていただきたいのですが、HTMLの基礎知識から始まって、要素ごとの使用例、定番テクニックと進んで、最後の章が「アニメーションとエフェクトのテクニック」というように、初学者から上級者まで、一冊あると便利な内容になっています。

すでに仕事でマークアップをしているような方も、新人教育の教科書も兼ねて、オフィスに一冊あると助かる本だと思います。おすすめです。

HTML5 & CSS3 デザインレシピ集

posted with ヨメレバ
狩野 祐東 技術評論社 2017-02-22
Amazonで見る
Kindleで見る

「顧客が本当に必要だったもの」

What the Customer Really Needed

具体例は語れないので、夜中にこっそり（シリーズ？）

顧客が本当に必要だったもの | アリラボ(arison.jp)

おそらく、少し前からIT業界で働いている方なら一度ならず眼にしている風刺画のはずです。元ネタは1970年代の米国まで遡れるとか。主力産業は移り変わっても、相変わらず同じような問題で2015年の私達も頭を抱えているのですね。

ご存知と思いますが、これはほぼコミュニケーションの問題です。それぞれの立場で意見は異なると思いますが、私個人としては、顧客は顧客なりに要件を説明しているのであり、「顧客が本当に必要だったもの」が何なのか、様々なやりとりを行って、何らかの形で視覚化して顧客とビジョンを共有すること、ここをうまくまとめるのもプロの腕の見せどころだと思うのです。スタートで躓くと「顧客が本当に必要だったもの」との乖離が大きくなって、誰も幸せになれない事態に陥りますし（受注確定でない段階から動きすぎるのは、失注の可能性を考えると難しいですけどね）。

可能な限り早い段階から、関係しそうな分野を得意とする人に意見を聞いて、予算や時間的制限も勘案しながら、提案から受注、ローンチ、運用保守まで契約の続く限り継続的に最適解を探っていくのが、顧客も含めた開発チームの理想的な姿だと考えています。

私は幸か不幸か長らくフリーランスをしており、（時に売上と引き換えではあるものの）ワークスタイルを選べる立場だったので、ここ数年は、

「問題の核心を探り、最重要課題の解決策をまず考える」
「机上の理論はローンチするまで仮説」
「仮説は実行して検証する」
「仮説をいくつも同時に実証しようとしない」
「小さく短期間のPDCAサイクルを継続的にグルグル回す」

というようなモデルで、いくつかのお客様と継続的にお仕事させていただいております。実際のところ、仮説のいくつかは成功し、同量かむしろ多いくらい失敗も重ねています。ただ検証を行うことで、意外な知見を得られることも多いです。

私はお客様の事業モデルの中で、Webというパートだけを担当している、一介のWeb開発者・デザイナーにすぎないのですが、「顧客が本当に必要」としているものは常に念頭に置いて、プロジェクトに取り組もうと思っています。

E-mailは偉大な発明だったけど、もうみんなが使わなくてもいいよね。

Facebookに投稿しようとしたものの、長すぎたので久々にブログに書きます。

3年後の新入社員はメールを使えない場合がある

○学習はするが、
○「今の10代のPCスキル、なにがそんなに変わったのか」ネットの検索スキルとかはあんまり変わりません。PCもスマホも同じだから。PCとスマホに共有されていない機能に顕著な変化があります。例えばタイピング。キーボード使えないから、スマホでレポート書いてる子が年々増えてる。
○この過渡期の勝ち組はネトゲ廃人クラスタ（キーボードが使えるから）
○彼らのLINEのスピード感にいちばんデカルチャーを感じます。そりゃメールなんてまどろっこしくてやってられんだろなと思う。
○もちろん所得格差が影響しているとまとめ人は考えます。
○日刊ゲンダイに類似した趣旨の記事がありました。末尾に追加しています。
Togetterまとめ – http://togetter.com/li/731063

入力デバイス？キーボード入力が便利な作業で、使いたい人が使えばいいじゃないですか。レポート？そのうち音声入力の認識能力が上がって、後で誤字を訂正して推敲できるようになるとか、そんなようなサービスを誰か立ち上げることでしょう。

インフラで言うと、SMTPとかPOP3、IMAPとか考えるのが数年前からいやになって自前でメールサーバは管理しなくなりました（Gmailやメールホスティングサービス、Mailgunとかあればいい）。大体トラフィックの90%以上はspamなのです。

書く方はと言うと、ジョブズみたいに1〜3行書けばいいなら構わないのですが（http://stevemail.tumblr.com/）、「○○株式会社 ご担当者様　イガラシと申します。いつもお世話になっております。　表題の件についてご連絡申し上げます…」みたいなことを延々書くのはどうなのだろうか、と現代における社会的慣習を頭ごなしに否定するつもりはないものの、常々疑問に思っており、FacebookメッセージやLINEに流れるのは道理だろうと思います。

E-mailもNetnewsやIRC的に、使いたい人が細々使うサービスになるといいなと思っています。そうすればリテラシーの低い人にリーチしなくなるから、spam mailの意味がなくなり、今ほど面倒臭い状況にはならないでしょう（スパマーはe-mailから他の手段に切り替えるだけですが、賢い人がマシな解決策を考えてくれることでしょう）。

何かツッコミどころがあれば、適当に@takeshi81にメンションでコメントください。

nginxでcgi-bin配下の画像などが表示されない！

Nginx_logo

WebサーバでPerlなどのCGIスクリプトを設置するとき、セキュリティの関係でサーバによっては、cgi-binというディレクトリを利用することがあります。一般的にcgi-binにはスクリプトファイルのみを置くことになっているので、スクリプトから参照したい画像やHTML、スタイルシートなどをcgi-bin配下に置いても表示することは出来ません。

WebサーバがApacheの場合には、「cgi-bin 画像」などで検索すれば対策がわかるのですが、今回はnginxを利用していたので、どうしたらよいかと思案した結果、採った対策をご紹介します。

手法は目新しいものではなく、Apacheでもしばしばあるのですが、画像やHTML、CSSのファイルをWeb公開用のディレクトリ（「www」「htdocs」「web」等）配下に移してしまうものです。

それだけだと参照する場所が変わってしまうので、スクリプトを書き直すか、nginxの設定を変更する必要があります。今回スクリプトは単純なものではなかったので、nginxの設定を変更することにします。

元々 /web/ という公開用ディレクトリ、同じ階層に /cgi-bin/ があって、hoge.cgi、画像を入れた images/ というディレクトリがあったとします。その images/ ディレクトリをごっそり /web/hoge/images/ に移動します。

次に、nginx.conf（場合により sites-available/example.com.vhost など、ご自分の環境に合わせて）に書き加えます。

location /cgi-bin/hoge/images/ {
    alias /var/www/example.com/web/hoge/images/;
}

locationはドキュメントルートから書いていきます。aliasはサーバルートから絶対パスで指定します。

こんな感じで今回は対応してみました。もっとスマートなやり方があったら教えてくださいね。

2014/4/26 更新：誤記を訂正しました（site-available → sites-available）。

7月のWordPressとおやつの会はプラグイン作成入門！

7月のWordPressとおやつの会、水道橋ネコワーキングでやりますよ！

当日の内容

はじめてのプラグインを作る！WordPressプラグイン作成入門

7月の会はいつもと趣向を変えて、全員ノートPC持参で、もくもくとプラグインを作ります。初めてでも大丈夫！最初に簡単なプラグイン作成の説明をして、ごく単純なプラグインを一緒に作ります。初めてじゃない方は、最初から自分の作りたいプラグインをもくもくと作って、おやつタイムに成果を発表してください。

想定する参加者像

WordPressプラグインを作ることに興味のある方ならどなたでも。PHPの初歩的かそれ以上の知識がある。

ただし、上記にかかわらず、初心者からエキスパートまで、様々な方の参加も歓迎いたします。

注意点

今回はノートPCの持ち込みが必須です。無線LANと電源があります。またWordPressをテストできる環境が必要です。XAMPPにWordPressをインストールするのがおすすめです（参考記事 for Windows、参考記事 for Mac）。

会場にはネコがいますので、入室時に注意事項をお読みください。

ネコおよびその他いかなる事由による損害につきましても主催者、会場運営会社は責を負いかねますので、予めご了承ください。

日時・会場

日時は7月6日（土）、15:00から、ネコワーキング（中央線水道橋駅西口徒歩3分）で開催します。

15:00　開場・ごあいさつ・自己紹介タイム
15:15頃～15:35頃　プラグイン作成の基本的な説明（経験者は早速作成開始）
15:40頃〜17:00頃　プラグイン作成タイム（休憩は各自適宜に）
17:10頃〜17:40頃　おやつタイム
17:50頃　撤収・閉場

参加費

2,000円（会場費＆おやつ代として・当日入館時払い）

お申し込み

ATNDのイベントページよりお申込みください。

主催・お問い合せなど

インディゴデザインワークス
幹事：五十嵐武志　@takeshi81
こちらのフォームからお気軽にお問い合わせください。

「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について、を読んで

Fireworks cs6

Fireworks歴約13年の、たけしです。こんばんは。

Adobe Fireworksの身に何が起こったのかは、こちらの記事をご覧ください。MacromediaがAdobeに買収されてから、予感はしていたんです。でも意外としぶとくラインナップに残っていて、まだ開発する気があるんだ、でも進化してる感じがしないなあ、と呑気に構えていたら、ついにその時が来てしまったという感じです。

そして、昨夜あたりFacebookかTwitterあたりで流れてきたのが、なつきさん（@Stocker_jp）のこちらの記事です。

Twitter やWeb系の勉強会で「Photoshop なんて効率悪い」という方を見かけるたびに「なぜそう思うのか」聞いていますが、大抵は以下の4つの理由のどれかです。

  1. 単純に、Photoshop の使い方が分かっていない
  2. Photoshop の使い方は分かっているが、写真編集の使い方しか分かっておらず、「Webデザインのための Photoshop の初期設定と操作」について知らない
  3. 古い Photoshop の話をしている（昔の Photoshop はWebデザインに向いていませんでしたが、最近は CS5 と CS6 を比べてもWebデザインに関する機能が大きく進化しています）
  4. 単なる思い込み

「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について | Stocker.jp / diaryより

なるほど。PhotoshopをWebデザイン用おすすめ環境設定にして、ああ、操作感がよくなった、と実感できました。なので、読む価値はあったと思います。

でも、なんだろう、この悲しい気持ちは。

都市伝説とか思い込みなどと言われてしまうと、つい反発してしまう自分の気持ちが邪魔をして、この記事は自分にとって少し読みづらかったです。というか、自分がFireworksにこれほど愛着を持っていたということに自体に驚きました（DreamweaverからCodaにはホイホイ乗り換えたというのに）。

Fireworksって気軽にワイヤーフレーム描いて、パーツ作って乗せて、時々PhotoshopやIllustratorで素材作っては持ってきて、最後にサクッとスライスして書き出し、という感じで、個人的には一番ストレスなくWebデザイン作業が出来るツールだったのです。

最近はDesigning in the Browser（いわゆる「インブラウザ」）の手法を試したりしていたので、Fireworksがなくなったら困るというほどではないのですけど、やっぱり手慣れたツールが開発中止というのは寂しい気持ちにさせられます。

と、まあ、「私はFireworksが好きでした」という感傷的な告白記事でした。気分転換にEdge Reflowでも触ってみようかな。ではでは。

4月のWordPressとおやつの会はWordPressテーマ作成・攻略法！

4月のWordPressとおやつの会、水道橋ネコワーキングでやりますよ！

当日の内容

Webデザイナーにおくる、WordPressテーマ作成・攻略法

前半は事例紹介です。今までに作ったWordPressサイトをどのようなフローで作成したか、ご紹介します。最近クライアントから「WordPressでサイト作れないの？」と突っ込まれて困っているデザイナーさんにおすすめです。

後半はおやつを食べながらの質問タイムです。WordPressに関する日頃の疑問を吐き出してみましょう。運が良ければ、何かいいアイディアが出てくるかも。

想定する参加者像

WordPressテーマを作ることに興味はあるが、作れないWebデザイナー、あるいはWeb担当者、技術者。HTML/CSSはある程度理解できる。

ただし、上記にかかわらず、初心者からエキスパートまで、様々な方の参加も歓迎いたします。

注意点

今回は事例紹介と質問会の２部構成です。特にノートPCの持ち込みは必須ではありませんが、持ち込みは歓迎です。無線LANと電源があります。

会場にはネコがいますので、入室時に注意事項をお読みください。

登壇者（予定）

五十嵐 武志（インディゴデザインワークス）
山本 龍二郎（スタイルリンク）

日時・会場

日時は4月29日（月・祝日）、15:00から、ネコワーキング（中央線水道橋駅西口徒歩3分）で開催します。

15:00　開場・ごあいさつ・自己紹介タイム
15:20頃～16:20頃　登壇者による事例紹介
16:30頃〜17:30頃　参加者による質問会
17:50　撤収・閉場

参加費

2,000円（おやつ付き・当日入館時払い）

お申し込み

ATNDページからお申込みください。ページ右上の「参加する」ボタンを押してください。（要ログイン。TwitterやGoogleアカウントなどでログイン出来ます）

メールアドレス設定のお願い

ATNDにメールアドレスの設定をされていない方は、メールアドレスを設定しておくと、リマインダーやお問い合わせのお返事などを受け取れるので便利です。

キャンセル

必ず、ATNDのページ右上の「このイベントへの参加をキャンセル」を押してください。

主催・お問い合せなど

インディゴデザインワークス
幹事：五十嵐武志
こちらのフォームからお気軽にお問い合わせください。

3月のWordPressとおやつの会、水道橋ネコワーキングで

3月のWordPressとおやつの会、水道橋ネコワーキングでやりますよ！

当日の内容

WordPressブログのデザインってどう変えればいいの？＆初心者質問会

前半は軽いレクチャーです。WordPressテーマ（デザインテンプレート）をどう自分のブログに入れるの？フォント変えたいんだけど？などなどいろいろ外観デザインに関わる部分をなるべくわかりやすく説明します。

後半はおやつを食べながらの質問タイムです。インストールから、書き方、活用、デザイン、その他日頃の疑問を吐き出してみましょう。運が良ければ、何かいいアイディアが出てくるかも。

想定する参加者像

サーバを借りてWordPressはインストール出来たけど、デザインのカスタマイズがよくわからない、WordPress初心者。HTML/CSSが少しは理解できる。PHPの知識はないか、初心者。

ただし、上記にかかわらず、初心者からエキスパートまで、様々な方の参加も歓迎いたします。

注意点

今回は講義と質疑応答の２部構成です。特にノートPCの持ち込みは必須ではありませんが、持ち込みは歓迎です。無線LANと電源があります。

会場にはネコがいますので、入室時に注意事項をお読みください。

日時・会場

日時は3月20日（水・祝日）、15:00から、ネコワーキング（中央線水道橋駅西口徒歩3分）で開催します。

15:00　開場・ごあいさつ・自己紹介タイム
15:20頃～16:00頃　モデレーターによるレクチャー
16:10頃〜16:50頃　参加者による質問会
17:00　撤収・閉場

参加費

1500円（おやつ付き・お釣りが出ないようにご協力ください）

お問い合せなど

こちらのフォームからお気軽にお問い合わせください。

お申し込み

ATNDのページで「参加する」ボタンを押してください。もしくはFacebookページで参加表明いただいてもOKです。

メールアドレス設定のお願い

ATNDにメールアドレスの設定をされていない方は、メールアドレスを設定しておくと、リマインダーやお問い合わせのお返事などを受け取れるので便利です。

新年明けましておめでとうございます。

Midnight fireworks, 1/1/2013 (3)

たけしです。新年明けましておめでとうございます。

旧年中は腰の病気のこともあって、皆様にご迷惑をかけっぱなしになってしまいましたが、今年は安全運転、体調と相談しながら地道に活動して行きたいと考えています。

本年もインディゴデザインワークスと、イガラシをよろしくお願いいたします。

WordPressとおやつの会初心者編は、新年1/12に水道橋で！

3月のWordPressとおやつの会入門編、水道橋でやりますよ！

当日の内容

WordPress事始め ブログを始めてみよう＆初心者質問会

「WordPressでブログやホームページを始めたいけど、何から手を付けたらいいのかわからない！」そんな方に、準備からインストール、デザインの変更まで、時間の許すかぎり詳しく解説します。トークセッションの後は初心者質問会です。インストールから、書き方、活用、デザイン、その他日頃の疑問を吐き出してみましょう。運が良ければ、何かいいアイディアが出てくるかも。

モデレーターはインディゴデザインワークス、五十嵐武志が務めます。

注意点

今回はトークセッションと質疑応答の２部構成です。特にノートPCの持ち込みは必須ではありませんが、持ち込みは歓迎です。会場には電源、無線LANがあります。

日時は1月12日土曜日、15:00から、水道橋・ネコワーキングで開催します。会場にはネコがいますので、入館時に注意事項をお読みください。

  • 15:00～15:30頃　会場設営、ごあいさつと自己紹介タイム
  • 15:30頃～16:30頃　トークセッション
  • 16:40頃～17:40頃　質問タイム
  • 18:00　撤収して終了。
    ご希望の方は懇親会（別途割り勘）へ。

日時と会場

2013年1月12日 土曜日 15:00～18:00 ネコワーキング（JR水道橋駅西口徒歩3分）

参加費

1000円（おやつ付き・当日会場にてお支払いください）

お申込み

ATNDのイベントページよりお申込みください。

お問い合せなど

こちらのフォームからどうぞ。

皆様のご参加、お待ちしております！