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」な環境は用意できるものの、あらかじめパッケージングされた内容になってしまう。環境をゼロから作ることを考えたら圧倒的に簡単ですが、サイト開発とか実行環境に必要な
便利な人には便利な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の機能拡張もおまけでいくつか。 では、ちょっと短めですがいって
MacでWebデザイン、あると便利なアプリ48＋2 | gaspanik weblog
最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな？と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。 「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね（会社が買ってくれるならいいですｗ）。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。 いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え？何それ」みたいなのがあるかもです。 今回は各種
特定フォルダ内の画像をまとめて最適化する、の巻 | gaspanik weblog
暑苦しい土曜の夜、Twitterを眺めていたら「画像を最適化したいけど、うん千枚あって…」みたいなやりとりが目に止まりました。画像の最適化で楽をしたい場合は、「Smush.it™」とか「punypng」といったオンラインのサービスを使わせていただくのが手っ取り早い方法ですが、何千枚ともなると現実的ではないですね（笑）。 そこでちょっと調べてみたらありました。コマンドラインですが、特定フォルダ内の画像（JPGかPNG）を一発で最適化してしまう「imgopt」なる素敵ツールがあるじゃないですか。ということで、簡単ですがインストールして使うまでをまとめておきます。 （追記: 2011.07.03）なんか大阪にいる心優しい人が教えてくれましたよ、OS XのGUI版「imageoptim」。以下の準備が面倒な人はこれですな。Windowsな人はこの辺になんかあるかも。 ※ただし、OS Xのやり方なの
Google Analyticsのレポートで表示スピードを見ちゃおう | gaspanik weblog
世の中はゴールデンウィークの真っ只中かと思いますが、皆様いかがお過ごしでしょうか。今日は、サイトのアクセス解析で有名なGoogle Analyticsのレポートにサイト内のコンテンツの表示スピードを組み込めるようになったというのでその話を。 GoogleさんのWebサイトの表示速度へのこだわりは有名なトコですが、これまではWebmaster toolsのLabsの中に「Site performance」という項目で、Googleのツールバーを入れてる方の計測結果をもとにしたサイト全体の平均速度が表示されていました（いや、今もまだちゃんとありますが）。 で、今回のこの話は、Google Analyticsのトラッキングコードにちょいと追加をしてやることで、コンテンツ全体の表示スピードをチェックをし、どのページが重いとかそんなのが調べられるって感じでしょうか。 導入は簡単、ひとことコードを追加
できることからはじめる、パフォーマンス最適化プラグイン7選 | gaspanik weblog
結局のところサイトパフォーマンスの高速化に最も効果的なのは「CDN使って画像をそっちから出すのが一番じゃね？」なんて思い始めたこもりです、こんにちは（笑）。いや、CDN使うのもいいのですが、その前提としてサイト全体をしっかり最適化しておくに超したことはありません（その方がより効果的なわけです）。 そんなわけで、今日は誰でもできることから段階的に適用する感じで、WordPressのパフォーマンス向上に役立つであろう素敵なプラグインを7つ紹介してみたいと思います。 まずは、画像を最適化するサーバ環境のこととか特別な知識も必要とせず、誰でもできる高速化の第一歩といえば、サイト内で使用する画像の最適化でしょう。WordPressにアップロードするJPGやPNGといった画像を自動的にスリムアップするのです。 WP Smush.it「WP Smush.it」は、アップロードする際に自動的に「Yahoo
Page Speedが1.6βになったようで | gaspanik weblog
昨年末にWeb Designingさんの特集に書いたWebサイトのパフォーマンスの話でも取り上げたGoogleさん謹製の最適化ツール「Page Speed」の1.6のβ版がリリースされてます（以前のエントリー）。 よく見るといろいろ変わっているようです（※クリックで拡大）。 年末のエントリーでは表示パフォーマンスが大事かとか簡単な使い方程度しか書いてないので、今回は気が向いたのでPage Speed 1.6βをベースにそこに挙げられている項目をひとつひとつ取り上げてみようかと思います。 長いので気合いを入れてください（笑）。 Page Speed 1.6β、それぞれの項目はこんな感じですよ細かい改善手法についてまでは解説しませんが、Yahoo!さんのYSlow!同様日本語化されてるわけではないので、それぞれの項目がどういうことを言ってるのかぐらいがわかる程度の簡単なもので（笑）。 ちなみに
CSS Nite LP, Disk 14 フォローアップ | gaspanik weblog
先週末の土曜日、「CSS Nite LP, Disk 14 / Photoshopper meets Fireworks」が開催されました。イベントにご来場下さった皆様、そして関係者の皆様、大変お疲れ様でした。 まずは、この場を借りてお礼を。ありがとうございました（深々）。 さて、当日はFireworks特集となるイベントでしたが、ボクの担当は他の登壇者の皆さんの内容とはちょっと毛色が異なるカラーマネジメントの話でした。「FireworksのTipsやテクニックなどを知りたい方が多いんじゃなかろうか、今回の内容に関して大丈夫かな？」と思っていたのですが、予想以上に良い反応をいただいておりホッと胸をなで下ろした次第です。 とはいえ、プレゼン自体はボロボロだったので、その反省や参加いただいたお礼をこめて当日伝えきれなかったことをこちらのエントリーにまとめてみました。 ＃前もって書いておきますが
PhotojojoがInstagramのコンテストやってるよ | gaspanik weblog
その後のInstagram話はいろいろあるんですが、取り急ぎ締め切りが近いのもあるのでこちらを先に。えっとサンフランシスコかな？にあるPhotojojoってカメラ周りのグッズを取り扱ってるトコがあるんですけど（最近有名になってたのはレンズの形をしたマグカップとか）、そこがInstagramの写真コンテストをやってます。 といっても締め切りが現地時間の21日までなんで、あとどれぐらいあるのかわかりませんが…。間に合うかどうかは別として、自分の自信作をポストしてみてはどうでしょうか。 特に制限もないようなのでお気軽に応募方法は、Instagramのアプリで「photojojo」を検索すると、そのアカウントがあるのでそこに掲載されてます。簡単に書いておくと…。 Instagramにアップロードの際、タイトルに「#photojojo」をつけてポストんで、Instagramをフォローする（これがTw
FacebookのLike!ボタンとInSightsの話 | gaspanik weblog
「Facebookのこの盛り上がりはステルス・マーケティングじゃねえか？」なんて噂までが飛び交って、矛先を向けられた皆さんも大変ですね…。全米では既に「The Social Network」ってFacebookの創始者の半生みたいな映画もやってますし、日本でも年明けには公開ですからね。思い出したかのように寝かせていたFacebookを使い始めることは何ら不思議ではありませんよ（笑）。 とまぁ、そんな話はおいといて。今日は先日から思い出したようにこちらのブログにも付けたFacebookの「Like!」ボタンの話をしようと思います。 設置方法については多くのブログで解説されているので要点だけちょこっとだけ。あとは「いいね！」された回数やページを確認する方法を。 WordPressにLike!ボタンを付けるWordPressへのボタンの設置はプラグインを使えば簡単です。 WordPressの管理
Chrome + Stylebot + Twitter Extender + Twitter Filter = ? | gaspanik weblog
Chrome + Stylebot + Twitter Extender + Twitter Filter = ? かねてから噂になっていた（というか、比較的新しめのユーザーから適用されていた風な）Twitterの新しいユーザーインターフェイスがようやく自分のアカウントにも適用されました。うちにあるMacBookの片方はFirefoxで正常に見れているのですが、もう片方でエラーを吐きまくって表示されません…。この新しいUIは好きなんですけども…。 そこで、「Chromeで見ようかな」と思ってるのですが、以前からTwitterのUIのフォントサイズが嫌いで、それは新しくなってもやっぱり（日本語で見てるってのもあるのですが、全体的にフォントサイズのバランスが微妙に悪いんじゃないかと…）。 他のブラウザは文字サイズだけの拡大縮小ができるけど、Chromeの場合はページ全体の拡大縮小しかできないん
ボクのiPhone 4はこんな感じなう | gaspanik weblog
iPhone 3Gの遅さにガマンできなくなり機種変した「iPhone 4」のその後ですが、おかげさまで世間で言われているようなトラブルもなく快調に動いております。で、今の時点で入れてるアプリの状態を記録しておこうと思い立ったので、いくつかピックアップして紹介してみます。 ちなみにこれまでiPhone 3Gに入れていたアプリの中から厳選したものです。 iPhone 4にして変わったこと（iPhone 3G比）現在3GSを使ってらっしゃる方はiOSをアップデートすれば全然問題ない気もしますが、3Gから4へのアップグレードは雲泥の差です（笑）。ちょっとした操作でもたついて何もできないなんてこともなく非常に快適。実はブラウザ自体もそうなんですが、ネットワーク接続をともなうアプリだとその辺が顕著にあらわれます。TwitterのクライアントとかFlickrのアプリとか、データを引っ張って整形するような
CSS Nite in SENDAI, Vol.5 フォローアップ | gaspanik weblog
「CSS Nite in SENDAI, Vol.5」にご来場くださった皆様、関係者の皆様、ありがとうございました。私こもりのセッション「Zen-Codingはみんなのもの」、いかがでしたでしょうか。この場を借りて、あらためてお礼を（深々）。 本セッションで使用したスライドについては、別途実行委員会の方から公開先URLを連絡していただくことにして、セッション中で紹介したことのいくつかをこちらでフォローアップさせていただきたいと思います。 Dreamweaver CS3 でZen-Codingを使用する方法現在配布中の「Zen-Coding for Dreamweaver」はCS4対応版ということになっています。残念ながら、それをCS3にインストールしても正常に動作しません。 そこで、配布サイトのIssuesにおいて、CS3で現在のバージョンを動作させるために入れ替える「zen-editor
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の組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁど
WPのパフォーマンスを改善してみようか | gaspanik weblog
日本のWeb業界でもそろそろサイトの表示パフォーマンスをどうにかしなきゃなぁ…と考えている方もいらっしゃることでしょう（ごく一部かもしれませんが 笑）。いわゆる普通のWebサイトの表示パフォーマンスの改善については、ここでも年末から数回にわたって取り上げています。 Webサイトの高速化的な話をWD誌でYSlow!、使ってわかるあんなことこんなことPage Speedでチェックついでに最適化Page Speedが1.6βになったようでここのエントリーに挙げた以外に、ちょっと前にゲリラ的にUSTREAMでくっちゃべってみたところ反響も大きかったようです（最初の回は特に他のどこ探してもないことも言いましたしね、フフフ）。 で、今回はこのブログでも使っているWordPressのパフォーマンスをアップさせるためにできることをいくつか紹介したいと思います。「できる」「できない」は設置されている環境で異
Zen-Codingでできるあんなことこんなこと | gaspanik weblog
先日超速コーディング？としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。 HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします（どちらかと言えば、こっちが本当のZen-Codingなんでしょう）。 ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…（はず 笑）。 文書構造がわかってれば、1行書いて一気に展開できるZen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-Text
SafariからAlternate Web Browserへ | gaspanik weblog
あ、iPhoneアプリの話です（笑）。 iPod touchからiPhoneと長い間、標準搭載のSafariをWebブラウザとして利用してましたが、このSafariに関しては自分の使い方にあわないとこがあって、定期的に代替ブラウザになりそうなものを物色していました。 ボクの場合、「すぐ縦横に回転するから寝転がりながらは使いにくい」「起動時にブックマークが表示されてうざい」というこの2点がどうしてもダメで…。画面の回転はたまには横も使うので良しとしても、起動時のブックマーク表示がどうしても許せない。特定のサイトだけ別のブラウザで見るとかしてたぐらいです…。 でも今日、ついに理想的なブラウザに出会いました。 ボクの理想型「Alternate Web Browser」 このAlternate Web Browserは、無償のアプリケーション115円のアプリケーションです（になってしまいました）。
Page Speedでチェックついでに最適化 | gaspanik weblog
前エントリー「YSlow!、使ってわかるあんなことこんなこと」でFirefoxのアドオン「YSlow!」の使い方とか見方を紹介したので、今回はGoogleさん謹製のアドオン「Page Speed」の話をしてみようかと思います。 前回同様、「そうだ、京都、いってきた」的なページを参考ページとしまして、今回は画像に関するちょっとした話なんかも入れていきたいと思います。では、Page Speed編もいってみましょう。 始める前に、Page Speedのインストールから「Page Speed」は、Firefoxのアドオンサイトには登録されていませんので、GoogleさんのPage Speedのダウンロードページから直接インストールします。現在、正式版が「Version 1.4」、β版として「Version 1.5」が公開されていますので、どちらかお好きな方を。古いものよりは新しいものの方が良いと思
YSlow!、使ってわかるあんなことこんなこと | gaspanik weblog
先月発売された「Web Designing」2010年1月号の特集では、ただの紹介だけに留まっていたツールの簡単な解説でもしてみようかと思います。今回は「YSlow!」で次回は「PageSpeed」ってな感じでお届けします。 双方のツールを使ってトータルであれこれと解説したいところなので、このサイトで割と画像を使ってる「そうだ、京都、いってきた」的なページを参考ページとします。 では、そんな感じで始まり始まり。 まずは、YSlow!が使えるようにする米Yahoo! Inc.さん謹製の「YSlow!」は、Firefoxのアドオンです。これ単体で動作するわけではなく、あらかじめ「Firebug」というアドオンが必要になりますので、こちらもあわせてインストールしましょう。インストールするとブラウザウィンドウの右下に「虫」のアイコンが出てきますので、それをクリックするとFirebugの画面を呼び出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
