僕があえて値段の高い通販サイトで買う理由

こんにちは、石井です。

僕は普通の人が聞いたら「バカなの?」と言うようなお金の使い方をよくします。

普通の人のように損得だけを考えてお金を使っても、お金を使うどころか逆にお金に振り回されて大切なものを見失う気がするからです。

今日はそんな僕のお金の使い方を例に「お金の正体」を探ってみようと思います。お金の価値観がぶっ壊れるような話に出来たら、いいな。

比較して一番安いところで買うのが常識

僕は普段「食」にめちゃくちゃ気を付けてまして、添加物や化学調味料、遺伝子組み換え作物はなるべく取らないようにしています。

しかし、ストイックになればなるほど、安心安全な食べ物って手に入らないんですよね。例えば調味料一つとっても、安心して買えるものって大型スーパーなどにはほぼ置いてません。だから、調味料はいつも通販で買っているんです。

この前もお気に入りの醤油が切れたので「どこか安いとこないかな~」と様々な通販サイトを巡っていました。

調べた結果、Amazonが安いという当然の結果に落ち着いたんですが笑、カートボタンを押そうとした時に「ちょっと待てよ」と立ち止まる僕。

実は、僕がよく利用させていただく通販サイトにも、Amazonより割高ですが、同じ醤油が売っていたんです。

それに気づいた時、僕は即決しました。

「高いけど、よく利用しているサイトで買おう」って。

お金は投票権

普通の人なら、ここで値段の安いAmazonを選ぶと思います。

それなのに高いけどよく利用しているサイトで買うことにしたのは、僕がお金を「投票権」だと考えているからです。

野菜を例に挙げて考えてみましょう。

大量生産された安いけど農薬たっぷりの野菜を売っているスーパーと、手間暇かけて作られた高いけどおいしい野菜を売っている八百屋さんがあったとします。

僕ならこの時、値段が高い八百屋さんで野菜を買います。

なぜなら、農薬たっぷりの野菜よりも安心安全でおいしい野菜を食べたいと僕は思いますし、そういう良い野菜を食べる人が増えることがその人自身のためにも世の中のためにもなると考えているからです。

お金を頂くということは活動をより広げられるようになるということですが、スーパーと八百屋さんの活動を比べた時に、良い野菜を売っている八百屋さんの活動の方に広まって欲しいと僕なら思う。だから、あえて値段が高い八百屋さんにお金を落とすんです。

これは今回のケースでも同じことと言えます。「Amazonの販売者よりも普段使っている通販サイトの運営者に頑張ってほしい。」そう思ったから、選挙に投票する気持ちで、あえて高い方の通販サイトで醤油を買うことにしました。

「良いものは高い」と言われる理由

こういう発想が出来るようになると、値段が高いものも気にせず、損得勘定に縛られないお金の使い方が出来るようになります。

そして、世の中の”おかしいところ”が少しづつ見えてくるのです。

例えば、以前とあるイベントで僕が携わっている有料の動画配信サイトの告知ブースを出した時の話。ブースに来て動画配信サイトが有料だと知ったお客さんにこんなことを言われたんですね。

「結局”金”かよ」って。

別に悪口を言うつもりはないのですが、それを聞いた時「あ、お金に縛られてる人ってこういう風に考えるんだ」と僕は思いました。「たくさんのお金が欲しいから有料にしているんだな」。それが彼の主張でした。

しかし、僕ら運営者としては、そんな気持ちは全くありませんでした。なぜなら、当時その動画配信サービスはバリバリの赤字で、お客さんのもとに届け続けるためには運転資金が必要だったです。こっちだってお金を取りたくて取っているわけではない。お金を頂かないとサービスを続けられないから有料にしているんです。

これが「良いものは高い」と言われる所以です。本当に良いものをお客さんに届けようとしたらどうしてもお金がかかり、値段を上げることになる。かといって値段を上げなければ自分たちが潰れてそもそも良いものを作ること自体が出来なくなってしまう。モノづくり特有のジレンマですね。

そう考えると、僕らの動画配信サイトの会員さんたちは、お金を払うことで「頑張ってサービスを続けてね」と僕らを応援してくれていることになります。

