はてなブックマーク

Sass+CompassでWordPress用のCSSを作ると、ビジュアルエディタ用CSSの管理が幸せになる。 WordPressのエディタ用CSS、editor−style.cssとしてよく紹介されていますが、すごく便利ですよね。 サイトによって違うスタイルを、いい感じに管理画面で表示することで、記事の完成系がすごくわかりやすく、直感的な操作に近付きます。 ちなみにこのブログはこんな感じのビジュアルエディタで投稿されています！ 自分のブログやウェブサイトでは使っていなくても、実案件などでは使っているよ！という人も多いのではないでしょうか。 ただ、普通に用意しようとすると、面倒臭いんですよね。 メインのcssに変更を入れるたび、editor-style.cssにも手を入れなくてはならないというのはどうにも面倒臭い。 @importでCSSを読み込む形で切り分けても良いのですが、何かと柔軟に

jQueryのDOM操作にしてもそうなのですが、この手のCMS的なアプローチってテンション上がるなあと思うのです。 サーバサイドでプログラムが動かない時、スマホとPCが別ファイルだから両方更新するの面倒臭いよー！しまいにはTOPと下層ページで同じ原稿流し込むのも面倒臭いよー！でも更新を1ファイルで済ませたいよー！といった時によくJSに逃げ込んでいたわけですが。 試しに前々から興味を持っていたRiot.jsで似たようなことをやったらどうなるのかなーと、触ってみたのでめもめも。 今回の目標 jQueryのAjaxで外部ファイルのjsonを読み込んで表示するスクリプトっぽいものをRiot.jsにしてみる。というのが一番実戦的な気がするので、そんなことをしてみるなど。 jQueryでやるならこんな感じ？ <ul id="NewsArea"> <li> <div class="date">日付</d

最近、手書きロゴを使った案件があり、ひたすら手書きをスキャンしては加工を行っています。 と、せっかくなので、手書き文字をどんな感じで素材として作り込んでいくかといったお話しをしたいと思います。 イラストなどにも流用できる方法なので、手持ちの武器になるのではないでしょうか。 何はともあれ紙に書く。そしてスキャン。 コピー用紙など、無地の紙に、鉛筆などで下書きを行い、出したい太さに合わせたペンで書くだけでOKです。 下書きの線は消しゴムで消しておきましょう。 文字がガタガタなのは、あとでPhotoshopやIllustratorで編集が効くので、ある程度気を使う程度で大丈夫です。 とはいえ、一発で綺麗に書けていれば後が楽なのですが・・・。 スキャンするときのポイント 解像度は高めにしておきましょう。 どんなサイズ感で描いたかによるのですが、僕はだいたい300dpiくらいで取り込んでいることが多

使える使えないの話と、デザインできるできないの話はそもそも論として違うのですが、エンジニアさんだからこそ、デザイナーが意外に使っていない機能を使いこなせると思っているんですよね。 エンジニアさんだって、画像を切り出すために月5000円も税金をAdobeさんに納めているのです。 そんなエンジニアさんが少しでもイラレやPhotoshopを使えるようになったら、「俺は使えるけど切り出しにしか使わないけだなんだ！（キリッ）」と言える未来がくるぞ！とおもっている次第です。 といったところで、エンジニアさん向けのTIPSとして、グローバルカラーの使い方をご紹介します。 イラレの色を変数的に使えるようにするグローバルカラー アートボード上の色を変数のように扱えれば、何箇所も同じ色を使っている時に楽ができると思いませんか？ 以外とデザイナーさんでも使っていないことがある機能なのでこれはエンジニアさんにこそ

fireworksの開発が終了し、WEB制作に便利なドローイングソフトとして脚光を浴びているSketch。 最初はfireworksの代替品程度の認識でしたが、シンボル機能、スライスを切らなくてもシンボルがスライス化される機能などなど、非常に便利な機能が揃っています。 IllustratorやPhotoshopはまだまだ必要なポイント、機能があるとは思いますが、きれい目なワイヤーフレームにパーツを乗せてカンプ化、そのまま切り出しなどという基本的なデザインワークフローを実現するのに便利な機能が盛りだくさんの注目アプリケーションです。 先日のgulp勉強会で、sketchで作っているデザインを編集、保存するだけで画像やフォントが書き出され、gulp経由でブラウザもリロード！みたいな便利な機能紹介もあり、思わず買ってしまったため、日本語でsketchについて解説しているページや記事を自分用のメモ

マーズナレッジ主催、OSSカフェマスターの河村さんによるgulpの勉強会、「Gulp.jsで飼いならす、最新フロントエンドツールの使い方」に参加してきました！ 現在、Webの制作界隈にはエンジニア方面からデザイナー方面に向かって猛スピードでやってくる自動化の波。 GruntだったりYOMANだったり、タスクランナーとプラグインによって、自動化できるものを自動化することでワークフローも改善できるよね。 といったところで、河村さんの制作環境を中心に、gulpを紹介していただきました。 gulpを全力で使うと、後ろから見ている人には魔法に見える 本当にすごい。使っている他のアプリケーションによる効果も大きいのですが、エディタでいじっていると保存するそばからブラウザでの表示が変わっていく。デザインに使っているグラフィックソフトでファイルを保存するとスライスも切り直さずに表示が変わっている・・・。

