ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで
野良ビッグデータへのお誘い
Masanori TakanoSystem Engineer, Technology Researcher at CyberAgent, Inc.
インフラエンジニアのいない会社で働いて 1 年半 - Diary
インフラエンジニアのいない会社で働いて 1 年半 が経った。 iOS で動く POS レジアプリとその管理インターフェイスの Web アプリケーションを作ってます。 iOS 側のことはほとんど分からなくて、データ同期用 API と Web アプリをずっと作っている。 ところで、 「NoOps」の時代がこない理由という記事が前にあったのですが、この点ぼくが働いている会社は NoOps です。アプリケーションは Heroku に乗っていて、 RDBMS が Amazon RDS で一部分析系に Google BigQuery を使っていること以外は全て Heroku 系の何かで動いています。 CI は Travis と circleCI を使っていて、 circleCI については来年初頭にも利用をやめて Travis に一本化する予定、というかんじ。 本当に自分達でなにもサーバーを管理してい
パフォーマンス向上のためのデザイン設計
Webサイトのパフォーマンスは、「9：1でフロントエンド側のパフォーマンスが重要」だと言われています。パフォーマンスの向上には、インフラ側だけでなくフロントエンドの設計が大いに影響します。そこで本書は、Webサイトのパフォーマンス向上についてデザイン面からのアプローチに特化し、日々の業務に取り込めるCSS、HTMLのコーディングテクニックや、Webサイトで使用する画像を作成する際のヒントを紹介しています。また、デザイナーだけでなく、サイト運営に携わるすべてのスタッフがパフォーマンスへの意識を高めるための効果的な取り組みについても解説します。 賞賛の声 推薦の言葉 はじめに 監訳者まえがき 1章 サイトパフォーマンスはユーザエクスペリエンス 1.1 ブランドに与える影響 1.1.1 ユーザの再訪問 1.1.2 検索エンジンの順位 1.2 モバイルユーザへの影響 1.2.1 モバイルネットワー
AMP（Accelerated Mobile Pages）の基礎知識から対応・導入方法まで！まとめ | 株式会社ウェブ企画パートナーズ
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル
グーグル、“ページ表示が遅い”を解消する「AMP」プロジェクト--7秒が1秒に短縮
Googleはこのほど、2015年10月に公表したオープンソースプロジェクト「Accelerated Mobile Pages（AMP）」の日本語版導入ガイドをウェブサイト管理者向けに公開した。 このAMP（アンプ）と呼ばれるプロジェクトは、スマートフォンで閲覧するモバイルサイトの表示速度を従来のサイトよりも高速化させることを目的としたもので、すでに世界各国のニュースサイトなどがこのプロジェクトに参加し、AMPへの対応を準備しているという。 プロジェクトの目的と具体的な内容について、Google日本法人 プロダクトパートナーシップ本部 ストラテジック パートナー デベロップメントのマネージャであるダンカン・ライト氏、そして同じくプロダクトパートナーシップ本部 出版コンテンツ アジア太平洋統括部長の佐藤陽一氏に聞いた。 ページ表示の遅さによるユーザーの閲覧断念を解消したい --まず、このAM
HTTPステータスコードを適切に選ぶためのフローチャート : 難しく考えるのをやめよう | POSTD
HTTPステータスコードを返すというのはとても単純なことです。ページがレンダリングできた？よし、それなら 200 を返しましょう。ページが存在しない？それなら 404 です。他のページにユーザをリダイレクトしたい？ 302 、あるいは 301 かもしれません。 I like to imagine that HTTP status codes are like CB 10 codes. "Breaker breaker, this is White Chocolate Thunder. We've got a 200 OK here." — Aaron Patterson (@tenderlove) 2015, 10月 7 訳：HTTPのステータスコードのことは、市民ラジオの10コードみたいなものだと考えるのが好きです。「ブレーカー、ブレーカー、こちらホワイト・チョコレート・サンダー。200
【重要なお知らせ】koebu サービス提供終了のお知らせ｜koebuニュース
いつも「koebu」をご利用いただきありがとうございます。 2007年12月よりサービスを開始し、多くのお客様にご利用いただいておりました「koebu」ですが、このたび検討を重ねました結果、誠に残念ながら、2016年9月30日をもちましてサービスの提供を終了させていただくこととなりました。 つきましては、今後のサービス終了に向けたスケジュールをご案内させていただきます。 2016年3月31日 14:00 新規koebuポイント購入機能終了 koebuポイントの購入が終了となります。 すでにご購入いただきましたポイントの有効期限に変更はございません。 2016年8月1日 17:00 ゴールドメンバー新規登録機能終了 2016年8月31日 23:59 ゴールドメンバサービス提供終了 2016年9月30日 14:00 全サービス終了 すべての機能がご利用いただけなくなりま
A-Frame – Building Blocks for the VR Web
Subscribe to get updates on A-Frame and our VR projects! Subscribe
HTML数行でVRできるA-Frame
Oculus Rift Advent Calendar 2015の23日目の記事です。違うネタを予定していたのですが、急にA-Frameが来たので、これは！ ということで紹介です。 A-Frameって何？ A-Frameは、MozVR（Mozilla VRチーム）がリリースしたバーチャルリアリティのフレームワークです。まず、難しい話を抜きにして、下のHTMLをファイルに保存してIE以外のブラウザで開いてみてください。 <!DOCTYPE html> <head> <script src="https://aframe.io/releases/latest/aframe.min.js"></script> </head> <body> <a-scene> <a-cube position="-2 1 0" color="#C00"></a-cube> <a-sphere position="
いまさらだけど、Webのイケてないところについて - Tortoise Shell
Webは面倒くさくて、本当にイケてない。 わたしはWebデザイナーとして働いているので、Webについての色々な事を当たり前だと思い込んで何の疑問も抱きませんでした。 しかし、冷静に考えてみると、おかしいことだらけだと思います。 Webデザイナーは、デザインするのが仕事です。 コンテンツの魅力を最大限にエンドユーザーに伝えるべく、情報をデザインしています。 つまり、Webデザイナーは「コンテンツの質を高めること」に注力しなければならないのです。 しかし、現状はどうでしょうか。 人間ではなく検索エンジンに優しいWebサイト 本来ならデザインに集中すべきなのに、なぜブラウザの差分に振り回されたり、SEOを気にしながらWebコンテンツを作らなければならないのでしょうか。 ブラウザもSEOも「手段」であるはずなのに、わたしたちはいつもその「手段」に振り回されています。 特に、SEOなんてひどい話だと
はぐれSEのやさぐれ日記
Fiddlerとは Fiddlerは、Eric Lawrence氏(元Microsoft社→現telerik社のエンジニア)が開発したフリーのWebデバッグツールです。 Webブラウザとサーバーの間でHTTP(S)通信を中継するWebプロキシとして働き、通信内容を確認したり、HTTPのリクエスト/レスポンスを捕捉して内容を操作したりできます。 同様のプロキシツールにはBurpSuite、WebScarabなどがあり、Webアプリケーションのデバッグ、テストに使用されています。 Fiddlerはバッチコマンドの実行機能や自動応答(AutoResponder)機能などWebアプリケーション開発者向けの機能が充実しています。 また、拡張性にも優れており、スクリプトによる拡張、DLL(.Net Managed DLL)による拡張が容易です。 2015年7月現在、Fiddlerはこちらのサイトで公開
実はFiddlerがすごすぎたので、機能まとめ紹介
今までFiddlerをただのセッションの中身を確認できるLocal Proxyとしてしか見ていなかったのですが 改めて良く調べると色々できることが多すぎると判明。感動したので便利な機能をまとめてみました。 先に簡単に説明しておくと、FiddlerはMicrosoftが無料で配布しているWeb Debugging Proxyです。 Windows環境にインストールして、ブラウザとサーバの間の通信を読んだり操作したりできます。 配布サイトはこちら。 Fiddler Web Debugger – A free web debugging tool 動作環境は「Windows 2000 / XP / 2003 / Vista with Microsoft .NET Framework v2.0 or later」 今回使ったバージョンは、2009年9月10日時点で最新の安定版、2.2.4.6。 と
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
受託開発の会社が自社サービスを1年運用してきた内容・結果と今後の課題 - ヴェルク - IT起業の記録
boardというサービスを正式リリースしてからちょうど1年が経ちました。 以前、「受託開発の会社が本格的にWebサービスを開発・運用してみてぶつかった課題（只今5ヶ月目）」という記事を書きましたが、その続きというか、現在の状況を書きたいと思います。 boardの開発の始まり boardは2年前の9月に開発を始めました。 その頃は起業して3年目の後半で、案件の管理や見積書・請求書作成などはExcelでやっており、案件数の増加とともに、Excel管理がだいぶしんどくなってきていました。 そこで、何か請求書作成系のクラウドサービスを使おうと思って探し始めたのですが、案件単位で受注するビジネスモデルにフィットするようなサービスがなく、また支払管理・売上管理・見込み管理など、自分が会社を経営する上で必要な部分まで欲しいレベルでカバーしているものがありませんでした。 ちょうど9月の連休があったので、自
クラウドソーシングを使ってWebサービスを作った話 - toyoshiの日記
私が（ほとんど）プログラムなしでクラウドソーシングを使ってWebサービスを作った話を紹介します。 以前「土日で作るWebサービス入門 - toyoshi」という記事を書きましたが、今回書いたコードは20行ぐらいなので、さらに短い時間でWebサービス（というより便利サイト？）を作ることができました。 はじめに 私はWebサービスが好きで、会社を立ち上げて、請求管理サービスMisocaというのを運営しています。 サービスは順調にユーザー数を伸ばしていて嬉しいのですが、問題は私がコードを書かなくなったということです。Webサービスが好きで会社を立ち上げたのに、開発以外の仕事が忙しくてコードは他の人たちが書くようになってしまいました。 でもコードは書きたい！Webサービスを作りたい！でも仕事以外のことをしすぎて会社の成長が遅れてはだめだ。 そういった事情から、だったらせめてプログラムをせずに自分は
フレームワークに見る Web セキュリティ対策 - Qiita
セキュキャン 2015 高レイヤートラック(Jxck) 本資料は、セキュキャン 2015 高レイヤートラックの講義資料です。 セキュキャン参加者であるセキュリティエンジニアの卵を対象に、 Web のセキュリティの知見が、実際どのように Web アプリ開発に反映されているか、もしくはどう反映すべきかを、フレームワークの視点から解説することを目的としています。 将来、 Web のセキュリティに興味を持ったエンジニアが、その知見を多くの開発者に啓蒙する手段として、フレームワークに反映するというのは非常に有効な方法です。 ここではその実例として Rails を例にとり、 Rails がこれまでに積み上げてきたセキュリティに関する知見を振り返るとともに、フレームワークとしてそれをどう取り入れているかを解説します。 Intro Web アプリケーションを開発する場合、 Web アプリケーションフレーム
Y!mobileはHTTPのプロトコルを監視して帯域制限を行っている｜11. 00100100…
旧EMOBILE LTEの回線でアプリのテストをしているときに謎の不具合として発見しました。 スピードテストや、普通のブラウジングは快適に行えているのに何故かzipファイルの転送時のみものすごく遅くなり、最初は自分のアプリの不具合を疑いましたがHTTP通信全般で発生するようです。 。 契約回線は旧EMOBILE LTEで、「当月のご利用通信量が10GB以上」で帯域制限を行うと公表されています。 テストした日までの通信量は10.588GBで、目安の通信量を超過している状態です。 この状態でHTTPによるリクエストを出すと、ファイル種類によって挙動が変わります。 月初めはどのような挙動になるか不明なので来月になったらやってみます。 以下実験結果です。 以下コマンドで1MBのダミーファイルを生成。 % dd if=/dev/zero of=test.zip bs=1M count=1 ファイルの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