この視点、すごくいいなって思うんです。(自画自賛)

お金を自分の私利私欲を満たすための道具として考えれば、お金に縛り付けられて生活がギスギスしていく。でも、お金は誰かを応援するための投票権なんだと考えれば、応援した側も応援される側も気持ちがいい。

お金の捉え方一つで、世の中にマイナスの感情が広がるのかプラスの感情が広まるのかが決まるんです。

しかし実際は、損得勘定に縛られたお金の使い方をすることでマイナスの感情が広がって争いになり、高いけど良いものを作っている人の元にはお金が集まらず、逆にただ安いだけで身体にも環境にも良くないものばかりが出回っている…。

そんな世の中おかしいと思うんですよね。お金を自分の私利私欲を満たすための道具として使うから、こんなことになるのです。

もちろん自分のためにお金を使うことを全否定するつもりはありません。ですがどうせなら、お金を投票権として、周りの人のために使っていきたいと僕は思います。それだけで良い世の中に近づいていくと思うんです。

おわりに

今日は「お金の招待」について考えてみました。

最後の方ちょっとだけ壮大な話になりましたけど、あながちウソではありません。「どうせなら人のためにお金を使ってみませんか?」という僕からの提案です。

高いものを買うことに抵抗がある人も1回ぐらい冒険してみましょう。大丈夫です、お金って使えば使っただけ入ってきますから。お金は血液のように循環させていった方がいいですよ。(この辺の話はまたどこかで)

それでは、ありがとうございました!

池田学展で考えた「天才との戦い方」

こんにちは、石井です。

先ほど日本橋の髙島屋で開催されている池田学というアーティストさんの個展『The Pen -凝集の宇宙-』に行ってきました。

今日はそこで考えた「天才との戦い方」についてお話します。

今日の話を理解していれば、自分より技術や才能がある人を見て落ち込むことがなくなるはずです。

池田学展、どうだった??

まず、池田学展ですが、かなり良かったです!

サブタイトルの「凝縮の宇宙」にもある通り、池田さんはわずか1mmにも満たない丸ペンを使って独自の世界観がある広大なスケールの絵を描かれる方。

画像では伝わり切らないのですが、とにかく絵が細かい!間近で見ると圧倒されます。

展覧会場の池田さんからのコメントにも書いてありましたが、やっぱり本物を直接見て感じて欲しいですね。池田さんが費やしてきた膨大な時間とエネルギーが感じられると思います。(上の画像の絵は新作の『誕生』。制作期間3年だそうです)

正直「一生練習してもこんなの描けないわ~」とか思っちゃいました。笑

もしかしたら、同じ画家の方とか画家を目指している方の中にも「勝てない…」とショックを受けた人もいるかもしれませんね。自分より上手い人と実力を比べてネガティブになる人って多いですから。

でも、例え自分が画家だったとしても、僕は勝てなくていいと思います。

一流にならないと食っていけない?

僕はクリエイターであると同時にアーティストでもあろうと思って仕事をしています。

いや”アーティスト”なんて言うと大げさなのですが、学生時代は授業そっちのけでフルートを吹いてましたし、大学を卒業してからはデッサンを習っています。とりあえず、今も昔も芸術分野の1プレイヤーであるという自覚はあります。

だから「自分の実力を高めたい」という向上心はめちゃありますし、自分より上手い人の作品に触れて悔しい思いをする気持ちも痛いほどわかる。

では、どうして「勝てなくていい」のか?

人と比べるのはナンセンスだとかアートは勝ち負けじゃないとかいう話は置いておいて、現実問題「プロとして活動するなら一流の実力がないと食っていけない」という常識があります。

この常識は何も芸術の分野に限ったことではありません。エンジニアだろうがデザイナーだろうが、何らかのスキルや才能を武器に仕事をしている人の中では常識ともいえる考え方です。

でも、それはウソだと僕は思います。というより、そういう思考法をしているからダメになるんです。

上には上がいる。

もしあなたが何らかのスキルや才能を武器に仕事をしているのなら覚えておいて欲しいのですが、どんな分野にも必ず、上には上がいます。

