まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

Chrome拡張機能 EditThisCookieを使ってみる

こんにちは!まちいろの日高です。

Cookie使いこなせていますか?
私はつい最近、Cookieに値をセットする、セットした値を読み込むということを理解した超初心者です。

今回は、GoogleChromeCookieの中身を見ることができる拡張機能EditThisCookieについて紹介します。

 GoogleChromeCookieを確認する

ブラウザの初期機能としてもCookieを確認することは可能です。

Chromeの設定から【プライバシー】【コンテンツの設定】を選択します。
f:id:shidaka:20161130120557p:plain
コンテンツの設定画面から【全てのCookieとサイトデータ】を選択します。
f:id:shidaka:20161130120608p:plain
Cookieがセットされているサイトとその中身を見ることができます。
f:id:shidaka:20161130120618p:plain

 EditThisCookieでCookieを確認する

Cookieを見るだけであれば、標準機能で十分かもしれません。
例えば、Cookieを書き換えてテストをしたい、リアルタイムで確認したいなどであれば、
EditThisCookieの追加をオススメします。

まずはChromeに追加するところから始めます。
chrome.google.com
完了すると、Chrome検索バー横にアイコンが表示されます。
f:id:shidaka:20161130121147p:plain

保存されるCookieはこのように確認することができます。
f:id:shidaka:20161130121739p:plain

 EditThisCookieでCookieを変更する

EditThisCookieでは、保存されているCookieの変更・削除も可能です。

EditThisCookie画面で該当Cookieの【値】を編集します。
編集後はチェックアイコンをクリックすることで反映されます。
f:id:shidaka:20161130122041p:plain

Cookieを削除したい場合は削除アイコンをクリックすることで反映されます。
f:id:shidaka:20161130122052p:plain

 まとめ

Cookieの閲覧・編集・削除を行うのは、GoogleChrome標準機能ではなくEditThisCookieを使うことをお勧めします。
ぜひ追加してみてください。

AdobeXDを使ってアプリのプロトタイプを作成してみよう

f:id:s_kadota:20161116114645p:plain

こんにちは、まちいろの門田です。

昨年の6月に日本版がリリースされた「AdobeXD」。
お手軽にワイヤーフレームモックアップを作成し、共有することができるため
今後デザイナーのプレゼンやコーダーとのやり取りに用いられるケースが増えてくるのではないでしょうか。

なによりプロトタイプ機能を使えば作成したオブジェクトからお手軽に画面遷移を行うことができ、
オンラインでの公開もワンアクションでできるため動きのあるモックを作成後すぐにレビューできるのが強みです。

まだまだベータ版であるため今後もアップデートが繰り返されることと思いますが
現時点でも業務で実際に運用するには十分な機能を備えております。

そんなAdobeXDでの基本的な操作と、実際に簡単な
アプリのプロトタイプを作成した流れをこちらにまとめました。

作成するもの

  • まちいろのキャラクター「だいこん丸」たちの紹介アプリ
  • トップ画面、リスト画面、各キャラクターの詳細画面を作成する。

アートボード

それではまず、AdobeXDを起動します。
ベースとなるアートボードを選択することができるので、今回は「iPhone6/7」を選択します。


f:id:s_kadota:20161116124548p:plain

アートボードが一つだけワークスペース上に作成されます。
次に、必要な画面の数だけアートボードを増やしましょう。
今回作成するページは

  • トップページ
  • キャラクター一覧ページ
  • 各キャラクターの紹介ページ(4キャラクター)

ですので全部で6ページになります。
画面左のサイドバーの「アートボード」の項目を選択します。


f:id:s_kadota:20161116124907p:plain

すると画面右のサイドバーに様々なデバイスやウインドウ幅の項目が出てきますので、増やしたいアートボードのサイズを選択しましょう。
今回は「iPhone6/7」サイズを6画面使うので、新たに5つ追加します。

また、一度選択した後にワークスペース上でアートボードを出したい位置でクリックすれば、
その場所にアートボードを出すことができます。

アートボードはボード上に何もオブジェクトが乗っていない場合のみ、
サイズや位置を画面左サイドバーの一番上の「選択範囲」を使用して自由に変形、
移動することができるのでまずはアートボードの位置を整理しましょう。

f:id:s_kadota:20161116125153p:plain

レイヤー

次に各アートボードに分かりやすく名前を設定しましょう。
画面左サイドバーの一番下にある「レイヤー」を開いてください。
現在展開されているアートボードの一覧が表示されます。
そこで各アートボードの名前を変更します。


