WWW WATCHVercel AI SDK を使用して、Claude 3 と、ChatGPT ライクにチャットする Web UI を作る
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
Dropbox Pro が大幅機能追加。ディスク容量もお値段そのまま 1TB まで拡大
Dropbox の有料プラン、Dropbox Pro に共有リンクの有効期限設定やパスワードロック機能などの機能追加が行われたほか、ディスク容量も 1TB （1,000GB） に増強されるとのこと。お値段は据え置きです。 Dropbox の有料プラン、Dropbox Pro （$9.99 / 月 もしくは $99.00 / 年） に共有リンクの有効期限設定やパスワードロック機能、共有フォルダの閲覧専用権限機能に加え、Dropbox にリンクしたデバイスを紛失したり、盗難にあった場合に、そこからのデータ流出を防ぐ、遠隔削除機能などが追加されました。 また、Pro アカウントで使用できるディスク容量も現在の 100GB から、一気に 10 倍となる 1TB （1,000GB） に増強するとのこと。今後数日中に Pro アカウント利用ユーザーには適用される旨、公式 Blog でアナウンスされてい
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
Chrome などで保存したパスワードが丸見えだから危険とか言われている件について
Google Chrome では設定画面からブラウザに保存してあるパスワードを簡単に見ることができて危ないっていう件について誤解されていそうな点をまとめてみたいと思います。 ソフトウェア開発者の Elliott Kember 氏が自身の Blog に「Chrome's insane password security strategy」 というタイトルで指摘する記事を書き、日本ではギズモード・ジャパンで翻訳記事が上がったことで話題になった、「Google Chrome では設定画面からブラウザに保存してあるパスワードを簡単に見ることができて、マスターパスワードの設定もないから危ない」 っていう件。 Chromeでは自動保存のパスワードが丸見え。サーッと血の気が引いたわ : ギズモード・ジャパン Chromeブラウザの「パスワード丸見え」問題にGoogleが釈明 ： ITmedia ニュース
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
はてブが使いにくければ User CSS 書けばいいじゃない
はてなブックマーク （はてブ） のリニューアル後、確かにさらーっと一覧を眺めたい場合には見づらくなりましたよね。サムネイル邪魔だとか、色々ありますけども、サービス提供側も色々理由があってデザインを直してるんでしょうし、デザインが大幅に変わったあとは今までのに慣れてた関係もあって使いづらいわ～的なお話が出てくるのは仕方ないこと。 で、文句言っても元のデザインに戻るわけじゃなし、どうしても見づらいっていうなら自分で直しちゃえばいいじゃんってことで、はてブ用の User CSS 書きましたのでシェアします。 短時間でチャチャっと書いたので超適当ですが、余計なもの消して、元の見た目みたいに単純な縦並びにし、1ページ当たりの表示数を増やしてます。 下の CSS は Firefox で Stylish アドオンを使ってる自分の環境で書いたのをそのままコピペしただけですので、他の環境で使うときは適当に直
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
5分でわかる Tumblr の始め方 （2012年改訂版）
2009年に今回の記事の元記事 「5分でわかる Tumblr の始め方」 に関して、古くなった情報を更新しようと思います。 2011年も終わりですね。今年最後の投稿は過去記事の改訂版で締めます。 さて、もう 3年近く前の 2009年に今回の記事の元記事 （5分でわかる Tumblr の始め方） を書いたわけですが、Firefox もバージョンアップして Greasemonkey 周りのスクリプトなどが色々面倒な感じになっていたりしますので、ここらで古くなった情報を更新しようと思います。 元の記事で情報として古くなっている 「Tumblr をもっと便利に使う」 の項目を中心に書き換えていますので、それ以外の部分は元記事を見てください。 元記事 5分でわかる Tumblr の始め方 Tumblr をもっと便利に使う さて、しばらく使っていると、ダッシュボードをもっと快適に閲覧したいとか、簡単に
Dropbox にファイルを置くと自動で色々な処理を実行してくれる Dropbox Automator
Dropbox Automator は、Dropbox の指定したフォルダにファイルがアップロードされたときに、あらかじめ指定しておいた各種処理を自動的に実行できるサービスです。 あけましておめでとうございます。新年初エントリーですが、TechCrunch 等で取り上げられていた、「Dropbox Automator」 を試してみたので紹介。 Dropbox Automator は、Dropbox の指定したフォルダにファイルがアップロードされたときに、あらかじめ指定しておいた各種処理を自動的に実行できるサービス。例えば、画像をアップしたら自動的に Flickr にアップしてくれたり、文書ファイルをアップしたら、自動的に PDF に変換しておいてもらうといったことが可能になります。 Dropbox AutomatorはDropbox専用のIFTTTみたい Automatisiere dei
5分でわかる foursquare の始め方
最近一部で話題になっているロケーションベースのソーシャル・ネットワーキング・サービス 「foursquare」 の基本的な使い方を解説しています。 Foursquare がリニューアルし、チェックイン機能が新しいアプリ、「Swarm」 に移行するなど大きく変更されました。詳しくはこちらの記事で書いていますのでご確認ください。 百式さんで取り上げられたからというのもあると思いますが、ここ数日 foursquare が話題です。 foursquare はロケーションベースのソーシャル・ネットワーキング・サービスで、GPS 機能付きのモバイル機器の使用が前提（*）です。単なるSNSではなく、ゲーム性を取り入れたというところが面白いところで、色々な場所（お店中心だと思いますが）に訪れて「check-in （チェックイン）」することで、その回数などに応じてバッジがもらえます。（ちなみにアメリカではお
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
iPad 用にスタイラス自作してみた
iPad や iPhone で使える静電容量式タッチパネル対応のスタイラスを買いたいなと思っていたのですが、タップは問題なくても文字を書いたりという操作に適した物がなかなか見つからなかったので、自作してみました。 iPad の手書き系アプリでメモなどを書く際、指でもいいんですけど、手元が見にくかったりして書きにくいことがあったりするので、スタイラスが欲しいなと思っていました。 ところが、iPad や iPhone のような静電容量式タッチパネル用として市販されているスタイラスは、キーボードのタップなどには向いていても、文字を書いたりすると画面に引っかかってスムーズに行かなかったり、なかなかいい物が見つかりませんでした。 そこで、もう面倒なので自分で作ることに。要はスタイラスの先端から自分の指に電気が流れさえすればいい訳ですから、市販の導電スポンジ（IC とか CPU とか刺しておく導電性の
NISC が各府省庁に脱 IE6 を推奨
政府機関のセキュリティ対策の推進・支援などを行なう 「内閣官房情報セキュリティセンター （NISC）」 が、ブラウザの移行に関する取り組みとして、IE6 から最新版、IE8 への移行を推奨していることを発表しました。 Internet Explorer 6 （IE6） が公開されてからもう9年 （2001年8月27日公開）。すでに IE8 がリリースされ、近々 IE9 もリリース予定という時代にあっても、いまだ企業、政府機関では現役というのはよくいわれる話です。 社内で使用されるシステムが IE6 じゃないと動きませんみたいな話で、仕方なく使い続けているという場合がほとんどだと思いますが、今回、政府機関のセキュリティ対策の推進・支援などを行なう 「内閣官房情報セキュリティセンター （NISC）」 が、ブラウザの移行に関する取り組みとして、IE6 から最新版、IE8 への移行を推奨しているこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