今回ご紹介した池田学さんは一生かかっても真似できないと思うほど緻密な絵を描かれる方ですが、おそらく「自分が世界で一番細かな絵を描ける」とは思っていないはずです。

なぜなら、上には上がいるから。どれだけ努力しても天才には敵いませんし、天才の上にはさらなる天才がいます。実力のある人ほどそれをわかっていますし、彼らは多分そんなのどうでもいいとすら思っているでしょう。

つまり、1つの才能やスキルで勝負しようとしても1番にはなれず、その業界の一万人に一人のトッププレイヤーになることすら難しいわけです。

その道の天才と勝負しようとしても、まず勝てません。

上手くもないのに人気がある人

一方で、歌が特別上手くもないのに売れている歌手もいます。彼らに歌を歌わせても一万人に一人のトッププレイヤーにすら勝てっこない。なのになぜ、歌が超上手い一流の歌手よりも人気があったり稼げたりするのでしょうね?

答えは簡単。彼らは足し算ではなく、掛け算をしているからです。

足し算とは、1つの才能やスキルだけで勝負しようとすること。例えば歌唱力1000ポイントの人がいたとして、歌唱力を3000ポイントまで上げれば仕事が増えて有名になれる、という考え方がこれにあてはまります。

それに対して掛け算とは、複数のスキルや才能をかけ合わせて勝負すること。例え歌唱力が500だったとしてもダンス力が1000ポイントだったら、かけ合わせることで総合力500000ポイントで勝負できます。

足し算の世界で勝負をしても歌唱力1万の天才には勝てないけど、掛け算の世界で勝負したら負けないかもしれない。

これからの時代、個人で活動していきたいのなら、自分のスキルや才能を掛け算した総合力で戦うという視点が欠かせません。

一万人に一人の存在になりたいのなら、一つの分野で9999人を抜いて10000人中の1位になるよりも、100人中の1位になれる分野を2つ作って掛け合わせた方が速いですし。(100人中の1位なら99人抜くだけでいい)

人はその人の一か所ではなく全体を見て評価されるんです。

絶対領域を作り上げる

僕がWEBを使って個人の活動を広げる時は、1つのスキルや才能を足し算して勝負するのではなく、複数のスキルや才能を掛け算して「絶対領域」を作ることを意識しています。

「絶対領域」とは、絶対に他の人には負けない自分だけの土俵のことです。

例えば、デザインのスキルだけで勝負するなら、おそらく僕は食っていけません。天才的なデザイン力はありませんし、有名なデザイナーに師事したり大手デザイン会社に勤めたこともないので。

ですが、そこにマーケティングのスキルを加えたら?

クライアントの目的をクリエイティブで解決するのがデザイナーの仕事ですが、人間の購買心理とかWEBを使ったビジネスの仕組みづくりとかに詳しいデザイナーってほとんどいません。

さらに、そこにプログラミングのスキルも加えたら?コピーライティングのスキルも加えたら?

…多分、結構なところまで食い込めるんじゃないかと思います。

なぜなら、掛け算するスキルや才能を増やせば増やすほど、同じことができるライバルが減っていくからです。

つまり、これからの時代に個人で活動するのなら、人生で培ってきた複数の才能やスキルをかけ合わせ、なるべく自分に有利な環境を作り、その中で勝負をすればいい。

勝てなくていいんですよ、負けなければ。

確かに一つのスキルや才能では天才に及ばないかもしれませんが、あなたの人生はたった一つのスキルや才能では決まりません。天才とは総合力で戦えばいいのです。

おわりに

めちゃくちゃ楽しんだ池田学展ですが、当初は池田学さんの個展だとは知りませんでした。

「元・法廷画家の人が個展やってるらしいから行ってくれば?」と言われるがままに来てみたら、どこかで見たことある感じの絵。

実は、少し前に本屋で偶然手に取った画集がありまして、それが池田学さんのものだったんです!

当時はそんな有名な方だとは知らなくて驚きました。こんなこともあるんですねー。笑

…ということで「天才との戦い方」についてお話させて頂きました。

質問などありましたらコメント欄にどうぞ。

ありがとうございました!