f:id:s_kadota:20161116131449p:plain

これで下準備が完了しましたので、実際にモックアップを作成していきます。

オブジェクト

まずは共通となるヘッダーバーとメニューを作成しましょう。

画面左のサイドバーより「長方形」を選択してください。
四角形型のオブジェクトを自由に作成できるようになります。


f:id:s_kadota:20161116132532p:plain

これでヘッダー部分を作成します。
作成した長方形オブジェクトは画面右のサイドバーで線や色の設定をすることができます。


f:id:s_kadota:20161116132550p:plain

テキスト

次にトップページへリンクするためのオブジェクトを作成します。
また長方形オブジェクトを作成したり、インポートした画像を使うことももちろんできますが
今回は「テキスト」で簡易なリンクテキストを作成いたします。


f:id:s_kadota:20161116133153p:plain

「テキスト」で作成したTOPテキストをヘッダーオブジェクト内に配置します。
さらに「テキスト」で現在のページを表す見出しを作成します。
f:id:s_kadota:20161116133429p:plain

これでヘッダーは完成です。
このヘッダーを全てのアートワークにも配置していきます。
作成したヘッダーオブジェクトを丸ごとコピー&ペーストして他のアートボードにも載せていきましょう。 AdobeXDのコピー&ペーストはアートボードの設置位置も記憶されているので
貼りたいアートボード上のどこにカーソルを合わせてペーストしてもちゃんとヘッダー位置に貼り付けてくれます。

ここで、コピー&ペースト以外にAdobeXDには作成したオブジェクトを
テンプレート(シンボル)として保存できる機能がありますのでそちらの機能についても触れておきます。

シンボル

画面左のサイドバーの「レイヤー」の上にある「シンボルライブラリ」を選択してください。
このライブラリ内に作成して保存したいオブジェクトをストックしておくことができ、
いつでもシンボルとして引き出して使うことができます。


f:id:s_kadota:20161116135800p:plain

ただし、全てのシンボルはグループ化されて、アクションなどがリンクされており文章などを削除すれば全てのシンボルに反映されます。
そのため、シンボル化するオブジェクトはボタンやアイコンなど全体で共通する外観のものが望ましいです。 (画像で追加されているヘッダーオブジェクトは見出し文章がアートボードごとに変更して使用するためシンボル化するには実際は不適切)
もしシンボルで個別に編集をしたいものがある場合は
右クリックでメニューを開き「シンボルをグループ解除」してから行う必要があるので注意が必要です。

ですので今回のケースの場合、コピー&ペーストするのが一番簡易な作業です。
しかしもっと大きなプロジェクトで、使い回すオブジェクトが増えてきた場合にはこのシンボル機能が
大きな効果を発揮すると思われますので、是非覚えておいてください。

デザイン作成

各アートボードにヘッダーを配置し、テキストも適した形に変更します。
f:id:s_kadota:20161116141442p:plain
さて、ここから個別にアートボード内で作業し、
作成したオブジェクトを用いたり画像をインポートしてデザインを作成していきます。


とりあえずトップページをざっくりこのような感じで作成し…

f:id:s_kadota:20161116141652p:plain

キャラ一覧ページもざっくりこのような感じで作成し…

f:id:s_kadota:20161116141758p:plain

各キャラ紹介ページもとりあえずこんな形で作成しました。


f:id:s_kadota:20161116141937p:plain

いったん、これらでアプリの各ページの準備が整いました。

プロトタイプ

次に、実際にボタンやリンクをクリックした際に
画面が切り替わる「プロトタイプ」を作成していきます。

ウインドウ左上にある「プロトタイプ」をクリックします。

f:id:s_kadota:20161116142657p:plain
そうするとワークスペースが「プロトタイプ」作成用に切り替わります。
「デザイン」をクリックするとデザイン制作画面に戻ります。

それでは早速、画面移動の設定をしていきましょう。
ここではまず、トップページからキャラ一覧ページへ移動するためのボタンオブジェクトを選択します。

f:id:s_kadota:20161116143057p:plain
すると青いタブのようなものが出てきます。
こちらをクリックするとこのオブジェクトクリック(タップ)した際に

  • どのアートボードに
  • どんな動作で
  • どんな速度で

移動するかを選択することができます。

