ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読

どうもこんにちは、インフルエンザ明けの nakamura です。寝過ぎて腰痛めたっつーの。 以前は IDE 使ったりもしていましたが、ここ数年 PHP 書く際は Vim を使ってます。Vim に関してはまだまだ初心者から抜け出せてないんですが、PHP 用にやってる設定をいくつか紹介してみたいと思います。こんなのもやっとくと便利だよとかあれば教えて教えてー。 関数名とか補完 Vim には辞書ファイルを読み込んで補完に使える機能があります。ということで、とりあえず PHP 組み込みの関数や定数の辞書ファイルを作りましょう。 作り方は色々あると思いますが、僕はいつも以下のサイトのスクリプトを使わせてもらってます。 Vim で使用する PHP の辞書ファイルを作成するスクリプト - Memo リンク先にも書かれてますが、dict.php をダウンロードしたら以下で組み込みのクラス名、関数名、定数名

Fireworks で複数の画像を一気にリサイズする場合は［ファイル］→［バッチ処理］が最速だと思われますが、今回は別の方法での作業手順をご紹介します。 画像をリサイズした後に、ちょっと編集したい（個別にフィルタをかけたいなどの）場合は、こちらの方法のほうが結果的にスムーズかも。 今回使用するのは Fireworks CS5 です。 STEP1 画像のリサイズ 1. Fireworks を起動し、新規ドキュメントを作成する。 2. 作成した新規ドキュメントのステージ上に、リサイズしたい画像をドラッグ＆ドロップ。 3. カンバスをフィットする。（［変更］→［カンバス］→［カンバスを合わせる］） 4. 画像サイズを変更する。（これでカンバス上の画像が全てリサイズされます） 現時点では、レイヤー 1 の直下に全ての画像が配置されています。 STEP2 画像を個別のレイヤーに分配して加工 5. ［

こんにちは、tanakaです。クロスバイクのタイヤが早速パンクしたので、お店まで5,6km 歩いて直しに行きました。ついでに自分で修理する方法も教えてもらいました。 シーブレインサイトリニューアルにあたり、Webページの読み込みが速くなるように2つ設定を追加しました。 今日はその設定について紹介します。 テキストコンテンツを gzip 圧縮して転送(mod_deflateを使う) 次の記述をVirtualHostディレクティブに追加します。 <IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-te

