MacでWebデザイン、あると便利なアプリ48＋2 | gaspanik weblog
最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな？と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。 「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね（会社が買ってくれるならいいですｗ）。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。 いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え？何それ」みたいなのがあるかもです。 今回は各種
LionでApache＋PHP＋MySQLを動かしましょう、そうしましょう | gaspanik weblog
WordCamp Tokyoも無事に終わり、そろそろWordPressを試してみたくなった人に向けて…、というわけではないのですが、Mac OS X Lionの環境で比較的簡単に自由度の高いある意味LAMP環境（Lion + Apache + MySQL + PHP）を作るまでを備忘録がてら、初心者の方でもできるように解説してみようかな、と。 OS XでWebサイトのテスト環境を作る方法はいくつかあります。お手軽なのはシステム環境設定から「パーソナルファイル共有」を有効にする方法ですが、これだとHTTPサーバである「Apache」が有効になるだけ。 じゃあということで、「MAMP」とかを使うと簡単に「Apache＋PHP＋MySQL」な環境は用意できるものの、あらかじめパッケージングされた内容になってしまう。環境をゼロから作ることを考えたら圧倒的に簡単ですが、サイト開発とか実行環境に必要な
ありがとうございました、のWordCamp Tokyo | gaspanik weblog
先日開催された「WordCamp Tokyo 2011」に行ってきました（スピーカーなので行かなきゃダメなんすけどｗ）。あらためて、運営スタッフの皆様、スピーカーの皆様、そしてご来場くださった皆様ありがとうございました。そして、長丁場お疲れ様でした。 多くの方が既に参加レポートをあげてくださっていますが、ボクはボクなりに今回のWordCampの話を書き綴っておこうかと思います。 今回登壇するにいたるまで@naokomcさんから「WordCamp Tokyoやるから出てくんない？」と打診をいただいたのが10月初旬。普段あまりWordPressのコミュニティに貢献しているわけでもないので、「こんなボクで何かお役に立てることならやりますよ」とオッケイを。実はもともと彼女とは旧知というか、世の中でブログが流行り始めた頃からその存在を知っていましてね。そう、皆さんご存じないと思いますが、ボクは日本で
便利な人には便利なChromeの拡張機能 33＋1コ | gaspanik weblog
皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。 そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。前半は多くの人を対象に日常のブラウジング体験を快適にするもの、後半はWebサイトの開発系でちょっと役立つものといった感じでジャンル分けしてお届けします。ま、あくまでもボクが普段使ってるものベースですが…、キャプチャ中の★やユーザー数も参考に。 いくら拡張機能が便利だって言っても、入れすぎたらそれは重くなるだけですからね。適当に取捨選択して入れるなり、使う時だけオンにするなりしまし
MacBook Proに入れたアプリ22個＋おまけ | gaspanik weblog
先日の記事が思わぬ爆発をして驚いてるこもりです、こんにちは。実は、こないだ2年ぶりぐらいにマシンを新調したんですよね（といっても、MacBook Proの13インチの最安仕様 笑）。で、あの記事で紹介した以外にも直接仕事に関係しないけど、MacBook生活のアレコレを便利にするアプリも入れています。 今回もまた懲りずに、Macに乗り換えようかなと思ってる方や乗り換えたばっかりの方、MacBookなんちゃらを使ってカフェやコワーキングスペースなどをノマド気味にウロウロしてる方のために、ボクがMBPにインストールしたアプリを22個紹介したいと思います。 MacBookをお使いの方もそうでない方も。今回はジャンル分けはしてませんが、アレコレと多岐にわたっています。あと、最後の方には日常のブラウジングを少し快適にするだろう Safariの機能拡張もおまけでいくつか。 では、ちょっと短めですがいって
GoogleさんのPage Speed Serviceとやら | gaspanik weblog
次から次へとGoogleさんはいろいろやってきますね（笑）。これまでもWebの表示パフォーマンスの最適化についてはプラグインの公開をはじめ既にいろいろなことをやってらっしゃいますが、今度は「Page Speed Service」ってのを公開されてます。 簡単にいえば、Googleさんがデータを拾い上げて最適化したデータをGoogleのサーバから世界中に配信しちゃうよ、ギャハ。しかも今なら無料！みたいなこと？ となると、CDN系サービスの存在意義は…（厳密には違うだろうけど）。 ま、登録する前に置き換えたらどうなるかチェックから始めましょう。 専用のWebPageTestのサイトでチェックサイトの右側にある「Check It Out」ボタンを押すと下のページに移動します。 このページとかはまだ日本語化されていませんが、Page Speed Serviceのマニュアルみたいなもんですね。で、そ
特定フォルダ内の画像をまとめて最適化する、の巻 | gaspanik weblog
暑苦しい土曜の夜、Twitterを眺めていたら「画像を最適化したいけど、うん千枚あって…」みたいなやりとりが目に止まりました。画像の最適化で楽をしたい場合は、「Smush.it™」とか「punypng」といったオンラインのサービスを使わせていただくのが手っ取り早い方法ですが、何千枚ともなると現実的ではないですね（笑）。 そこでちょっと調べてみたらありました。コマンドラインですが、特定フォルダ内の画像（JPGかPNG）を一発で最適化してしまう「imgopt」なる素敵ツールがあるじゃないですか。ということで、簡単ですがインストールして使うまでをまとめておきます。 （追記: 2011.07.03）なんか大阪にいる心優しい人が教えてくれましたよ、OS XのGUI版「imageoptim」。以下の準備が面倒な人はこれですな。Windowsな人はこの辺になんかあるかも。 ※ただし、OS Xのやり方なの
YSlow for Mobile が出ていますね | gaspanik weblog
Webページを表示速度面で最適化するための改善点を調べてくれることで有名な米Yahoo!さんの「YSlow!」ですが、そのモバイルデバイス用ブックマークレット「YSlow for Mobile」が公開されています。 で、ものは試しで使ってみました。 ブックマークレットを保存して、YSlowを呼び出せばオッケイとりあえず、公開されているページにあるいずれかの方法でブックマークレットをモバイルデバイスに保存しましょう。あとは、チェックしたいページを開いて、保存したブックマークレットを呼び出すだけでオッケイです。 なんか変ですが、まだβ版ということで（笑）。ブラウザ版の拡張機能と同じくいくつかのプロファイルを選択できるようになっています。「Run Test」をクリックすればチェック開始。 すると、表示しているページをチェックして改善点を出してくれます。キャッシュを空にしても「0.0k」とかでてた
うちのWordPressでやってることを教えます | gaspanik weblog
この1年ちょっとぐらいかな？結構あれこれとサイトのパフォーマンス改善みたいな話（WordPress含む）を書いてるんですけど、昨日書いて公開したのが思いの外反応があったようでありがとうございます。お礼といってはなんですが、誰かのためになるかもしれないので、現時点でのうちの環境を記しておきます。 以前から読んでくださってる皆さんには「またかよ」って話になるのですが、このへなちょこブログを書いてるWordPressの設定は以下のような感じです。昨日書いた内容に大体則すような流れにしておきました。 キャッシング: W3 Total Cache（以下、W3TC）Minify化: HTMLのみW3TC、CSS/JSは手動（外部サービス以外）画像の最適化: WP Smush.itで自動実行配信サーバの分割: EdgeCastのCDN（Content Delivery Network）Gzipの有無:
高速化は一夜にしてならず | gaspanik weblog
ちまたではPHPのflush()を使ったWordPressのプラグインが話題のようですが、Webサイトの表示速度を改善したかったら、もう少しサイトの作り方を根っこから考えなおした方がいいんじゃないか？、と思いましてね…。 公開されているプラグインにどうこう言うつもりはなく、諸手を挙げて喜んでらっしゃる世間様の様子を見ながら「なんかなぁ…」「入れる前にできることあるんじゃないかな？」と。ちなみにボクも昔flush()での手法を試したことがあるんですけど、結局すぐやめちゃいました。 回線速度自体は昔に比べたら格段にあがってるのは事実ですが、いまとなっては環境としては比較的貧弱なスマートフォンみたいなデバイスも増えています。 サーバの負荷が気になるとか自分とこじゃできないなどの理由で、テキストデータをGzip化（データサイズが半分以下になる）しないのであれば、その他の部分でサイトの全体的な転送デ
CSS Nite LP, Disk 14 フォローアップ | gaspanik weblog
先週末の土曜日、「CSS Nite LP, Disk 14 / Photoshopper meets Fireworks」が開催されました。イベントにご来場下さった皆様、そして関係者の皆様、大変お疲れ様でした。 まずは、この場を借りてお礼を。ありがとうございました（深々）。 さて、当日はFireworks特集となるイベントでしたが、ボクの担当は他の登壇者の皆さんの内容とはちょっと毛色が異なるカラーマネジメントの話でした。「FireworksのTipsやテクニックなどを知りたい方が多いんじゃなかろうか、今回の内容に関して大丈夫かな？」と思っていたのですが、予想以上に良い反応をいただいておりホッと胸をなで下ろした次第です。 とはいえ、プレゼン自体はボロボロだったので、その反省や参加いただいたお礼をこめて当日伝えきれなかったことをこちらのエントリーにまとめてみました。 ＃前もって書いておきますが
Drag&Dropで簡単写真共有、min.us | gaspanik weblog
Twitterやってたりすると、「あぁ、写真どっかにアップしてみんなに見せたいな？」みたいなことがありますよね。iPhoneとかならそのまま添付ついでにつぶやけるけど、パソコンでやってる場合は一旦どこかにアップロードしなければなりません。 とはいえ、いちいちログインしたりダイアログからファイル選んだりといったことは割と面倒。そんなときは、ドラッグ&ドロップで簡単に写真が共有できるサービス「min.us」を使うと良いかもしれません。 ドラッグ&ドロップ、ただそれだけでOK使い方はとても簡単。サイトに繋いでブラウザウィンドウ内にファイルをドラッグ&ドロップするだけです。 アップロードが終わると右上に出てくるダイアログでタイトルなどが変更可能です。後から編集する用のURL（上）と公開用のURL（下）が2つ表示されるので下の方をみんなに教えましょう。 min.us、頭の片隅に覚えておくといざという
写真に一句そえる、「フォト一句」 | gaspanik weblog
iPhoneアプリの紹介です。iPhoneで撮った写真やパソコンからライブラリに転送した写真などに一句そえるアプリ、「フォト一句」です。一句といっても、そんな大げさなものではなく、3行を自由に使って文章が書き込めるって感じですね。 →photoikku フォト一句 試してみました。作例です（笑）。 iPhoneで撮っても良し、ライブラリから選んでも良しとまぁ、携帯百景のような手書き風な書体ではなく、明朝とゴシックのいずれかの書体と文字サイズが選べて、行間や文字色なども変更可能です。 それなりの写真にそれなりに文章を入れると、不思議と「できる人になったような気がする効能」があるようです（笑）。350円のアプリですが、ちょっと一言入れて繊細なフリを演出する時にも使えそうですね（ぉぃぉぃ）。 → photoikku フォト一句（iTunes Store） ＃余談ですが、サイトの方もキレイに作られ
YSlow!、使ってわかるあんなことこんなこと | gaspanik weblog
先月発売された「Web Designing」2010年1月号の特集では、ただの紹介だけに留まっていたツールの簡単な解説でもしてみようかと思います。今回は「YSlow!」で次回は「PageSpeed」ってな感じでお届けします。 双方のツールを使ってトータルであれこれと解説したいところなので、このサイトで割と画像を使ってる「そうだ、京都、いってきた」的なページを参考ページとします。 では、そんな感じで始まり始まり。 まずは、YSlow!が使えるようにする米Yahoo! Inc.さん謹製の「YSlow!」は、Firefoxのアドオンです。これ単体で動作するわけではなく、あらかじめ「Firebug」というアドオンが必要になりますので、こちらもあわせてインストールしましょう。インストールするとブラウザウィンドウの右下に「虫」のアイコンが出てきますので、それをクリックするとFirebugの画面を呼び出
WPのパフォーマンスを改善してみようか | gaspanik weblog
日本のWeb業界でもそろそろサイトの表示パフォーマンスをどうにかしなきゃなぁ…と考えている方もいらっしゃることでしょう（ごく一部かもしれませんが 笑）。いわゆる普通のWebサイトの表示パフォーマンスの改善については、ここでも年末から数回にわたって取り上げています。 Webサイトの高速化的な話をWD誌でYSlow!、使ってわかるあんなことこんなことPage Speedでチェックついでに最適化Page Speedが1.6βになったようでここのエントリーに挙げた以外に、ちょっと前にゲリラ的にUSTREAMでくっちゃべってみたところ反響も大きかったようです（最初の回は特に他のどこ探してもないことも言いましたしね、フフフ）。 で、今回はこのブログでも使っているWordPressのパフォーマンスをアップさせるためにできることをいくつか紹介したいと思います。「できる」「できない」は設置されている環境で異
gaspanik weblog
最後にこのブログに書いたのが1年前。こもりは元気に生きております。本年中は全国各地を呼ばれもしないのに押しかけたりして、外向きの交流を図っていました。今年1年かけてのんびりと仕込んできたことを、来年は形にすることになります。 どうぞ、今後ともよろしくお願いいたします。 2012年もそろそろ終わろうかとしています。本年中は、こちらを更新する気が起きないほどに慌ただしく過ごしていた気がします。お世話になった皆様、こちらをご覧くださった皆様、ありがとうございました。 来年のことを言うと鬼も笑うそうですが、もう来年みたいなもんなのでいいでしょう。来年は年初から「CSS Nite LP, Disk 26」を皮切りに「amplifizr Vol.4」、JAGATの「PAGE 2013」と講演の機会をいただいております。また、昨年末からロクナナワークショップで「次世代Webデザイン講座」を担当しておりま
TextMate+Zen-Codingで超速コーディング？ | gaspanik weblog
先日の100の質問の答えにもちょっと書いたのですが、世の中には「Zen-Coding」なるものが存在しています。ちょっと前にWebデザイン関係の皆さんのTwitterでも「すげえ」とかってビデオが流れてましたけど、実はこれ相当前からあるんですよ（笑）。 Zen-CodingとはもともとTextMateとNetBeans用に書かれたプラグインのことです。HTMLとCSSのコーディング作業をより高速におこなうための機能追加をしてくれるものですね。前述の2つ以外に、AptanaやCoda、Espressoといったエディタ、最近ではDreamweaverのMXPファイルもダウンロードできるようになってます（*1）。 というわけで、今回はボクが普段使っている「TextMate」とZen-Codingの組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