【カラーミー】特定のカテゴリ一覧をトップページに表示する方法【Ajax】

こんにちは、石井です。

最近カラーミーショップのデザインをさせて頂くことが多いのですが、「トップページにカテゴリ一覧を表示したい」という声をよく聞きます。

しかし残念なことに、カラーミーに備わっている独自タグではカテゴリ一覧を表示することは出来ません!

そればかりか一番安いプランだと新着記事一覧すら表示できない始末…。どうにかしてほしいですよね。

そこで今日は、そんなカラーミーショップ特有の悩みを、魔法の技術「Ajax」で解決していこうと思います。

今回紹介するコードをコピペしてちょっと書き換えれば、特定のカテゴリの商品一覧や新着商品一覧を誰でも実装出来るようになるはずです。

Ajaxとは?

まず「Ajax」を知らない人もいると思うのでちょっとだけ説明。

簡単に言えば「JavaScriptを使って非同期通信する技術」のこと。非同期通信は、データの送受信を普通は直列回路的に行うのに対して並列回路的に行っちゃおうぜという技術(※イメージ)で、ブラウザの更新ボタンを押さずにページの表示内容を変えたりできます。Googleマップで使われているぐらいには有名なものです。

で、今回はそれを使って「別のページから情報を取ってくる」ということをしていきます。

Ajaxの詳細は今回のテーマから逸れるので、詳しく知りたい方は調べてみてくださーい。

ちなみに僕は最初Ajaxを「アジャックス」と呼んでました。本当は「エイジャックス」です。お恥ずかしい…///

SEOから見たAjax

あそうそう、余談なんですが、AjaxはSEO的に良くないとネット上で言われたりしています。

しかし、それはもう昔の話というのが僕の見解です。

最近はGooglebot君がかなり賢くなったようで、今回のAjaxのやり方であれば何も問題はないとGoogleの偉い人が言ってました。

気になった方は以下の記事を、どうぞ。

特定のカテゴリ一覧を任意の場所に表示するコード

まずはコードの全体を載せます。

最初に商品一覧を載せたいページです。class名などは自由に書き換えてください。

<!-- トップページ -->
<body>
<div>
<h2>カテゴリ一覧</h2>
<ul class="top-List">
<!-- ここにAjaxで抜き出した情報を埋め込む -->
</ul>
</div>
</body>

次は抜き出したい情報が表示された商品一覧ページ。こちらもclass名などはご自由に。

<!-- 商品一覧ページ -->
<body>
<div class="productlist">
<ul>
<!-- 今回は以下3つのliを抜き出します -->
<li class="productlist-Item">商品名とか写真とか値段とか</li>
<li class="productlist-Item">商品名とか写真とか値段とか</li>
<li class="productlist-Item">商品名とか写真とか値段とか</li>
</ul>
</div>
</body>

最後に今回の主役であるAjaxの記述。

これをカラーミーの共通テンプレートの一番下なり「集客->検索エンジン対策->
PCショップ用の設定」の欄なりにコピペしてください。トップページと商品一覧ページで指定したclass名を使いますのでコメントが付いている行の情報は書き換えをお忘れなく。

<script type="text/javascript">
$(function(){
$.ajax({
url: 'http://<{$home_url}>/?mode=cate&csid=0&cbid=●●●●●●●●&csid=0', //お求めの順番で商品が並んでいる状態の商品一覧ページのURL
cache: false,
dataType:'html',
success: function(html){
var product_num = 3; //抜き出したい商品の数
var list = $(html).find('.productlist-Item'); // 抜き出す情報を商品一覧ページから指定
for (var i = 0; i < product_num; i++) {
if ( !list[i] ) break;
$('.top-List').append(list[i]); // 抜き出した情報を埋め込みたい場所を指定
}
}
});
});
</script>

コードの解説

今回は「商品一覧ページに表示された情報を抜き出してトップページに埋め込む」ということをしています。もう少し細かく言えば、Ajaxで商品一覧ページを読み込み、読み込んだ情報の中からproduct_numで設定した数まで指定した要素を抜き出し、指定した場所に埋め込む、という感じです。

