5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
COOKPADとZaimの「グロースハック」の考え方と具体的な施策および得られた知見についてまとめました。 100page スタートアップのアイデアを得る方法について、Y Combinator (Paul Graham, Sam Altman, Paul Buchheit) と Peter Thiel、Chris Dixon の考え方を中心に解説したスライドを書きました。タイトルは「あなたのスタートアップのアイデアの育てかた」です。 アイデアの発案の仕方については諸々ある書籍や資料から学んでいただければと思うのですが、今回は主にスタートアップのアイデアについてという一部領域でのアイデアの気づきかた、育てかたに絞って解説しています。 もちろんこの方法が唯一の正解の方法であるとは限りませんし、仮に正しいプロセスだとしても、正しいプロセスから素晴らしいスタートアップのアイデアが常に出てくるわけで
このブログはWordpressを使っているのですが、その中でSimplicityというテーマを使用しています。 ブログを開始するにあたって、自分で作ろうか有名どころのテーマをカスタマイズしようかどうしようかと迷っていたところ、調度良いタイミングで、フォロワーのわいひら(@MrYhira)さんという方がテーマを公開されていたので、「これはなかなかよさそう」だと思い、 ちなみに、わいひら(@MrYhira)さんは、頸髄損傷でほぼ寝たきりの生活をしつつ、寝ログというライフハック系ブログを運営されたり、テーマを公開したり、フリーソフトを公開していたりと、パワフルな方です。 ここからはSimplicityを簡単に紹介します。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEOの最適化 拡散のための仕掛けが施されている 端末に合わせた4つのレスポンシブスタイル 手軽に収益
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に
Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ
昨日初めて知ったんですが、今まで知らずに損してた、みたいな気持ちになったので、同じ思いをする人が一人でも減るようにと思ってご紹介。ソフトを解凍するだけで、WordPressのローカル環境を構築できる、というソフトウェア。USBで持ち運びも可能。 今まで知らずに損してましたｗこれ、有名なのかな・・・ Instant WordPressをUSBメモリやポータブルHDDなどにダウンロードして、自動セットアップするだけで、WordPressをローカル環境を構築、その環境ごとUSBフラッシュメモリで持ち運びも出来てしまいます。構築まで5分くらいで出来ましたよ。これは便利だなーって思いました。 WordPressを環境ごと持ち運び出来ます。覚えておくとかなり役に立つ気がします。 出先でクライアントさんと打ち合わせ中にWebに繋げなくても直接見せて動作確認することも出来るし、自宅のデスクトップでいつも作
この記事ではオープンソースなオススメCMSを5個紹介します。 ※ブクマコメントやツイートでいくつか他CMSの名前が挙がっていたり、リプライ等頂いたので、下部にて別枠で紹介させて頂きます。 コーポレートサイトの制作に特化したCMS。 いわゆる、中小企業の自社紹介サイト系を作成する場合に、十分な機能が組み込まれている。 ・ユーザ管理 ・ページ管理 ・簡易ブログ（ニュースリリースなど複数設置可能） ・メールフォーム（複数設置可能） ・フィードリーダー ・携帯サイト ・Twitter連携機能 など。 また、対応しているDBが、SQLite、MySQL、PostgreSQLと幅広く、更にはCSVでの利用も可能な変り種。 殆どのレンタルサーバ上で動作すると思うので、導入の敷居は非常に低い。 ライセンスはGPLと商用ライセンスの2種類。 株式会社日本情報化農業研究所が提供している国産のCMS。 主に一般
FacebookのAPI、以外と日本にまとまった文献が少ない。 日本語版が少ないのと、コロコロ仕樣が変わっているせいだ。 「Facebook Connect API」なんかで検索しても、ぜんぜんいいページに辿りつかないので書く。 Twitterにくらべて、FacebookのOauth2.0 APIは、すごく簡単にできている。 Twitterもそうだが、「認証して見れるデータ」と「認証しなくても見れるデータ」の２種類がある。 認証しなくても見れるデータのほうが、セキュリティも低いし、入力もプログラムもカンタン。 ■認証しない系 たとえば、ぼくの基本情報は、 https://graph.facebook.com/hiroki.nakamura https://graph.facebook.com/●●●● こんだけ。 これで、基本情報がJSON形式で、充分とれる。 さらに、 https://g
Webサーバに Subversion のサーバを立てておき、HTML や CSS を commit することでWebサイトを更新する方法は、良く知られているテクニック、らしいですね*1。更新の履歴を残すことができるし、ましてチマチマとFTPやsftpでアップロードするよりずっと簡単です。 しかし SVN の代わりに git を使おうとすると、pushしてもリポートリポジトリではファイルを更新してくれません。 また、リポジトリはWebサーバ上に作るよりも、便利な管理インタフェースがある github（や噂のgitosis）に置いておきたいところです。 そこで、github の Post-Receive Hook を使うと、リポジトリに変更を push すると同時に、Webサーバにも同期させることができます*2。 Webサーバに同期する前に、Sphinxでドキュメントを整形したり、SassをC
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
先月の記事が相当人気でしたので今月もやります。また今月も人気なら来月もやります。 これは Web サービスに使えると思った情報 Web サービスを作りたくなるアイディア込みの記事 今年こそWebサービスを作りたい人に伝えたい５つのこと（＋番外編） – パパパパ この記事は精神からではなく、アイディアから Web サービスを作りたくしてくれる記事でした。私はこの記事を通して以下のことを学んだというか勝手に気づいたのでリストアップしておきますね。 ブログパーツを作って宣伝をする。 自動的に一周するサイクルを考える。 面倒くさいものを作ることで大手に参入されない。 時間を短縮する関係のサービスを作る。 食べログとぐるナビから Web サービスの現在と今後を見る [jp]グルメサイトは転換期に来てるんじゃないかなあという話 この一点に置いて、私は個人的にグルメ系の Web サービスとは誰かが得
jqmPhp | HTML Code Generator for jQuery Mobile Framework | jqmPhp jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」。 次のようなコードにより、簡単にjQueryモバイルのページを作れます。 <?php include 'lib/jqmPhp.php'; $j = new jqmPhp(); $j->addBasicPage('', 'Hello World', 'It's works!'); echo $j; ?> addBasicPageメソッドによって、jQueryモバイルでのページを簡単作成可能。 単にページの追加だけではなく、ボタンを追加したり、各種コントロールの追加がPHPで出来るところが特徴です。 以下、jqmPhpで作ったページデモ。実際に動作するデモページはこちら このスマートフ
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く