こんにちは。プレイドの@otoanです。 突然ですが、Service Workerって使ったことがありますか？ Service Workerは、オフラインでページを開き続けるためのキャッシュ機構として導入されましたが、それ以上のパラダイムシフトを含んでいると理解され、注目されるようになっています。注目度は高い新機能なのですが、全体像をつかめる記事を意外と見かけなかったので、今回テーマとして選びました。 KARTEでもブラウザ通知機能として、Service Workerの利用を一部始めていますので、その際に得た情報とその考察をまとめたいと思います。個々の機能の詳細やサンプルコードについては、良い記事がたくさん出ていますので探してみてください。 8/4に公開されたService worker meeting notesについても、最後の方で軽く触れていますが、記事本文内には十分反映できていませ
レスポンシブデザインが流行してきているとはいえ、こんなことをしているはてなブロガーさんやWebデザイナーさんは後を絶たない。 PCでいちいちブラウザの幅を変えながらデザインを確認している わざわざUserAgent Switcherでユーザーエージェントを切り替えて表示を変えている 横にiPhoneやAndroidの実機を置いて表示を確認している そもそもモバイルを意識していない(論外) そんなWebデザインにかかわるすべてのひとに紹介したいのが、「Blisk」という超絶便利なニューカマー・ブラウザだ。いままで「え？こういうブラウザっていままでなかったの？」と不思議に思ってしまうくらい、発想はシンプルだが革新的なブラウザだ。まだベータ版であることやこれまでWindowsでしか公開されていなかったので紹介するのを戸惑っていたけれど、いよいよMac版もリリースしたので、堂々紹介していきたい*1
先週金曜日にエンジニアサポートCROSS2013に行ってきた。目当ては @Jxck_ さんホストによる次世代Webセッション。セッション自体は前後半に分かれていて 前半はプロトコル編。SPDY (wikipedia) や HTTP/2.0 の動向やその課題点など 後半はアーキテクチャ編。プロトコルが変わった上で、その上で動くソフトウェアのアーキテクチャが云々 という内容でした。前半がより技術寄り、後半はテーマ的にもより広範の話題を扱うという感じでどちらも面白かった。 CROSS 2013レポート(2) - mad-pの日記 こちらに細かいログがあります。 話の前提になる SPDY や HTTP/2.0 周りの昨今については 【HTTP 2.0の最新動向】 第1回：HTTP/2.0の策定、ついに始まる - INTERNET Watch Watch 【HTTP 2.0の最新動向】 第2回：HT
Web Icon Fonts Webフォントで使えるアイコンセット。IE8以下では使えないです。iOS4.1以下も多分見られない。 _Download(35KB) @font-face{ font-family: 'WebIconFonts'; src: url('WebIconFonts.woff') format('woff'), url('WebIconFonts.ttf') format('truetype'); } .icon { font-family: WebIconFonts; } Arrows !Back! 1Back1 #Forward# 3Forward3 $Up$ 4Up4 %Down% 5Down5 &Done& 6Done6 'Close' 7Close7 (Plus( 8Plus8 )Minus) 9Minus9 Social Networks AAmazon
Web開発者のためのサードパーティCookieやらトラッキングやらの問題点について三回ぐらいに分けて書きます。 この文章は個人的に書いていますので、おい、お前のところのサービスがサードパーティCookieに依存してるじゃねーかというツッコミがあるかもしれないが、そういうことを気にしているといつまで経っても公開できないという問題が出てしまうので、そんなことはお構いなしに書く。ちなみに例外なく自社サービスに対してもサードパーティCookieに依存するな死ねと言っている。これはWebプログラマー観点で、自分がサービス開発に関わる上で知っておかねばならないだろう知識として十数年間だらだらとWebを見ていて自然に知っていたものと、あるいは興味を持って率先して調べたものが含まれている。ググッて直ぐに分かる程度の用語の定義的なことは書かない。あくまでWebサイト制作者側からの観点なので、ブラウザ開発関係
書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門：https://amzn.asia/d/4WDsTI6 デザイン図鑑：https
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
Lumzy ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」というのが公開されているみたい。 デザイナーさんであれば、Photoshopでまずデザインを作るより、顧客にどういうサイトを作るか、イメージしてもらうためにモックを作るわけですが、それがブラウザ上で高速にできちゃいます。 ネットブック片手にブラウザさえインストールしてネット環境さえあれば、顧客と相談しながらサイトのレイアウトを作っていっちゃえますね。 サインアップとか無しにすぐに使えるところもGoodで、Flashを使った直感的なUIでモックアップをサクサク作れちゃいます。 ツールを立ち上げると、まずプロジェクト作成画面がでるので適当にいれて「Create Project」します。 作成すると、ボタンとかメニューバー、リスト、データグリッド、コンボボックスなどのありとあらゆるUIパーツが最初からそろっていて
今回は、統合テストなどで利用できる便利ツール「Selenium IDE」と「ratproxy」を組み合わせてのテスト方法を紹介します。 どちらも良く使われるツールなので、既に取りれている方もいるとは思いますが、両ツールを組み合わせることでより効率的にテストを行えるのではないでしょうか。 さっそくテスト方法について書いていきたいと思います。 1．ratproxyをインストール 以前、本ブログでも紹介されていましたが、Googleのセキュリティツール「ratproxy」をインストールします。 ※参考：フリーで使えるセキュリティスキャナ・ツールまとめ ダウンロードはこちらのページから行えます。 2．Selenium IDEをインストール FireFoxのアドオンである、Webアプリケーションテストの自動化ツール「Selenium IDE」をインストールします。 Selenium IDEは、こちら
A collection of interface design solutions from all over the web, where users can mark patterns they like, and learn from other's design solutionsPattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. We aspire to be the one stop pattern shop for your next inspiration need.
※ 画像は公式サイトデモより 開発におけるソースコード管理に、最近はGitを使うようにしている。各人でコミットして、運用できるのが良い。そして固まった段階でPushするというのは分かりやすくて便利だ。 変更履歴 だがまだまだ他のバージョン管理システムに比べると周辺ツールが弱いのが実情だ。そこでGitの地位向上のためにも、こちらをご紹介しよう。 今回紹介するオープンソース・ソフトウェアはViewGit、WebベースのGitリポジトリブラウザだ。 ViewGitはWebベースで利用できるので、開発者以外でも手軽にGitリポジトリに触れることができる。Pushごとに一覧したり、そこで変更されたファイルだけをリストアップすることができる。 差分表示 また、修正された内容を差分で表示したり、ファイル自体の内容をハイライトされた状態で閲覧したり、各ファイルをダウンロードすることができる。Pushされた
インターネットメディアとは何か？という話しをこの前友だちとしました。 おいらの今主張としては「インターネットメディアとはコミュニティである」という結論になっています。双方向とかインタラクティブとかそういう言葉とイコールとして考えていただいてもかまいません。 よく言われるのが、日本では新しいインターネットサービスが生まれていない、ということです。常に海外のぱくりじゃないか、と言われがちです。それはたしかにそう。 しかし、２ちゃんねるはどうでしょう。あの形式のは海外であったものではなく日本独自のもの。またはてな匿名ダイアリー（通称：増田）もそうですね。ニコニコ動画も世界で類を見ません。 mixiはFriendstarやMySpaceと同じと言われることもありますが、実態は違うと思います。mixiは友だち同士で日記を見せ合うというサイトという特殊なサイトではないかと考えています。 とい
こんにちは！やまもと＠テスト番長です。 TestingGeekという耳障りの良い名前のサイトをご存知でしょうか？ 総合的にテストの話を取り扱っており、それでいて読みやすいサイトです。 そこのTemplatesのコーナーにWeb Application Testing Checklist という便利そうなものがありましたので、日本語にしてみました。 ちょっとそのままだと物足りない感がありますが、テストポリシー作成の叩き台に使ってみるのも良さそうですね。 この手のリストを他にもご存知の方がいらっしゃれば、是非ご一報ください。 1. 機能テスト 1.1 リンク 1.1.1 記載された通りの先に遷移するか 1.1.2 どこからもリンクされないページは存在しないか 1.1.3 全ての外部リンク 1.1.4 参照しているサイトおよびメールアドレスはハイパーリンクになっているか？ 1.1
Landscape トップページ | < 前の日 2006-02-20 2006-02-21 次の日 2006-02-22 > Landscape - エンジニアのメモ 2006-02-21 Accept-Encoding に gzip を付けてないクライアントをリダイレクト 当サイト内を Google 検索できます * Accept-Encoding に gzip を付けてないクライアントをリダイレクトこの記事の直リンクURL: Permlink | この記事が属するカテゴリ: [Apache] [http] [sonic64.com] アクセスログを見ていたら、503 Service Temporarily Unavailable が出ていることに気づいた。503 はサーバ側の都合でサービスができないことを意味する HTTP ステータスコード。要するに、503 が出ている間は当サイトに
米Yahoo!の技術部門責任者であるBradley Horowitz氏のブログに、Flickrやdel.icio.usといったソーシャル系WEBサービス（記事中では"social media sites"と総称）のユーザー分類について、面白い解説がされています： Creators, Synthesizers, and Consumers (Elatable) 曰く、ソーシャルメディアの利用者はクリエーター、シンセサイザー、コンシューマーの3つに分かれ、以下のような構成比率になるとのこと（記事中に掲載された図を転載）： またYahoo! Groupsを例にとり、それぞれのユーザー種別を以下のように詳説されています： 1% of the user population might start a group (or a thread within a group) 10% of the use
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く