カラーミーの機能ではトップページにカテゴリ一覧等が表示できないのは冒頭で述べた通りですが、商品一覧ページなら任意のカテゴリやグループの一覧を表示したりできますよね。

そこでAjaxを使って好きな順番に商品が並んでいる商品一覧ページから情報を抜き出し、それをトップページに埋め込んでしまえば、あたかも最初からカテゴリ一覧があったかのように表示される、というわけです。

カラーミーの商品一覧ページはgetメソッドでURLに情報を渡して表示内容を切り替えているのでAjaxでも表示されている情報を切り替えられるんですね~。

もし特定のカテゴリやグループの一覧ではなく新着商品一覧やおすすめ商品一覧を表示したい場合は、商品一覧ページのソート機能を使って新着順なら新着順、おすすめ順ならおすすめ順に商品が表示されている状態のURLを指定してください。もちろん価格順もできますよ!

参照した記事

今回は以下の記事を参考にさせて頂きました。『花のや』のwadaさん、ありがとうございます!

カラーミーショップで任意のカテゴリをTOPに表示する方法

あとがき

Ajaxを使って強引にやらないと需要があるものを表示できないカラーミーは、やっぱり使いづらく感じますね。

あと、カートの中身はAjaxでも参照できないっぽいので、カートに入っている商品のオプション情報をトップページに表示したりは出来ないようです。

やはりECサイトを作るならWooCommerceが最強なのか…

P.S.
今回の機能の導入が上手くできない人はコメント等で連絡ください。サポートしますので^^

WEBデザイナーこそデザイン以前の領域に踏み込むべき

こんにちは、石井です。

昨日はWordCamp Tokyo 2017に参加してきました!

WordPressコミュニティのイベントに参加するのは初めてでしたが、座り続けてお尻が痛くなったことを除けば良かったです。

中でも関口 裕さんの『みんなでデザイン、あなたもデザイン』というセッションが印象に残りました。

そこで今日はそのセッションの内容の一部を拝借しまして、今のWEBデザイナーに足りないものについてお話していきます。

みんなでデザイン、あなたもデザイン

一応セッションの内容にも触れておきましょう。

簡単に言えば、デザインが点の制作から面の設計に変わってきたという視点からデザイナーの働き方について問題定義する、といった内容でした。

おそらく関口さんは「デザイン思考のようなデザインを”開く”潮流は、デザイン以前の領域におけるデザイナーとその他の職種(エンジニアなど)との協働を可能にし、高い持続性を生む。今の時代はそういう働き方が理想だよね」的なことを言いたかったのかと思います。

社会学的な視点から議論が展開されていて、社会学をかじったことのある身としては面白かったです。

が、詳しくご紹介すると今回のテーマからそれるので、気になった方は後日WordCamp Tokyo 2017のサイトで公開されるビデオとスライドをご覧ください。

デザイン以前の領域

今回テーマにしたいのは「WEBデザイナーの仕事領域」です。

鍵となるのはセッション内で引用されていた松倉早星さんというプランナーの方のインタビュー記事。

そもそも新しい会社にしなきゃなって思った経緯のひとつに、何かひとつクリエイティブで課題を解決しても、プランナーなのでそこの奥にある課題が見えちゃったりします。本当はそこも手をつけたい!でも、依頼としてはすでに終わっているので「お疲れ様でした!」で終わってたんです……。でも、どうしても言わずにはいれなくなって、伝え出したのが去年あたりからです。「言われるまで気づきませんでした」としっかり聞いてくれて、いままで点だったできごとが線になり、面をつくれる手応えを感じました。

一過性のもので人の行動とか価値観、さらには人生観を変えることはできないけれど、丁寧に積み重ねて、語りかけていくことで実現できる、数年前からそう感じています。そこに対して、もうちょっと腰据えて向き合っていきたいなという思いで会社を作りました。

JDN『リサーチとプランニングにしっかり向き合える会社をつくりたい-松倉早星インタビュー(2)』

関口さんはこれを踏まえて、”デザインがはじまる前の領域”に関わる人もデザインをしていこう、と仰っていました。

非デザイナーがデザイナーに、デザイナーが非デザイナーに歩み寄ることで良い働き方ができるかもね、ということでしょう。