こんにちわ！concrete5 Japan Advent Calendar 20144日目は、東京ユーザー会のタケさんによる初心者勉強会についての記事に続き、最近コンクリを触り始めたばかりの90zbearがお送り致します。 今回は、5.7系がリリースされた直後くらいからconcrete5を本格的に触り始めた僕が、初めてオリジナルテーマを作った際にポイントになったことなどを簡単に並べてみます。 これからコンクリをはじめる人の参考になれば幸いです。 2日目のrriinnddoouuさんの記事とかぶってしまった気もしますが、僕なりにシングルページのウェブサイトをひとつ、bootstrapベースのウェブサイトをひとつ、あわせて2つのウェブサイトを作ってみた感想とハマったポイントをまとめてみました！ body直下にconcrete5で編集するためのwrapperを用意する こいつがいないと、横からに

普通の画像をアップするだけで擦りガラスのようにボケた画像を表示させたかったのです。 別にボケた画像を作れば良いのですが、正直面倒臭いし、そんな方法で運用しようとすると絶対歪みが出ますよね。 「PhotoshopがないならGIMPを使えばいいじゃない」 なんてクライアントには言えません。 というわけで、WEB上でボケた画像を生成したり、表示をするための方法を調べてみました！ CSSでぼかす 真っ先に思い浮かんだのはコレです。 CSSフィルタを使ってボカす方法です。 サンプル コード cssに以下を記述。 img.blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } どうですか？ボケてますか？ フチまでボ

本日、LINEのアカウントがハックされ、最近はやりのLINE乗っ取りwebmoney買ってきてください詐欺に使われました。 LINEで繋がっている皆様にはご迷惑、ご心配をおかけいたしましたことをお詫び申し上げます・・・。 と、そんなわけで、幸いにも僕の周りは この件の流行りを知っている 無駄にリテラシーが高い お祭り好き といった、もはや輩と言っても過言ではない人々が揃っていたので、彼らから送られてきたスクリーンショットにツッコミを入れてみたいと思います。 一部の方々は僕に教えてくれる前に遊んでました。これだから・・・もう・・・。 というか、今までの被害の話を見ているより、むちゃくちゃ口悪いですね。最近の犯人。 30代会社経営男性の場合 とりあえず煽る。これだから僕の周りは輩ばかりだと思うのです。嫌いじゃないけど。笑 20代大学院生の場合 乗っ取りではないらしいです。 30代白塗り系V系ピ

先日@mah_labと下北沢OSSカフェにて開催したSass+Compass勉強会の前後から、個人的な新規制作物は全てSass+Compass環境での制作に切り替えました。 実際にはSassではなく、Scssでの導入を行なっていますが、実際使ってみて、運用してみての所感をまとめてみたいと思います！ 制作環境・手順の変化 メインエディタが元々Coda2であったことから、Coda2内蔵コンソールを使用して自動監視で制作しています。 所謂「黒い画面」に対しては、アレルギーこそないものの、苦手意識を持っている部分もあり、不安な部分もありましたが、その日の作業開始時に compass watch を入力するだけなので、特に難しくもなく使えています。 それでも不安な人は、プロジェクト立ち上げの際にシェルスクリプトを作り、ダブルクリックで起動できるようにしても良いかもしれませんね。 シェルスクリプトの例

高円寺のコワーキングスペース、こけむさズのイシジマさんが代表をつとめる、ザ・マーズナレッジ株式会社主催のハッカソン、「PHPブートキャンプ」に参加してきました！ PHP初心者どころか、その日入門でもOK。土曜の昼間15時から日曜9時まででCMSを各々作る！という地獄のブートキャンプでした。 僕は人が作ったコードをちょいちょいといじるのと、フレームワークとにらめっこするのと、wordpressのテーマを作るくらいのレベルなのでゼロからではないですが、ゴリゴリ書けるわけでもなく・・・。 体系的にきちんと学んだ事がなかったので、リファレンス読み会に参加したかったというのもあり参加しました！ そんなドMなハッカソンの参加者は約30人。恐ろしい・・・。 講師はマーズナレッジ取締役の佐々木多生さん。 先日のニコニコ超会議のニコ動超チューニング祭り最優秀賞が記憶に新しい武藤さん、株式会社イノーバCTOの

WordPressで色々作ると楽だけど、そこまで機能いらないよ・・・。だとか、CakePHPは覚えるの大変すぎて・・・。とかっていう話はちょこちょこあるのではないかと思います！ そこで、以前下北沢OSSカフェの河村さんからオススメ頂いた、PHPマイクロフレームワークのSlimを試してみました！ Slimである意味 イマドキのモダンでイケてるシステム会社さんなんかだと、herokuだったりAWSだったり、PaaSやらSaaSを使っている事も多いと思います。とはいえ、以下のような状況を抱えている人も結構いるのではないでしょうか。 専用サーバやVPSを運用しているので、そこを有効活用したほうが色々とコストがかからない。 黒い画面から色々インストールするのが怖すぎて泣きたい。 知識のあるサーバ管理者がいないので、さくらやhetemlなどの容量大きめプランのホスティングサービスを使っている。 そもそ

WordPressをCMSとして使う際に、記事ページを作るのではなく、PDFがある場合はPDFを表示したい！という要望があったので備考録程度にメモ。 カスタムフィールドと、WordPressの条件分岐を利用して、表示を切り替える方法です。 PDFのアップロード機能を追加 色々な方法があるとは思うのですが、今回はプラグイン「Custom Field Template」を利用して、カスタムフィールドで実装してみます。 Custom Field Templateは日本語で設定できるので、とっつきやすいと思います。 また、通常のカスタムフィールドだと、ファイルアップロード→ファイルURLを入力のような形で登録することになるので、それを簡略化できるのも魅力です。 できることなら標準のファイルアップのように、ドラッグ＆ドロップでできればなお良いけど、多分この方法が一番初心者向きなのかなあ？とおもいます