ちなみにアートボードに対してホームアイコンのついたタブが表示されますがこちらは
青くなっているものが起動時に最初に表示されるホーム画面(index)扱いになります。
クリックすることで切り替えることができます。

まずはホーム画面のボタンから
「listページ」のアートボードに「左にスライド」で「イーズアウト」を0.4秒で移動に設定します。

ここでいったん、ウインドウ右上の再生ボタン「デスクトップレビュー」を
クリックして実際に動くか試してみましょう。

f:id:s_kadota:20161116143513p:plain
こちらが実際のレビュー動画になります。




成功ですね。
この要領で他のアートボード間をどんどんひも付けていきます。
基本的に動作は進む場合は「左にスライド」、戻る場合は「右にスライド」で作成していきます。


最終的にこのような形になりました。
かなりごちゃごちゃしてしまっておりますね。


f:id:s_kadota:20161116144522p:plain

今回は想定している全てのリンクにアクションをつけましたが
実際に作成されるモックアップでは最低限のリンクにのみアクションを設定するだけで良いでしょう。
今回は規模が小さいものなので、せっかくなので全てに設定いたしました。

それでは実際にこちらも「デスクトップレビュー」で動作を確認してみましょう。




問題なく想定した通りの動作をしています。
単純な操作で、ここまでできてしまうのはかなりの強みではないでしょうか。

また、スマートフォン側にAdobeXDのプレビュー用アプリを
インストールしておけばUSB経由で実機でのプレビューも行うことができます。


f:id:s_kadota:20161116144829p:plain

共有

さて、最後に共有の設定をしていきます。
「デスクトップレビュー」の右にある「オンラインで共有」をクリックします。


f:id:s_kadota:20161116144938p:plain

オンラインで公開する際のタイトルと、アクセスするためのリンクや埋め込みコードを生成することができます。
生成したリンクにアクセスすれば、プレビュー画面で実際に動作を試していただくことができます。
今回作成したモックアップのレビューはこちら

▶︎ まちいろテストアプリ


リンクを共有さえすれば、作成したプロトタイプを
すぐにプロジェクトメンバーやクライアント先に見てもらうことが可能です。






いかがでしょうか。
モックに動きをつけるツールやサービスは色々とありますが、
AdobeXDはかなり簡易に利用できるツールだと思います。

アプリにとどまらずWEBサイト制作にも、プレゼン用の資料などにも活用することができるため
今後も活躍の場が増えていく、期待できるツールになると思われます。

AMP (Accelerated Mobile Pages) 導入の流れ

こんにちは、まちいろの工藤です。

先日、b-monster 株式会社と共同開発したオウンドメディア「b-monster.fit」がリリースされました。 フィットネスやボディメイクに関する記事を中心としたオウンドメディアとなっておりますので、興味のある方はぜひ購読をお願いします!

f:id:mkudo-machiiro:20170110224437j:plain

http://b-monster.fit

b-monster.fit の構築にあたって、記事ページを AMP (Accelerated Mobile Pages) に対応してみましたので、今回はその AMP 対応の流れをご紹介したいと思います。

AMP とは

AMP とは Accelerated Mobile Pages の略で、GoogleTwitter で共同開発しているモバイル端末での Web サイト表示を高速化するためのプロジェクト、またはフレームワーク自体を指します。読み方は「アンプ」が正しいようです。

www.ampproject.org

AMP を知るにあたって、個人的には mozaic.fm の AMP 回が非常に勉強になりました。

mozaic.fm

AMP には様々なレギュレーションがあり、これらに則ることで Web の高速化手法 (非同期処理、プリレンダリング、CDN キャッシュ...等) が適用されて高速にページが表示できる、という仕組みです。

AMP のレギュレーションの代表的なポイントは以下の通りです。

  • JavaScript を利用することはできない
  • 代わりに AMP が用意するコンポーネントで代用
  • CSS は外部ファイルではなくインライン展開する必要がある
  • img/iframe 等、一部のタグは AMP 用のタグに置き換え必要
  • style 属性を指定することはできない

また、AMP はサイトを高速に表示するだけでなく、ニュース記事であれば Google 検索のトップニュース枠 (AMP カルーセルと呼ばれる) に表示される条件にもなります。 本記事執筆時点で「大統領」と検索すると、以下のトップニュースが表示されていました。

f:id:mkudo-machiiro:20170110233848p:plain:w300

※ AMP カルーセルにブログ記事等のニュース以外の記事が表示されるパターンは確認できませんでした。この辺の事情ご存知の方いましたらコメントいただけると嬉しいです。