今のWEBデザイナーに足りないもの

この話を聞いた時「そうだそうだ!」と思いました。

世間一般ではWEBデザインの業務は「制作するサイトの見た目を装飾すること」とされています。もちろん例外はあるとは思いますが、業務の範囲がWEBサイトの目に見える部分に限定されている傾向はあるでしょう。

でも、それってどうかと思うんです。

そもそも僕は、デザインとは「クライアントの問題を解決するための表現全般」のことだと考えています。ただ目に見えるグラフィックを制作するだけがデザインではありません。当然ですが、そこには問題解決のための仕組みづくりや設計といった目に見えない部分の作業も含まれています。

しかし、WEBデザイン業界になると、目に見えない部分がないがしろにされる節がある。

確かに分業体制を引いてWEBデザイナーに装飾だけをさせるのは効率的かもしれません。ですが、設計や仕組みが特に大切とされるWEBサイト制作において、デザイナーが目に見えない部分に関与しないのは致命的です。設計や仕組みを理解して初めて(言い方は悪いですが)お客様をそこに誘導する=ビジネス上の問題を解決するデザインができるはずですから。

見た目は綺麗だけどお客様からのお問い合わせが少ないWEBサイトが出来てしまう原因がこれでしょう。WEBサイト制作で最も大切な仕組みや設計を理解していない人が見た目のデザインをするから、お客様からの思ったような反応がとれないのです。ひどい時はデザインとアートを混同し、WEBデザイナーさんの自己表現で終わっていることすらあるでしょう。

WEBデザインの仕事領域を広げよう

そんな残念な現状がWEB制作・WEBデザイン業界にはあると思います。WEBデザイナーがデザイン以前の領域に触れていたら、本来ならもっとお客様に喜んでいただけたかもしれません。

だから、非デザイナーとデザイナーが歩み寄るべきだという意見に僕は賛成します。今回はそれをWEBデザイナーが非デザイン領域に踏み込むという視点でお話させて頂いたわけです。

本当に、WEBサイトの主たる目的であるビジネスにおける仕組みづくりや設計を知らないWEBデザイナーさんはもったいない。社会全体の損につながっていると思いますし、個人としても損しています。

何せこれからの時代は個人で活動していようがいまいが、企業やグループという枠を超えて仕事をすることになったりしますからね。目に見えない部分を扱えるかどうかで、そういったチャンスをものにできるどうか変わってきます。そして、もし仮に独立することになったら、その違いは雲泥の差となって現れるはずです。

だから、この記事を読んだWEBデザイナーさんはぜひ、ビジネス周りの仕組みづくりや設計、マーケティングなどを勉強してみてください。見た目のデザインの枠を超えて目に見えない部分に精通しているWEBデザイナーって貴重ですから。重宝されるはずです。ちなみに個人活動しているのなら、それができないと話になりません。

もし「目に見えない部分、勉強するぞ!」と思ったのなら、ぜひ僕のブログを読んでみてください。きっとお役に立てると思います。

それでは、ありがとうございました!

config.rbに書いておくと役立つもの【SASS・Compass・Windows】

こんにちは、石井です。

この前Sublime TextでSASS・Compass環境のコンパイルが出来ない場合の対処法を書いたのですが、その中でconfig.rbをいじりました。

今回はそのついでにconfig.rbに書いておくと良いかもしれない記述をいくつか紹介します。

cache_dirの指定

上記記事で書き加えたものです。

SASS・Compass環境でコンパイルしようとするとエラーが発生することがあります。

エラーには種類があるようですが、僕の直面したエラーは.sass-cacheフォルダがおかしな場所に作られていたことが原因でした。

そこで以下の記述によって.sass-cacheフォルダが作られる場所を指定しています。(今回はconfig.rbと同じディレクトリに.sass-cacheフォルダが作られるようになっています。)

cache_dir = ".sass-cache"

日本語使用時のコンパイルエラーを防ぐ

Windows環境でCompassを使っている時、scssファイル内に日本語があると、コンパイル時に「Invalid Windows-31J character」と書かれたエラーが発生することがあります。(コメント内にしか日本語が存在しない場合も発生します)

