サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
blog.gaspanik.com
だいぶご無沙汰しておりました。こもりでございます。前回の更新から随分時は流れてしまいましたが、その間には「レスポンシブ・ウェブデザイン標準ガイド」という書籍を出したりしてます（宣伝しろよ）。 いまどきのWebサイト制作は、これまでのようにPCのみを対象とするわけにはいきません。スマートフォンにタブレット、そしてこれから出てくるであろう未知なるデバイス、嗚呼アタマが痛くなりそうです（笑）。最近なんだかレスポンシブなんとかが話題になることも多いのですが、今日はそんな制作効率をあげるためのツール「Jolly」を紹介したいと思います。 多様なデバイスでの見た目や操作感を確認するのに、Adobeさんが「Edge Inspect」なるものをリリースしていますが、こちらCreative Cloudの契約とデバイス側にアプリが必要です。これでも良いのですが、今のところの最大の弱点はバーチャルホストの設定が
WordPressは遅いから。たまにそんなことを耳にしたりします。しかし、それは別にMovableTypeで作ろうが、ハンドコーディングで静的なHTMLを配信しようが遅いもんは遅いんです。それに対するボクの答えはこうです。作り方が悪いから遅い。 このたび「WordPress 高速化＆スマート運用必携ガイド」が発売されました。昨年の夏頃、WordPressのプラグインを公開したり最近話題のNginxのことにも詳しい@wokamotoさんにバックエンドの高速化を担当してもらって、フロントエンドの方はボクが書いてWordPressの高速化について書けば面白いんじゃないかな？と思い立ちましてね。 ボクの原稿の進みが遅いのもあって発売が今頃になってしまったのですが、この書籍はWordPressを中心にすえつつフロントエンドとバックエンドの双方の面からWebサイトのパフォーマンス改善について書いたもの
ちょっと前から開発者登録とかしてゴニョゴニョすれば有効にできたFacebookのプロフィール画面のタイムラインモードが遂に一般向けにも開放されたようですね。有効にしたい場合は、こちらのページの一番下のボタンからGOです。 で、その新しいプロフィール画面のタイムライン表示なのですが、リンクやいいね！したページなどの表示のされ方がこれまでとは扱いが変わっています。コメントとは別枠表示であることは従来と同じなのですが、ちゃんと枠どりされて表示されるようになっています。 流れていくフィードはもちろんですが、このプロフィールのエリアでシェアやいいね！されたリンク先の情報を綺麗に見せるためには、OGPの設定をちょっと見直した方がいいかな？ということでちょっと調べてみました。 「og:image」はサイズを「横幅100px × 高さ116px」、日本語の場合は「og:description」を80〜90
Androidのパクリ？な感じでiPhoneやiPadにiOS 5から搭載された「Notification Center（日本語だと通知センター？）」から、電話やメール、SMS送信、アプリの起動ができる「App Switcher」の使い方を簡単にまとめておきます。 最初はホームのアイコンから起動できる方が便利じゃね？と思ったんですが、考えてみたら他のアプリ起動中でもスルスルッと通知センターをドラッグすればアプリが起動できるので意外と便利です（笑）。では、いってみましょう。 （追記）8つ登録できる別のアプリも出たみたいなので下にリンク入れてます。 まずは、通知センターの設定を 最初に言っておきますが、有償（170円）のアプリです。 アプリをインストールして起動したら、通知センターの設定を変更しなければいけません。具体的には…、 アプリの通知を有効にする 最新の5個を表示 表示方法は「None
WordCamp Tokyoも無事に終わり、そろそろWordPressを試してみたくなった人に向けて…、というわけではないのですが、Mac OS X Lionの環境で比較的簡単に自由度の高いある意味LAMP環境（Lion + Apache + MySQL + PHP）を作るまでを備忘録がてら、初心者の方でもできるように解説してみようかな、と。 OS XでWebサイトのテスト環境を作る方法はいくつかあります。お手軽なのはシステム環境設定から「パーソナルファイル共有」を有効にする方法ですが、これだとHTTPサーバである「Apache」が有効になるだけ。 じゃあということで、「MAMP」とかを使うと簡単に「Apache＋PHP＋MySQL」な環境は用意できるものの、あらかじめパッケージングされた内容になってしまう。環境をゼロから作ることを考えたら圧倒的に簡単ですが、サイト開発とか実行環境に必要な
先日開催された「WordCamp Tokyo 2011」に行ってきました（スピーカーなので行かなきゃダメなんすけどｗ）。あらためて、運営スタッフの皆様、スピーカーの皆様、そしてご来場くださった皆様ありがとうございました。そして、長丁場お疲れ様でした。 多くの方が既に参加レポートをあげてくださっていますが、ボクはボクなりに今回のWordCampの話を書き綴っておこうかと思います。 今回登壇するにいたるまで@naokomcさんから「WordCamp Tokyoやるから出てくんない？」と打診をいただいたのが10月初旬。普段あまりWordPressのコミュニティに貢献しているわけでもないので、「こんなボクで何かお役に立てることならやりますよ」とオッケイを。実はもともと彼女とは旧知というか、世の中でブログが流行り始めた頃からその存在を知っていましてね。そう、皆さんご存じないと思いますが、ボクは日本で
この11月から大森にある「アクティブカレッジ」さんで、スクール形式の講座を受け持つことになりました。シリーズの一発目ということで大々的に告知ページを作っていただき、ありがたいのと恥ずかしいのと（笑）。 その一発目は「HTML5でどう変わる？どう作る？」と題して、HTMLによるサイト制作経験のある方を対象にしたHTML5の基礎講座になっています。最近ではスマートフォンに対応したサイトなども増えてきましたし、今すぐとはいいませんがHTML5をベースにしたサイト制作の機会も徐々に増えていくことでしょう。 それ以外にも、たとえば今話題の電子書籍だとePub3.0からはHTML5がベースになっていますし、日本参入が噂されているAmazonのKindleの新しいフォーマットであるKindle 8もHTML5を使ったものになるようです。 現在動いているサイトがすぐに移行しなくとも、この新しい技術仕様を使
人間はいつか死ぬから。普段からそう思っているボクは、あまり人の死に対して何か反応する方ではないのですが、彼がいなかったらおそらく今の自分はいないんだろうな、と。そう、彼の名はスティーブ・ジョブス。早すぎる死でした。 ボクが大学1年の頃（当時まだコンピュータは電子計算機とか呼ばれていた時代）、ボクはNECの黒い画面で展開される電子計算機の授業で単位を落とします。ほどなくしてApple Computer、Macintoshの存在を知り、アルバイトに明け暮れて初めてのMacintoshを手にすることになるのです。 初めてのMacintoshは、Color Classic。メモリの最大容量が10MB、ハードディスクは160MBという今では信じられないようなスペックです。OSはフロッピーディスクで何十枚もあり、秋葉原から一体型のマシンの入った10kg近い大きな段ボールを抱えて電車で帰った思い出は今で
Responsive Web Designの話を少しずつ目にし始めたので、レスポンシブなのでも作ってみるかということで「quoted」というサイトを立ち上げました。いや、むしろ逆で引用文主体のサイトだからレスポンシブでいいよね、って感じなのですが（笑）。作ったといっても、そのほとんどで自分の力は何一つ使ってません。 ということで、今日はその舞台裏というか、コレがアレでこうなってできているよ、って話をしてみようかと思います。なにかの参考になれば幸いです。 Responsive Web Design の簡単な説明インターネットに接続できるデバイスが増えています、というか多様化しています。画面サイズや画面解像度はまちまちです。日本の場合は10年ぐらい前からいわゆる携帯電話で接続できてましたが、それらもやはり同じような問題を抱えていました。そのような個別の端末に対して、画面解像度や技術仕様などをベ
早いもので9月も後半戦に突入しましたが、週明けの9月26日にMdNから「iPhone & Android スマートフォンサイト制作の教科書」が発売されます。現時点でスマートフォン制作に必要な知識や技法などを初〜中級者に向けてまとめた一冊です。 今回のこちらの書籍は、谷 拓樹さん、石本光司さん、いちがみトモロヲさんとの共著です。私は前振りみたいなもんで極めて基礎的なことしか書いていませんが、他のお三方はそれぞれの得意とする分野で各章を担当し、内容をまとめてくださっています。 序章 スマートフォン向けサイト制作をはじめる前に第1章 スマートフォン制作のための基礎知識第2章 制作・テスト環境のセットアップ第3章 スマートフォンサイトの企画、構造設計第4章 スマートフォン向けのパーツ制作第5章 HTML5による実装第6章 CSS3によるレイアウトと装飾第7章 JavaScriptを使ったインタラク
皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。 そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。前半は多くの人を対象に日常のブラウジング体験を快適にするもの、後半はWebサイトの開発系でちょっと役立つものといった感じでジャンル分けしてお届けします。ま、あくまでもボクが普段使ってるものベースですが…、キャプチャ中の★やユーザー数も参考に。 いくら拡張機能が便利だって言っても、入れすぎたらそれは重くなるだけですからね。適当に取捨選択して入れるなり、使う時だけオンにするなりしまし
昨日行われた『CSS Nite LP, Disk 17「HTML5による電子書籍」 』にご来場くださった皆様、そして関係者の皆様、ありがとうございました。私のセッションで使ったスライドや補足事項については、主催者からのフォローアップメールでご確認いただくとして、セッション中に紹介した「Charles」についての質問を多くいただいておりますので、取り急ぎその件だけフォローアップさせていただきます。 「Charlesを使えば何ができるか」についての解説は、当日イベントに参加いただいた皆様の特典ということにして、Charlesを使ったアレでソレするための方法を簡単ですがまとめておきます。 Charles のインストールと設定公式サイトからファイルをダウンロードし、解凍後インストールします。 起動するとこのような画面が現れますので、Proxyの設定をおこないましょう。 MacもWindowsもおそ
先日の記事が思わぬ爆発をして驚いてるこもりです、こんにちは。実は、こないだ2年ぶりぐらいにマシンを新調したんですよね（といっても、MacBook Proの13インチの最安仕様 笑）。で、あの記事で紹介した以外にも直接仕事に関係しないけど、MacBook生活のアレコレを便利にするアプリも入れています。 今回もまた懲りずに、Macに乗り換えようかなと思ってる方や乗り換えたばっかりの方、MacBookなんちゃらを使ってカフェやコワーキングスペースなどをノマド気味にウロウロしてる方のために、ボクがMBPにインストールしたアプリを22個紹介したいと思います。 MacBookをお使いの方もそうでない方も。今回はジャンル分けはしてませんが、アレコレと多岐にわたっています。あと、最後の方には日常のブラウジングを少し快適にするだろう Safariの機能拡張もおまけでいくつか。 では、ちょっと短めですがいって
最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな？と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。 「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね（会社が買ってくれるならいいですｗ）。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。 いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え？何それ」みたいなのがあるかもです。 今回は各種
Webサイトのアクセス解析といえば、Google Analyticsが導入されているところも多いかと思います。それ以外にもアクセス解析のサービスにはいろいろ種類があって、調べたい内容によって使い分けたりといったこともされているでしょう。 とはいえ、時代は「ソーシャルメディアを使ってうんたら」みたいな流れでもあります。後日解析レポートを見て施策をすることも大事ですが、こんな時代だからこそ自サイトをリアルタイムに観察し、それに応じて動線（導線）を追加したり効果的にコンテンツを投下することも大事なんじゃないかな？と思います。 で、これまでも何度か取り上げていますがあらためてまとめてみました、リアルタイムのアクセス解析のサービス。こういうサービス調べるのが仕事兼趣味なので、今回は世界中のサイトで比較的よく見かけるものをチョイスしています。 すべて使って試してるわけではないですが、何かのご参考になれ
最近の電子書籍リーダーアプリは、TwitterやFacebookと連携させて、ハイライトした箇所をポストするという機能をもつものが多くなってきました。AmazonのKindleしかり、先日紹介したDocStormしかり。それだと単に放り投げるだけなのですが、今回紹介する「Readmill」はひと味違います。 というわけで、また写真付きでどんなものかを説明してみましょう。 ソーシャルリーディングに向いてる、ReadmillReadmillは、iPad用のいわゆる普通のePubリーダーアプリで、前述したような他のソーシャルメディアと連携してハイライトをポストする機能も有しています。ただ、ReadmillのWebサイトと連動して新しい本を探したり、気になる人をフォローしたりといったソーシャルな側面を持っているんですね。 アカウントを登録するとこんな画面が出てきます。サイトにはリーダーの機能はない
これまでちょこちょことiPadやiPhoneのアプリで便利そうなものを紹介してきました。で、今日はちょっと気が向いたので、他ではあまり紹介されないんだけどボクがiPadにインストールしている、Web制作とかそっち系のお仕事に従事されてる人たちには「あると便利かもしれないiPadアプリ」を選んでみました。 おまけ的にiPhoneしかないものもいくつか。あまりにも有名なものとかは省いてますので、あしからず。リンク先は、基本オフィシャルサイトで。 アクセス解析とかAnalyticsPro for iPadGoogle Analyticsとかの集計を見るので有名なところだと「Analytics」とかがありますが、ボクが入れてるのはAnalyticsProです（AnalyticsはiPhoneだけ）。まぁぶっちゃけどれも変わらんよね、とは思うのですが（笑）。 → AnalyticsPro for i
Twitterを眺めていたらこちらの「続) ガラケーからスマホの怒濤の流れで割を食い始めたサービス」という記事が流れてきたのでちょっと読んでみました。要約すると「色が違うというクレームが増えていて、原因を探ってみるとスマートフォンユーザーではないか。スマートフォンの色再現性に問題があるのでは？」みたいな話。 えっと、結論から書くと、それたぶん作り手側の問題が大きいかも。 ＃こういうの書くとディスってるとか言われちゃうんですけど、そうではなくて問題の所在の切り分けをしやすくするためにできることを書いてるだけですので誤解なきよう。 とりあえず、自分の環境を見直しましょう最初にお断りしておきますが、手元にすべてのスマートフォンやタブレットがあるわけではないので、いちいち検証したわけではありません。が、まぁこれまでいろいろやってきた経験から問題は作り手側にもあるだろうね、と思うのです。 デジタルで
iPadでPDFやテキストなどの書類を読むためのアプリは数多くあれど、それにePubまで付け足すと選択肢が結構狭まったりするものです。ボクが使ってる「ReaddleDocs」は、PDFやテキストはもちろんePubにも対応していますが、さすがにePubの中に適用されたCSSまでは現時点ではちゃんと反映してはくれません。 Stanzaのような電子書籍ビューアでも同じで、ePubを入れただけでは単に読めるってだけ（強制的にCSSを適用する方法はあるとはいえ）。そういう面では PDFも読めるiBooksがよかったりするんですが、いちいちiTunesで同期したりダウンロードとかでデータを追加するのはちょっと面倒…。 そこで登場するのがこちらの「DocStorm」。 転送はWiFiだけど…。一通りの機能は備えるDocStormDocStormは、ドキュメントを読むことに特化したリーダーアプリです。 対
次から次へとGoogleさんはいろいろやってきますね（笑）。これまでもWebの表示パフォーマンスの最適化についてはプラグインの公開をはじめ既にいろいろなことをやってらっしゃいますが、今度は「Page Speed Service」ってのを公開されてます。 簡単にいえば、Googleさんがデータを拾い上げて最適化したデータをGoogleのサーバから世界中に配信しちゃうよ、ギャハ。しかも今なら無料！みたいなこと？ となると、CDN系サービスの存在意義は…（厳密には違うだろうけど）。 ま、登録する前に置き換えたらどうなるかチェックから始めましょう。 専用のWebPageTestのサイトでチェックサイトの右側にある「Check It Out」ボタンを押すと下のページに移動します。 このページとかはまだ日本語化されていませんが、Page Speed Serviceのマニュアルみたいなもんですね。で、そ
非常にどうでもいいことなんですが、ボクが Google+のサークルの公開範囲制限を使ってやっていることを紹介してみようかと思います。サークルをどうしていいかわからない、何かうまい使い方はないものか、と思ってらっしゃる方の何かの参考になれば。 ボクが普段からTwitterのアカウント（@proteanbm）で海外のWebデザインやらソーシャルメディア、マーケティング、心理学や脳科学などの最新記事をブックマークしていることをご存知の方もいらっしゃるかもしれません。フォローしてくださってる方、朝からバンバンすみませんｗ 限定サークルでの情報発信 & 派生するコミュニケーションにも期待で、それがGoogle+と何の関係があるかというと、その中から時間がある時に大ざっぱですが内容を訳してみたり（概要だけだったりもしますけど）、補足できる場合には内容を書き足したりしながら限定サークル内に向けて公開して
Google+ では、プロフィール画面でその人がサークルに登録している人、その人をサークルに入れてる人たちってのが表示されてます。それは自分がこれから登録したい人を探すのには役に立つんだけど、たとえば自分が登録している身内とかがわかっちゃうかもしれない。と思ってたら、このサークルに入れてる人たちの一覧は、表示・非表示を切り替えることができるんですね。 そんなことに気が付いたので、簡単ですがプライバシー的なことが気になるあなたへ公開範囲に関する設定方法を。 プロフィール画面で公開範囲をコントロール一応初歩的な話からやりましょう。自分の登録しているプロフィールの公開範囲は、プロフィールの編集画面からコントロールすることができます。 右上の編集ボタンをクリックすると編集モードになります。 各項目には地球のアイコンだったり鍵のアイコンだったりと、その公開範囲に合わせてアイコンが付いているのがわかり
例によって爺さん並みの時間に起床していろいろチェックをしていたら、オンラインのCSSエディタ「WebPutty」が話題になっているようでした。ちゃんと自サイトで使ったわけではないですが、一応お知らせ程度に載せておきます。 なんでも、このWebPuttyはオンラインのCSSエディタでありながら、CSSのファイルのホスティングも兼ねているようです。さらには「Sass」や「Compass」もサポートしているらしく、そっち系を使ってらっしゃる方でも使える、と。ちなみに、公開時のファイルはちゃんとMinify & Gzipされるようです。 何はともあれ、Googleアカウントでログインだ登録に特別なことは必要なく、Googleアカウントでログインできます。 ログインするとこんな画面。左が保存されたCSS、右に新規サイトの登録のボタンが並んでいます。右上の「HELP」を押せばいろいろ教えてくれます。
Google+にいろいろな機能を追加して便利にするようなブラウザの拡張機能は至るところで紹介されてるはずなので、うちは違う方向性でGoogle+の見た目を調整して少し読みやすくする拡張機能「Usability Boost for Google Plus」を紹介しましょう。 Google+はまだフィールドテスト中なので正式版で変わるんでしょうが、いまのテスト中の画面はGoogleさんにしては珍しくいまひとつ読みやすさにかけてる気がします。文字回りのメリハリがあまりないからか、要素間のマージンが足りないからか若干窮屈な印象が…（※個人の感想です）。 そういうのを一時的に解消して読みやすくするのがこの拡張機能の役目です。これをインストールするには、Googleさんのブラウザ「Chrome」が必要です。 ※このようなサイトに便利機能をくっつけてくれるような拡張機能は確かに便利なのですが、中のデータ
タイトルには若干語弊があるんですが、Googleさんが先にブログで公開した「Authorship Markup」のことを書いておこうかと思います。これまでそんなにGoogleプロフィールを気にすることもなかったのですが、Google+も始まっていろいろ変わってきてますしね。 このAuthorshipっていうのは、「コンテンツ（の作者）とGoogleプロフィールを結びつけて、そのコンテンツの原作者が誰かなのかをはっきりさせること。それによって、Googleを使う人たちも検索結果からその作者を見つけやすくなるでしょう」といった感じでしょうか。 そんなわけで簡単ですが、Authorshipの追加の仕方をひとつ。 ブログを例に挙げて解説するとこんな感じわかりやすく説明するためにブログを例にしてみますね。ブログの記事っていうのは、それぞれの記事に執筆者がいます。執筆者が単体であるうちのようなブログも
ちょっと書いて吐きだしておかないとスッキリしなかったので、最近思っている「いいね！」とかその辺のことについて書いてみました。今回これを書くきっかけになったWSJ（Wall Street Journal）の記事「The Insidious Evils of ‘Like’ Culture」は、Webを使って何かを発信する人とかは、読んで自分に当てはめて考えてみると良いんじゃないかな？と思ったんですよね…。 元記事がWSJですからちゃんとした日本語訳で出るんじゃないかなと待ってたけどなかなか出ないので、今回ちょっとその記事の内容を文中に織り交ぜながら書いてみたいと思います（なので翻訳記事というわけではないです）。そして、ボクはそんな英語できるわけでもないので、間違った認識をしてる可能性もあることはあらかじめ書いておきますね。 「いいね！」的なものの使われ方っていうのは、「よかったよ！ありがとう」
※Google+が2011年9月21日より一般公開されたようですが、こちらの記事はフィールドテスト中の初期段階でまとめた内容です。全体的に大きな変更はないかと思いますが、記事中の画面のボタンや用語などの言い回しが変わっている可能性もあるのでご注意ください。 一般公開された瞬間にまたパンクして招待制に逆戻りしたというわけではなく目下フィールドテスト中のGoogle+ですが、先日公開した「はじめてのGoogle plus」が一部好評のようでしたので、調子乗って二回目をお届けしたいと思います。今回は「覚えておいた方がいいG+のちょっとしたこと」です。 では、手短にいってみましょう。 特定の人とやりとりするには？前回、サークルのことや公開範囲の指定について軽く書きました。特定のサークルだけに向けることもできるし、複数のサークルを指定してもいいし、空のサークルを作れば自分のメモ書きとしても使えるよ、
※Google+が2011年9月21日より一般公開されたようですが、こちらの記事はフィールドテスト中の初期段階でまとめた内容です。全体的に大きな変更はないかと思いますが、記事中の画面のボタンや用語などの言い回しが変わっている可能性もあります。続き記事の「覚えておきたい G+ のちょっとしたこと」も同様です。 先週はじまった「Google+」ですが、今日から招待いらずでログインできるようになったようなので（といっても、またできなくなってるみたいですがｗ）、Google+のページとしてちゃっちゃっとまとめたこれから始める方への簡単なマニュアルを再編集してみました。 英語UIの画面写真を撮ってしまったのですが、場所は同じなので適宜置き換えて見てもらえば大丈夫ですよね。では、はじめましょう。 （追記）せっかくなのでePub版も作っておきました。iBooksでしか確認してないので、他のリーダーでの表
先週から招待制ではじまっている「Google+ Project」ですが、もう既に利用されている方もいらっしゃることでしょう。既に、TwitterやFacebookといったいろんなソーシャルなメディアがあるわけで、あっちがどうでこっちがどう、みたいなネタも見かけます。 そんな中、「The Google Plus 50」という記事がなかなか興味深いなぁと思ったので紹介。現状の分析的なことはもちろんですが、この中に含まれる「もしも、Googleが…」的な話が「ありえそう…」って思わせるものになってます。 例えば、「Quoraとかもういらないよね。質問すれば誰かが教えてくれてシェアもできる」だの、「もし、G+がページランクに影響与えるようになったら…」「もし、Google Musicと連携したら…」だとか、そんなのが50個並んでいます。興味のある方は英文ですが、読んでみるといいかもしれません。 →
次のページ
このページを最初にブックマークしてみませんか？
『gaspanik weblog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