以上のことから、現時点では記事サイト、特にニュースサイトの記事であれば AMP を導入するメリットがありそうです。実際に多くのニュースサイトでは既に AMP が導入されています。

記事ページを AMP 化する

それでは今回 b-monster.fit で行った AMP 対応をご紹介します。

※ AMP ページを作成するための手順を記述していますが、実際には通常の記事ページ用の実装と、AMP ページ用の実装の2種類が分岐しながら実装しているイメージとなります。

1. AMP ボイラープレートを適用する

公式サイトのボイラープレートをそのまま持ってきて適宜内容を変更します。

www.ampproject.org

2. AMP ページの URL を指定

通常ページには <link rel="amphtml"> で AMP ページの URL を、AMP ページでは <link rel="canonical"> で通常ページの URL を示します。 この設定をしておくことで、通常ページをクローラーした際に一緒に AMP ページまでクロールしてくれます。

ちなみに AMP の URL 構造にはパラメータを使っても OK なので、通常ページのURL?amp=1 といった URL でも OK でした。

3. CSS をインライン展開する

通常 CSS は外部ファイル化して <link href="xxx.css"> で読み込んでいると思いますが、AMP では <style amp-custom> タグの中にインライン展開します。

4. 構造化データの設定

Google 検索結果の AMP カルーセルに表示させるには、schema.org に準拠した構造化データの指定が必要です。 今回は schema.org/Article の仕様に準拠した指定を行いました。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "url": "記事の URL",
    "headline": "記事のタイトル",
    "description": "記事の説明",
    "keywords": "記事のキーワード",
    "mainEntityOfPage":{
      "@type": "WebPage",
      "@id": "記事の URL"
    },
    "dateCreated": "記事の作成日時 (ISO 8601 フォーマット)",
    "datePublished": "記事の公開日時 (ISO 8601 フォーマット)",
    "dateModified": "記事の更新日時 (ISO 8601 フォーマット)",
    "author": {
      "@type": "Organization",
      "name": "b-monster"
    },
    "publisher": {
      "@type": "Organization",
      "name": "b-monster",
      "logo": {
        "@type": "ImageObject",
        "url": "ロゴ画像の URL",
        "width": 130,
        "height": 53
      }
    },
    "image": {
      "@type": "ImageObject",
      "url": "記事画像の URL",
      "width": 1000,
      "height": 600
    }
  }
  </script>

5. img タグを amp-img に置き換える

HTML に普通に <img src="xxx.jpg"> と記述していたところを、<amp-img src="xxx.jpg"> に置き換えます。

また、widthheight を必ず指定する必要があります。レスポンシブデザインを採用している場合は、layout="responsive" 属性を指定して、アスペクト比を保ったまま width 一杯に表示させることで対応が可能です。

6. Google Tag Manager の導入には amp-analytics タグを利用する

JavaScript を利用できないため、代わりにカスタムエレメント amp-analytics を利用します。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

...

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-xxxxxxx&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

7. JavaScript を使わずに CSS のみで UI を実装する

今回は初めから AMP 対応が決まっていたので、例えばドロワーを JavaScript を使わずにチェックボックス:checked 疑似クラスセレクタを利用して実装してたりします。 ただし、ドロワーに関しては amp-sidebar を使って AMP でも実装可能です。

AMP ページを検証する

1. URL に #development=1 を付けてデバッグ

Chrome で AMP ページを開いて URL に #development=1 を付けてリロードすると、AMP ページのバリデージョンが実行され Console にエラーが出力されます。 ローカルで開発する際はこの方法でエラーを潰していきます。

2. AMP テストツールを実行する

サーバーを構築したら、実際の URL を AMP テストツールに投げて問題が無いか検証します。

AMP テスト

合わせて構造化データもチェックしておきましょう。

構造化データ テストツール

3. Google Search Console でエラーを確認する

AMP ページに問題がある場合、Google Search Console にログが出力されますので、内容を確認して適宜修正します。運用が開始されたら基本はここをチェックします。

f:id:mkudo-machiiro:20170110224236p:plain

おわりに

b-monster.fit はまだ広告も動画も無いシンプルなサイトなので、ここで紹介した内容は AMP 対応の中でも基本的な内容となります。

既存サイトへの導入は難しいこともあるかもしれませんが、新規にサイトを構築する際は導入を検討してみてはいかがでしょうか。