今日は2011/11/11、やたら「1」の並ぶ日付です。 11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。 いっそその時間に更新までしてしまいたかった！後の祭り。 さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。 今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。 (2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ！」「evernote」編です。 引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 はてなブックマーク <a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-book

ゲームボーイアドバンスの名作「カルチョビット」が3DSで出ると聞いてテンションあがってきたminamiです。 jQuery便利ですよね。さらにその便利なjQueryを使ってコーディング時の定番機能を提供してくれているライブラリがたくさんあるので集めてみました。 Laquu.js http://laquu.com/ 注目の最新プラグインです。「HTMLコーディング作業量を極力減らすためのjQueryプラグイン」ということで、 基本的な機能もさることながら、ピックメニュー、タブ、ツールチップ、ティッカーといった、よく使うけど意外と手間のかかるUIが一つのプラグインでまかなえてしまうのがポイント高いです。個人的にはコナミコマンドが実装されてるのが熱いです！ 対応するjQueryのバージョンは1.5以上です。 simplelib.js http://lab.starryworks.jp/js/si

9月1日にさくらインターネットさんがVPSサービスを さくらのVPSとして提供開始しました。 レンタルサーバとは異なり、root権限を使えるので、サーバ環境の自由度が高くなります。 もともと僕はさくらのレンタルサーバを借りていたので(5年くらい)、お知らせのメールをいただいていて、βサービスの頃から知っていました。しかしβサービスの申し込みが始まってから1日もたたずに受付終了していたので、試用できず残念な思いをしていました。 このたびサービスが正式にリリースされたので、使ってみることにしました。…というか継続利用のつもりで申し込しこみましたヨ。 とりあえず使えるまで まずはさくらのVPSの「お申し込みはこちら」から申し込みます。すぐに申込受付完了のお知らせメールが届き、しばらくしてから仮登録完了メールが届きます。(僕の場合1時間弱でメールが届きました)仮登録完了メールには仮想サーバを利用す

夜中のセミがうるさい季節になりました、toyama です。 窓ガラスにカナブンが激突してくる音もうるさいです。一応、横浜市民です。 Fireworks でボタンを作ったりするときに使う、文字のいじり方を簡単にまとめました。 ボタンを書いて、テキストをおいて、これで完成！でも十分ですが、なんかテキストが読みにくいな、と思ったときにやってみると落ち着きます。 こんなボタンがあるとして 淡いブルーのボタンに、白い文字でテキストを配置する、よくあるボタンです。 ちょっと可視性が低いって言われるかなー、という感じなので、テキストに一手間加えます。 1. グロー テキストを選択して、プロパティパネルから[フィルタ]→[シャドウとグロー]→[グロー]を選択します。 ボタンの色よりちょっと濃い目の色を選んで、効果の数値を設定。あまりキツくかけすぎると素人っぽい感じになってしまうので、この辺の数値はプレビュ

愛車の Vespa がブチ壊れてとてもブルーな sakai です。国産に買い替え検討中… 今回は、ネガティブマージンの使いどころについてのご紹介（2回目）です。 今回は、以下のようなデザインを実現するのにネガティブマージンを使用します。 表組み風になっていて、罫線でブロックを区切っていますが、最初と最後には罫線がないという意外とよくあるパターンのデザインです。 2. 表組み風レイアウトでネガティブマージンを使う まず、HTML を普通に組んでみます。ここでは table ではなく dl を使っています。 <h1>ニュース</h1> <div class="news"> <dl> <dt>2010/08/11</dt> <dd>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd> <dt>2010/08/11</dt> <dd>テキス

近所のパン屋が大幅セールを始める7時半頃が毎日待ち遠しい kimoto です。 サイトが重い時やアクセス状況を知りたい時にいつも使わせてもらっている便利なツールを紹介します。「手軽さ」がテーマです。 どちらも昔からある物なので有名ですが。 Apache のログを確認！「Apache log viewer」 初回公開は 2001 年のようです。ベテラン選手ですね。 ダウンロードはこちら。 まずはインストールですが、解凍すればそのまま使えるお手軽ツールです。 使い方はいたって簡単。ログファイルをポンっとドラッグ & ドロップするだけでがーっと解析して結果を表示してくれます。 あとは IP ごとに並べ替えたり、検索したり。 特に、特定の IP がどのページを見たのかを絞り込んでくれる機能など重宝します。 画面はこんな感じです。 前は秀丸に展開して目で無理やりみてましたが、流石に限界がありました。

今さらながら「ヱヴァンゲリヲン新劇場版：破」を DVD で見まして、 ヱヴァ：Q 見るまでこりゃ死ねないな、と思った sakai です。序破急だから急かと思いきや Q ってところが意味深ですよね… CSS で margin にマイナスの値を指定する、通称ネガティブマージンの使いどころについて、何回かにわけてご紹介します。（先日の CSS Nite でデモをした内容の再紹介です） 今回は「パンくずリスト」のコーディングでのネガティブマージンの使いどころです。 1. パンくずリストでネガティブマージンを使う まず HTML で普通にパンくずリストを組んでみます。 <div id="topiPath"> <ol> <li><a href="/">ホーム</a></li> <li><a href="/wear/">ウェア</a></li> <li><a href="/wear/tops/">トップ

こんにちは nakamura です。最近トルシエさんテレビ出すぎじゃありません？ウィイレヤロウヨ。オフサイドダヨ！ さてさて今回は意外と知られてないけど、サイトをインターネットに公開する際には知っておいた方が良い Apache の設定をいくつかご紹介します（一部 PHP の設定もありますが）。この設定をしていないからといって即危険にさらされるという訳でもありませんが、リスクの芽は摘んでおくに越した事はありませんよね。 無駄な HTTP ヘッダを返さない ディストリビューションにより異なるかもしれませんが、CentOS デフォルトの設定の場合 Apache が返してくる HTTP ヘッダは以下のようなものです。 HTTP/1.1 200 OK Date: Mon, 05 Jul 2010 01:01:14 GMT Server: Apache/2.2.3 (CentOS) X-Powered

シーブレインのマニュアル作成サービスチームから「スマートフォンで読めるマニュアル作成」を PR するページを作ってほしいとのご依頼があり、ページをデザインました。 せっかく iPhone を素材に使うのだから、フォントも Apple 風にしたいわあ、といろいろ探した際に知ったいくつかのフォント情報をメモします。 ひと目でフォント判別できる一流デザイナーにあこがれる！ 1. Apple 日本語サイトのフォントは「AXIS」 Apple 公式サイトの日本語や Apple store で手に入るパンフレットには「AXIS」というフォントが使われていることが多いそうです。 その「AXIS」試用版が、無料でダウンロードできます。登録さえすれば商用も OK という太っ腹ぶりです。 なだらかなラインがスマートな、きれいなフォントです。 Type Project｜試用版ダウンロード http://www.

こんにちは nakamura です。ワールドカップ見過ぎで仕事中もブブゼラの音が聞こえてきます。ワールドカップが終わっても聞こえるようなら病院行こうと思います。 さてさて今も昔も、定番のサーバ攻撃方法 DoS アタック。うちが作っているサイトにもちょくちょくそれらしいアクセスが来ているようです。 DoS 攻撃って？ Denial of Service attack の略です。以下は Wikipedia より。 イメージとしては、ターゲットの持つ電話機に無言電話やいたずら電話を大量に発信して、ターゲットが正常に電話機を使用（受発信）できないような状態を考えると理解しやすい。DoSはネット上のトラフィックを増大させ、通信を処理している回線やサーバの機能（リソース）を占有することで、他の利用者の利便性を妨害したり、その過負荷によってサーバそのものの異常動作を誘発させる。 DoS攻撃 - Wiki

今週の木曜日はやはり早く寝て夜中に起き出すかないか！toyama です。金曜日は結構な割合で寝不足な人が多そうですね。 大きな写真イメージの上にキャッチコピーを書いてサイトの目立つところに表示、というデザインは割と多いパターンですが、画像の書き出し圧縮率は毎度悩ましいです。 写真の書き出しは jpg がセオリーですが、キャッチコピーの文字がひどく劣化してしまうことがあります。かといって gif で書き出すには色数が多くてディザでもちょっと辛いし重い！ そんなときは Fireworks さんにおまかせです。さすが web 制作の申し子！ 1. こんな感じの画像があるとします。 写真の上にテキストで文字が置かれています。 2. jpg で書き出してみます。普段はこんなに低画質で書き出すことはないですが、分かりやすく圧縮の品質を 50 にしてみます。 背景の画像はともかく、もう文字のまわりがグニ

ワールドカップのパブリックビューイングを会社近くの映画館で見てみたいminamiです。 以前tanakaがNetBeanでのZen-codingを紹介していましたが、デザイナー、コーダーがよく使うであろう環境でのZen-coding対応事情を調べてみました！ 秀丸でZen-conding 秀丸でZen-codingができるようになるマクロが配布されています。 秀丸マクロでZen-Coding マクロをダウンロード マクロフォルダのパスを確認。[その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されてるフォルダにダウンロードしたzencoding-for-hidemaru.zipから展開したzencoding.mac と zencoding.iniを移動 [マクロ] - [マクロ登録] で、zencoding.mac を任意の番号に、別々に2つ

いまだ小沢健二コンサートの余韻が冷めない sakai です。 普段は透過 PNG を使わずにデザイン・コーディングをしているのですが、先日どうしても透過 PNG を使いたいシーンがありました。 透過 PNG は大変便利ですが、IE6 が対応していないのがネックです。 というわけで、IE6 でも透過 PNG を使用できるようになる JavaScript のライブラリを色々試してみました。（今さらですが！） 有名どころの「jquery.pngFix.js」から使ってみましたが、これは背景画像に透過 PNG を使うとちゃんと表示されなくて断念。 「IE7.js」もところどころ挙動が怪しいしなあ… と困ったりしつつ、最終的には「DD_belatedPNG.js」に行き着きました。 DD_belatedPNG 透過 PNG を背景画像に指定したり、ポジションをいじったりしても挙動が安定しているのでと

忍び寄る夏の気配にワクワクな nakamura です。雨の後の湿度の高い感じ、、、いいよね～。 以前ほど話題にはならなくなりましたが、今でもインターネットに蔓延している Gumblar ウィルス。シーブレインではクライアントとのファイルのやり取りに FTP を使う案件もあり、何か代替案はないかと模索してきました。結果行き着いたのが Apache の mod_dav モジュールを使ってファイル共有する方法です。何がスバラシイって設定はなまら簡単なのに充分セキュアにできるのですよ。どうですか奥さん！ 設定方法 WebDAV を使うには mod_dav モジュールが読み込まれてる必要があります。以下のコマンドで読み込まれているモジュールの一覧を確認しましょう。dav_module というのがあれば OK です。ちなみに CentOS であればデフォルトでくっついてきます。 httpd -M mo

ゴールデンウィークはお台場でリアル脱出ゲームに参加して脱出できなかったminamiです。 jQuery連載も最終回、最後はプラグインを作ってみましょう！ プラグインとは？ jQueryのプラグインとは、 jQuery本体と併せて使うライブラリのことです。 様々な拡張機能を手軽に使うことが出来ます。 例えば以下のページにも多数のjQueryプラグインが登録されています。 自分で作ったプラグインを公開することもできます。 http://plugins.jquery.com/ プラグインの使い方 プラグインを使うために必要なのは以下の手順です。 1.jQuery本体を読み込む 2.プラグインを読み込む 3.プラグインを実行する 拍子抜けするくらい簡単ですね!ソース上では以下のような記述になります。 <!-- 1.jQuery本体を読み込む --> <script type="text/javas