以下の記述をconfig.rbに加えればこのエラーを回避できるのでWindowsユーザーにはお勧めです。

Encoding.default_external = 'utf-8'

ソースマップの作成

Chromeのデベロッパーツールを使っていると、選択中のスタイルの場所がSASSファイルではなくコンパイル後のCSSファイルの場所で表示されます。

SASS勢としては、一々CSSファイルとSASSファイルを照らし合わせて探すのは面倒くさいので、デベロッパーツールにSASSファイルの場所を表示させたいところです。

そこで登場するのが「ソースマップ(.css.map)」。コンパイル前のSASSファイルの場所とコンパイル後のCSSファイルの場所を紐づけた地図のようなものです。

このソースマップを対応するCSSファイルと同じディレクトリに置いておけば、ChromeのデベロッパーツールでSASSファイルの場所が表示されるようになります。

で、Compassを使えばソースマップを簡単に作ることができるんです。

config.rbに以下を記述しましょう。

sourcemap = true

こうするだけで、CSSファイルのコンパイル時に、コンパイル後のCSSファイルのソースマップを自動で作成してくれます。

ソースマップはコンパイル後のCSSファイルと同じディレクトリに作成されますが、ソースマップをそのディレクトリから移動させてしまうと参照先がずれたりしてしまうので注意しましょう。

コンパイル後のCSSファイルを後から移動させる可能性がある場合は、あらかじめconfig.rbのcss_dirを指定して、ソースマップと共に移動先のフォルダに直接出力されるように設定しておいた方がよいと思います。(WordPressを使うときなど)

また、Compassではconfig.rbにenvironmentを指定することで開発版(:developement)と納品版(:production)でコンパイルの内容を振り分けることが出来ますが、例えば納品版でソースマップを出力したくない時は、以下のように記述すれば大丈夫です。

sourcemap = (environment == :production) ? false : true

もしsourcemapをtrueにしてもChromeのデベロッパーツールでSASSファイルの場所が表示されない場合は、F12を押してデベロッパーツールを開き、デベロッパーツール右上の×ボタンの隣にある3つの点(Customize and control DevTools)を開き、Setting->Preferences->Sources内の「Enable CSS source maps」にチェックを入れて下さい。

とりあえずコレは入れとけ!Sublime Text 3のパッケージ

こんにちは、石井です。

今回はSublime Text 3を使い始めるときに「とりあえずこれは入れとけ」と言えるパッケージをご紹介します。

「最初から大量に入れすぎると各パッケージの役割がわからなくなる」という考えから、様々なサイトを巡って僕が吟味したものたちです。

これらだけ入れておけば、通称「恋するエディタ」Sublime Textに恋できます。たぶん。

おすすめパッケージ一覧

Package Control

パッケージの管理とかがすごく楽になる必需品。とりあえず入れとけコンテストがあったら間違いなく1位。

SASS, SASS Build, SCSS, Compass

これらを導入することでSublime TextからショートカットキーでSASSをコンパイルすることができるようになります。大変便利!

IMESupport

Sublime Textでは日本語入力時に入力欄が別ウィンドウで表示されてしまいますが、それを通常のインライン表示に変えてくれます。背景が白いのは気になるけど笑

ConvertToUTF8, Codecs33

この2つのパッケージをインストールすることでShift_JIS(シフトジス、コンピューター上で日本語を含む文字列を表現するときに使われる文字コード)で書かれたファイルの文字化けを防いでくれます。(正確にはShift_JISからUTF-8に変換している)

しかし、Codecs33はPackage Controlからインストールできません。

なので、こちらのページのClone or Downloadボタンを押してZIPファイルをダウンロードし、解凍したファイル「Codecs33-osx」の名前を「Codecs33」に変換して上で、Sublime TextのPreferences->Browse packagesを押して開かれるフォルダに入れてあげてください。

SideBarEnhancements

サイドバーの右クリックメニューで出来ることが増えます。パスをコピーしたり複製なんかもできるのでフォルダを開く手間も省けますね!

All Autocomplete

自作の定数や関数を補完して入力予測してくれるようになります。

AutoFileName

