かつてSEOといえば、サーチエンジン(特にGoogle)向けの対応のことだったが、モバイル時代ではWebに加えてネイティブアプリへの対応が不可欠。さらに、多くの人々がFacebookやTwitterなどの巨大プラットフォーム上で時間を費やしてる現在では、それらの中でコンテンツがどのように表示されているのか、きちんとリンクが設定されているかなど注意を払う必要がある。 少し古いデータだけど、きちんと対応することでサービスへの流入を増やせることは間違いなさそう。 流入が174%増加!もうFacebook OGPは設定していますか? そこで、各プラットフォームの仕様をまとめてみた。 From\To Browser (Web) iOS App Android App
<!-- The following 2 meta tags *must* come first in the <head> to consistently ensure proper document rendering. Any other head element should come *after* these tags. --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Allows control over where resources are loaded from. Place as early in the <head> as possible, as the tag only applies to resources
「なぜ日本のウェブサイトでは1Passwordでクレジットカード番号を一発入力できないのか?」という素朴な疑問から、少し調べてみました。なお1Passwordはパスワード管理ソフトであり、またウェブサイトのフォームにパスワードやクレジットカード情報を一発入力するためのブラウザ拡張機能です。 クレジットカード番号入力フォームに関する標準を探したところ、IETFとWHATWGの取り組みを見つけることができました: Electronic Commerce Modeling Language (ECML), Version 2 Specification by IETF HTML Standard: 4.10.19.8 Autofill by WHATWG こういった標準に準拠することで、1Passwordのような支援技術(assistive technology)にフォームの「意味」(seman
Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond. Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended th
このサイトは様々なスキーマを紹介します。スキーマとは、ウェブマスターがページをマークアップすることによって大手検索プロバイダーに認識されやすくなるHTMLタグです。 Bing、Google、Yahoo! などの検索エンジンサイトはこのマークアップを通してより質の高い検索結果を出すことができ、またユーザは探したいページを簡単に見つけられるようになります。 多くのサイトはデータベースに保管されている構造化データから生成されています。このデータはHTMLにフォーマットされる場合、元の構造化データを復元することが難しくなります。検索エンジンを初めとする多くのアプリケーションは構造化データに直接アクセスすることによってメリットを得ることができます。ページ内にデータを埋め込むオンページマークアップを導入することによって、検索エンジンはさらに質の良い検索結果を出すことができ、ユーザが本当に必要な情報を提
連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング(前編)」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画! この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください!こちらから問題にチャレンジ! 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水(@1000ch)です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
昨日の記事で、抽象的なまま書きまくった反省もあるのだけど、それと同時に残念な気持ちになったので、すごく当たり前のことを書く。 オンラインゲームでクライアントに状態を持ったらメモリ操作されて危険っていうブコメが多かった。それは正直、古典的なウェブアーキテクチャから脱却できない残念な感じだと思ってる。 原則 クライアントはサーバーのキャッシュを作って、サーバーと同じロジックを持って、計算し、次の行動を決定する。 が、サーバーはクライアントから送られてくる情報を信用しない。 大事なことなのでもう一度言う。サーバーは、クライアントから送られてくる情報を信用しない。 対応 モデルの状態を受け取るのではなく、モデルのトランザクションを受け取る。 実装例 AからBに攻撃したい。この時にattackEnemyというAPIを作るとする。 ここでのクライアント目的では、手元のデータで対象に攻撃可能かどうかを判
先日、勉強会でAdobe Bracketsをはじめて触ってきました! 私はST2に恋している身なのでそこまで興味はなかったのですgげふんげふん!これ、使ってみたらなかなか良かったのですよ…! なので、今日はそこで学んできたAdobe Bracketsの魅力と、コーダー必須アイテムであるEmmet(Zen-Coding)のインストール方法を皆さんにご紹介したいと思います!! というわけで、@stocker_jpさんがオープンされた教室『Stocker.jp / Space 』にて行われた@glatyouさんのAdobe Brackets勉強会にいってきました。 こういう勉強会に参加して、アプリケーションに触れてみるのって大事ですねー。ST2の時も触るまで微塵も興味なかったなぁ…w Adobe Bracketsとは Adobeから出ている無料のテキストエディタです。CCに加入している必要はなく
注意事項:◆このツールは「<」「>」マークを元に、HTMLを見やすく整形してくれる単純なツールです。 ◆不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能を追加しました。 ◆一行の長さは8000バイト以内してください。制限を超えると応答が帰らない場合があります。 ◆当ツールへのご意見、ご要望は "Pika's home"へお願いします。
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く