Scotch Box の楽さ加減が素晴らしい – A Memorandum
いまどきのWeb制作ではいろいろな道具を使いますが、GUIではないCUIなツールを使って「作業を効率化したい！」と思っても、そこに立ちはだかるのは環境構築の壁。まぁ、導入そのものは言うほど難しくはないんですけどね…。制作ツールまわりはローカルのマシンの中で動いてた方が何かと楽だと思うんですが、MacやWindowsの中に動作環境を作ってメンテしていくのもまた面倒なこともあります（OSのアップデートの時とか）。 サーバまわりがなんとなくでもわかるフロント系の人なら、実際のサーバと同じ環境をVagrantやDockerなどを使って仮想環境として自分のマシンの中に作ってる人も多いかと思います。そんな仮想環境を使って（*1）、LAMPの環境からいまどきなNodeまわりの制作環境までを一緒くたにしたBox「Scotch Box」がリリースされてます。Scotch（出してるところ）は何かと偉い。 正直
gulpとかnpmのこととか – A Memorandum
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない（というか、そのままだと動かないこともありうる）」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。 アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は「v3.8.6」になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
情報源を教えましょう – A Memorandum
セミナーとかに出るとたまに「何を見てるんですか？」って聞かれることもあるので、毎日もしくは定期的に覗いてるサイトをまとめてみました。 別に格好つけるわけではないですが、仕事に関係するものはほぼ英語の情報しか拾っていません。参考になるかどうかわかりませんが、ザッといってみましょう。 Daily News 朝起きた後、空いた時間なんかにチラッとのぞき見るニュース系ソース。 Hacker News Designer News Echo JS – JavaScript News Inbound Marketing Community Mobile News – Apps, iOS, Android Sidebar といっても、サイトをいちいち見て回るのも面倒なので、大体Ziteに流れてくるある程度絞り込まれた記事を読むことが多い。 以下は、毎日ではなくたまに気が向いた時とかに。 The Next
「現場のプロが教えるWeb制作の最新常識」を読んで – A Memorandum
日頃あまり日本語のWebの技術書を読むことがないのですが、監修はじめ執筆陣の名前をみて「どれどれどんなことが書いてあるのかな？、ウシシシ」と思ったので書店で購入しました。 別に頼まれたわけでもないのですが、書評的なものを書いてみましょう。 「最新」って言葉は、非常に難しいものです。特にWebの業界においては、雑誌や書籍のように出版まである程度の時間を要するものは、内容がパチンコ攻略本みたいなことになりがちなんですよね、残念ながら。特に日本語圏においては、英語圏の情報がしばらくの時（はやくて半年〜長くて2年とか）を経て翻訳されたり、ようやっと日本語の情報として流れることも珍しくありません。 Web制作という仕事は、いろいろな肩書きを持ったさまざまな人が携わっているものです。何も急いで最先端の技術や知識を身につける必要はない仕事の方が多いかもしれません。ただ、多少は世の中の流れに目を配っていな
目先のためか、未来のためか – A Memorandum
あなたの情報収集はどちらのタイプでしょうか？ 目の前で起きている問題を解決する、または現状を少し改善するため 先の未来を予測し、来たるべき時に対応しやすいよう準備をするため 目の前にある問題を解決する、向こう3ヶ月ぐらいの対応のためだけの情報収集は簡単なことです。調べればきっとその辺に答えは転がってます。誰かがそこを歩いてるから。常にトラブルを抱え、その場その場で情報収集をして乗り切る。行き当たりばったりという言葉がぴったりです。目先の対応にばかり追われていたら、先に進みたくても進めません。 一方、少し先の未来を見据えて情報を拾いあげ、自分の中の引き出しに溜め込んでおく。ひとつのきっかけから芋づる式にやるべきことが見えてくる。いつでも取り出して活用できるよう備えておけば、周りが気付く頃には一歩も二歩も先に進めるかもしれない。少しでもその兆しが見えてるのであれば、ある程度先のことを予測するこ
Webサイトの進化を阻害しているもの – A Memorandum
2013年の11月頃「Why Japanese Web Design Is So… Different（翻訳版: 日本のウェブデザインはなぜこんなにも世界と違うのか？）」という記事がちょっと話題になりました。毎年のように出てくるこの辺の話題ですが、この記事の初出のタイトルは「Why Japanese Web Design Is So… Bad」だったということ。「Different」ではなく「Bad」。 確かに、言語体系の違いや文化的な背景などを加味した方がいい話であることには違いありません。でも、ここ数年の日本のWebサイトの向いてる方向を眺めていると、やっぱりある種の違和感を感じるというか、そりゃ「Bad」と言いたくもなる気もわからんでもないな…と思ったりもします。何も欧米のことを真似すればいいわけではありませんが、これからの未来を想像すると向いている方向に微妙なズレがある気がするんで
Myth – A Memorandum
CSSを少し簡単に、かつ少し先を見据えて書いてみるのはどうだろう？ LESSやSassといったCSSプリプロセッサは確かに便利。「なんかCSSプリプロセッサって複雑そう…、こわい」という初学者の方も、「変数？（ぽかーん）」みたいな方でも、「Myth」ならなんとなくわかるかも。 Mythのいいところは普通のCSSをちょいと拡張して書けるところ。それも少し先を見据えた感じで。ベンダープリフィクスとかも必要であれば勝手に追加される。 「:root {}」の中に「var-hogehoge: 値」を入れておけば、その「var-」以降に指定した変数名「hogehoge」を「var(hogehoge)」で使い回せる。calc()やcolor()も使えるので、単純な四則演算だけじゃなくて色の計算なんかもオッケー。 これなら「やれextendだ、mixinsだ」と覚えなくてもいい。今書いてるCSSにちょっと
こもりがある記事を書いてから1年が過ぎました – A Memorandum
旦那がアルマジロに殺されて1年が経ちました〜、風ではじめてすみません。今から1年ほど前、ボクは以下の記事を書いて投稿しました。 いまどき「npm install ホニャララ」ばっかりなんですから。 → パッケージで管理するということ あれから1年、どちらかといえば導入障壁の低そうな地方を中心に作業効率化の話をしてきました。それは自分自身が小規模の制作者であること、印刷物からWeb制作をまとめて面倒見るような仕事をしてる人が地方にはまだまだ多いだろう。そして、都会と違って制作費の面においてもよりシビアではないか？ そんな中にあって頭で考えることも手を動かすことも増えてきたわけで、これからの時代をどうやって生きていくかを考えなければなりません。これまでと同じではなく、これまで必要以上にかけていた時間や金銭面でのコストをかけないような制作手法を覚えることで、同じ単価でありながら納品物のクオリティ
BundlerでGemsのバージョン管理 – A Memorandum
どもども、LESS使いのこもりです。 Webデザイナー界隈では「Sass＋Compass」での制作が人気があるようで。こういったツールのバージョンは頻繁にあがっていくものですが、うっかりGemsをまるっとアップデートしてしまうと「うげーー、このバージョンだとほにゃららー」みたいな事態を引き起こしかねません。 ひとりならともかくチームの作業になるとバージョンの相違は問題になるでしょうし、「任意のプロジェクトで特定のバージョンのものを使いたい…」とかないですか？ ここではCompassを例にとって説明します。CompassはGemを使ってインストールしますが、素直に「gem install compass」「compass watch」するのではなく、間に「Bundler」を噛ませておくと安心かもしれません。 Bundlerは、Gemのバージョン管理というかプロジェクト毎にその依存関係とかを管
XXXXXユーザーができないと思っている12の機能 – A Memorandum
なんだかFireworksの新規開発が終了とかそういう話題でコレ系の記事が増えてきているみたいなので、ちょっと便乗してみることにしました。タイトルと以下の項目は、見かけた記事を参考にさせていただいています。 01. ピクセルに最適化されていない 高精細なディスプレイが出てきて「1px」という単位もなかなか怪しいものになって、「その1pxは本当に1pxなのか？」ってな話の昨今ですが、まぁ一応のところはピクセルというところで幅も高さも線幅も移動も修正できるCSSは便利ですね。 → Designing (and converting) for multiple mobile densities 02. シンボルがない CSSプリプロセッサ各種にある「mixin」の機能を使えば、あらかじめスタイルを定義しておいて複数の要素に一括で適用するといったことができますね。もちろん一括で修正するなら、元の記
Reset? or Normalize? – A Memorandum
定期的に話題になる気がするんだけど、俗にいういろんな要素のプロパティをゼロとかにする「Reset」、ブラウザの持つ要素のデフォルト値を調整する「Normalize」のどっちがどうだかいう話、結局のところその人がどういう背景で仕事してるかによると思う。 たとえば、ビジュアルデザインだけを誰かがやってそれを忠実に再現するとした場合、そのビジュアルが作り込まれすぎていたり（ブラウザの初期値とかそんなものがどこにもない）したら、コーディングだけを担当する人はマージンとかパディングをゼロにしたり、フォントサイズを統一してしまう方がやりやすいかもしれない。 その一方で、ボクみたいに自分でビジュアルもやる人、ある程度ブラウザの持つ初期値を活かしたようなビジュアルデザインがもとになる場合であれば、コーディングする際にいろんな要素の値を統一してしまったり値をゼロにしてしまうのは、かえって手間になるし時間かか
レスポンシブなワイヤーフレーム作りには、IllustratorとかInDesignがいいかもな – A Memorandum
ぼんやりと昨年海外で公開されているスライドを眺めていて、「あぁ、なるほど。頭良いなｗ」と思ったのが、InDesignを使ってレスポンシブなワイヤーフレームを作る方法。 レスポンシブな設計というかいろんなデバイスとかを対象にして、ざっくりとワイヤーフレーム作るのになんかうまい方法はないかな？と、自分ではOS XのSketchなんかで複数のサイズのアートボードを作ってやってたんだけど。 よくよく考えてみれば、Illustratorでもサイズ違いのアートボードは作れるし、InDesignも複数のドキュメントサイズを混在させられるじゃん…。しかも、双方に文字のスタイル設定の機能あるし（笑）。 複数のサイズのワイヤーフレームを作る レスポンシブなんてpxで固定サイズにするのもおかしいっちゃおかしいんですが、今のところそうするしかないのでとにもかくにもざっくりとした複数サイズで区分けします。Illus
Sublime Text 3 がやってきた – A Memorandum
みんな大好きSublime Textの次期バージョンである「3」のβ版が公開されたようです。 現在、これを試せるのは登録ユーザーのみです。 ライセンス情報をまるっとコピーして起動すると…。 おなじみのあの画面が出てきました。ちなみにボクはOS Xですが、Sublime Text 2と共存できるようです。全然別物として動いてるみたいなので、試してみても大丈夫ではないでしょうか。 どのような機能があるかはこの辺でも読んでください。 気になる次期バージョンのお値段は…。 Pricing. The price for a Sublime Text license key has increased by $11 to $70, the first price rise in Sublime Text’s five year history. All licenses purchased at th
Sublime Text 2でプレビューしたい！ – A Memorandum
結構多いですよね、「Sublime Text 2はプレビューできないの？」みたいな質問。仮にそれがHTMLなら「隣にブラウザ開いてればいいじゃん…」って思ったりするわけですが（いまどきはライブリロードもできるわけですし）。 と、そんな多くの方の悩みを“ある程度”解決できそうなパッケージ「Quick Look」というものが公開されていたので紹介を。OS Xには標準の機能としてありますよね？、クイックルック。あれです、あれ。つまり、残念ながらOS Xのみの対応でーす（笑）。 インストールは例によって、Package Controlから。サイドバーのファイルを右クリックしてメニューから選んでもいいですし、ファイルを選択した状態でコマンドパレットから呼び出してもオッケー。 HTMLはレンダリング状態で確認できますし（レスポンシブなんてのも可。ただし外部のWebフォントはロードされません）、ST2を
Edge / BracketsでEmmetとかLESSを – A Memorandum
Adobeさんが出してる「Edge Code」、TextMateやSublime Text 2っぽいですよね（笑）。で、そのEdge Codeも公開されている拡張機能をインストールすることで、アプリケーションの機能を追加することができるようになっています。 公開中の拡張機能は、Edge Codeの元になってるオープンソースプロダクト「Brackets」のGitHubページにリンクがまとまっています。 Edge Code / Brackets でEmmetを使う WebサイトのHTMLやCSSのコーディングをする際に「Zen-Coding」を使っている方もだいぶ増えました（おかげさまで 謎）。 しかしもうZen-Codingは開発終了で、次期バージョンの「Emmet」に置き換えられています。とまぁ、そうなるとより機能が拡充されたEmmetが必要になるわけですが、ちゃんとBrackets /
プリプロセッサの一歩先へ – A Memorandum
昨年末あたりから日本のWebデザイナーさんたちの間でも「LESS」「Sass+Compass」「Stylus」といったCSSプリプロセッサの話題が出るようになってきました。いや、実際あるとないとでは作業効率も違いますし、どれか一個でも覚えておけばどうにかなりますからね。まだの人は早めに試してみましょう。 で、このサイトを立ち上げた時にもちょっと書いてるんですが、主にフロントエンド部分の開発手法というのが大きく様変わりしようとしています。それは、より効率的にみたいな面も含め、やり方そのものも変わるんじゃないか？ぐらいの勢いで（CMSはまぁCMSとしておいといて）。ツールは黒い画面を使うものを中心に拡がりをみせてますが、いよいよGUIを介したものも出てきています。 CSSプリプロセッサだけじゃないの こういったツールが何をするかっていうと、CSSプリプロセッサをベースにコンパイルするのはどれも
少しでも英語を読めるようにしましょう – A Memorandum
世の中には英語が苦手という人が結構います。苦手なのは仕方がないと思うんだけど、できれば英語を見て逃げるのはやめた方が良いと思います。何もペラペラ喋れと言うわけじゃなく（ボクも喋れるわけではないしｗ）、英語で書かれたことを辞書をひきながらでも読めるようになった方がいいです。特にWeb制作業界というかIT系の業界にいるなら。 残念ながら、世の中の大きな流れは海の向こうから来ることが多いものです（それが進むべき道かどうかは別として）。海外のいろいろな動向にしろ、出版される本にしても、翻訳されて日本語で読めるまでには時間がかかります。Webサイトの記事程度なら3〜4日もあれば誰かが翻訳して記事にしてくれるかもしれません。でも、それが何かしらビジネスに影響があるものなら翻訳されないかもしれない（笑）。書籍の翻訳版が出るのは、早くても1〜2年の時間がかかります（稀にすぐ出るものもあるけど、それでも同時
LESS/Sass+Compass/Stylusなどをコンパイルするアレコレ – A Memorandum
知ってる限りでちょっとまとめておきました。LESSやSass+Compass、Stylusをコンパイルできる各種ツールです（それらのMixins集なんかは入れていません）。中には、HTMLのテンプレートエンジンなんかもあわせてコンパイルできるのも含まれています。何かのご参考になれば。 GUIでどうにかしたいあなたへ 1. CodeKit CodeKitは、有償のアプリケーションでOS Xでしか使えません。対応しているプリプロセッサやテンプレートエンジンの種類は圧倒的に多いのが特徴です。とりあえず使いそうなものをあげると、LESS、Sass/Compass（とそのmixinであるBourbon）、StylusといったCSSプリプロセッサの類、IEの4095個セレクタの問題を回避するBless。そしてHamlにJadeにSlimといったテンプレートエンジン、CoffeeScriptにNode.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mixture – A Memorandum
第4のCSSプリプロセッサ、Roole – A Memorandum