htmlでimgのsrcを設定するときにフォルダ内のファイルを入力予測してくれるようになります。他にもwidthやheightを自動挿入してくれたり。おかげで画像まわりのコーディングがかなり楽になりました。

BracketHighlighter

タグや括弧の始まりと終わりをわかりやすく表示してくれます。初歩的なミスが減るかと。

Color Highlighter

cssで色を指定している部分に、実際に表示される色を表示してくれます。覚えることを減らすのは大事ですね。

Goto-CSS-Declaration

htmlのclassやIDにカーソルを合わせてショートカットキーを押すと、それらを定義しているcssファイルの場所までジャンプしてくれます!素敵!ただ、定義しているCSSファイルが開かれていないといけません。

wpseek.com WordPress Developer Assistant

WordPressを使用している人専用。WordPressの独自関数などが補完されて入力予測してくれるようになります。

終わりに

こんな感じでしょうか?

まぁ、究極的には、万人に当てはまるマストなパッケージなんてないので参考程度に。

使ってていらないなと思ったら消していきまーす。

それでは、ありがとうございました!

Sublime Text 3でSASS・Compass環境のコンパイルに失敗する問題

こんにちは、石井です。

今回はSASS・Compass環境でSublime Textを使ったコンパイル時にエラーが発生した時の対処法についてご紹介します。

ことの経緯

以前SASS・Compass環境を初めて導入したとき「一々コマンドでwatchしたりするの面倒やな…」と思い、簡単にコンパイルできる方法を探していました。

koalaみたいなコンパイラも検討しましたが、コンパイラ開くのもコマンド打つのも大して変わらないという結論に至り、却下。

結局行きついた先は、みんな大好きSublime Textと連携したコンパイル方法。

ショートカットキーだけでコンパイルできるのは効率厨の僕にとって大変ありがたいです。

丁度エディタを変えようと思っていたのもグッドタイミングでした。

No such file or directory @ rb_sysopen

しかし、途中で問題が起こりました。

それは諸々の設定を終え、試しにコンパイルしようとした時のこと。

Sublime Text君がこんなメッセージを突き付けてきました。

No such file or directory @ rb_sysopen - C:/Users/[USER名]/AppData/Roaming/Sublime Text 3/Packages/Compass/.sass-cache/[ここからファイルパスが続く]

なんじゃそりゃと思って検索をかけてみるも、他のエラーに関することばかりで解決策が見つからず。

仕方なく自分で調査したところ、原因を突き止めました。

原因は「.sass-cache」フォルダ

原因は「.sass-cache」フォルダにありました。

エラー内容を解読すると、どうやら

「Sublime Textフォルダの中のCompassフォルダの中の.sass-cacheフォルダの中のとあるファイルが見つからないよ!」

ということらしい。

「ん?.sass-cacheってそんなとこに作られんの?」

ここが怪しいと睨み、さっそくconfig.rbをいじって.sass-cacheフォルダが作られる場所をプロジェクトフォルダのルートディレクトリに指定。

そしてコンパイルを試したら…

やったぜ

cache_dirを設定しよう

今回のエラーは.sass-cacheというキャッシュを溜めておくフォルダが変なところに作られ、それをコンパイル時に参照しようとした際に不都合が起こったのが原因のようです。

だから、config.rbから.sass-cacheが保存される場所を指定してあげればおk。

場所はとりあえずプロジェクトフォルダのルートディレクトリにしときました。

config.rbの好きなところに以下を記述します。

cache_dir = '.sass-cache'

同じようなエラーに困っている方、お試しあれ。

.sass-cacheはどこに置くのが適切なのか?

今回問題となった.sass-cacheフォルダですが、フォルダ構成によってはサーバーにアップロードする容量の増加と転送スピードの遅延を招きます。

気になる人は以下のサイトを参考に、.sass-cacheフォルダが作られる場所を変更してみてもいいかもしれません。

Compassのキャッシュ「.sass-cache」の書き出しをコントロールする方法

多分「Sublime Textフォルダの中のCompassフォルダの中の…」みたいな変な場所に作らなければエラーも出ないでしょう。

それでは、ありがとうございました!