特定の開発環境で理解したYAMLとCSS lintの使用例

この記事はMobifyのProgressive Mobileの機能として提供されるWebプッシュ通知のセットアップを通して理解したYAMLの使用例、GruntによるCSS lintの具体例です。

• YAML
• CSS lint
• おまけ:WebPushに必要なアイコン画像

設定ファイルとしてのYAML

サイトのIDや対象となるドメイン、デフォルトメッセージ、アイコンのURLなどWebプッシュの配信に必要となる設定にYAMLというファイルを用いていました。詳細について下記のページなどを参考にしたところ、RubyやPythonなどで設定ファイルの記述に使われるものみたいです。
・YAMLとは何か？ - いつもRailsの設定ファイルで出てくるやつの正体
・[YAMLを覚えよう] (http://abcmark2010.hatenablog.com/entry/2015/12/20/235604)

• 読みやすく・書きやすく・わかりやすいという特徴がある

• インデントを使ってデータの階層構造を表す
• 終了タグが存在しない
• データ構造をハッシュ・配列・スカラーの三種類で表す

という特徴があるようです。XMLのようにキーをタグで囲む必要がなかったり、型を指定する必要がなかったりするようなので、確かに分かりやすいですね。MobifyのWeb PushではYAMLをバックエンドのPythonとフロントエンドのJS（で使えるオブジェクトに変換して）の両方で使っています。見た目の分かりやすさと同時に異なる環境で設定を共有するには都合がよさそうです。

YAMLの記述例

プロジェクトを作成すると[SITE_ID].yamlというファイルがルートに見つかります。
これを開くと以下の項目が設定できます。実際にはどのような値を設定すればいいのか、それぞれに細かくコメントが入っているのですが、項目と構造を把握するためにコメントは全て省略しています。

yaml

    netloc: <no default>
    site_id: "SITE_ID"
    config:
        cloud_slug: <no default>
        friendly_site_name: <no default>
        business_slug: "mobify"
        business_name: "Mobify Web Push"

        load_host_client: false 
        client_inline_hardask: false 

        in_development: true

        support_client_global_delete: false
        show_confirmation: true

        default_icon_url: <no default>
        default_url: <no default>
        default_message_title: <no default>
        fallback_message_text: <no default>

        send_welcome_message: false
        welcome_message_text: <no default>
        welcome_message_title: <no default>
        welcome_message_url: <no default>

        use_service_worker_loader: false 
        service_worker_debug: false

        hosting_domain: <no default>
        target_domain: <no default>
        target_site_mapped_path: "webpush" # means "/webpush/..."
        service_worker_in_mapped_path: false 

        trampoline_url: "https://__hosting_domain__/webpush?site_id=__site_id__&webpushtrampoline="

        apn_website_push_id: <no default for this>
        apn_certificate_name: <no default for this>
        apn_key_name: <no default for this>
        apn_url_format_string: "__BACKEND_CDN_URL__/webpush?site_id=__site_id__&webpushtrampoline=%@"
        apn_app_id: <no default>
        apn_native_sandbox_certificate_name: <no default>
        apn_native_sandbox_key_name: <no default>
        apn_native_certificate_name: <no default>
        apn_native_key_name: <no default>

        splits:
            - min: 1
              max: 4
              name: engineering
              enabled: false
              description: Early-bird engineering test group
            - min: 5
              max: 50
              name: variant_ui
              enabled: false
              description: Test of variant UI
              ui_style: variant
            - min: 51
              max: 100
              name: control
              enabled: false
              description: Group receiving no web push asks

splits

基本的にはconfigの中にほとんどの設定が羅列されているのですが、splits:の中に1つインデントをした「-」が3つあります。この「-」から同じ階層の値が１つのオブジェクトになっていてsplitsには3つのオブジェクトが配列として扱われます。

MobifyのWebPushではブラウザの許可ダイアログの前にサイト側でコントロールできる承認バナー（softask.html）を表示して、ブロックを防ぐことができます。その他に実際にWebPushを登録するページ（デフォルトはMobifyドメイン）、登録完了後に表示されるサンクスバナーをサイトに合わせて作成します。

CSS

CDNにアップされるファイルは「custom/production/styles/stylesheet.css」ですが、これは「src/sass/」内のSCSSファイルから生成されます。

プレビュー

CSSを変更する際はgruntコマンドを実行してSassをコンパイルしながらプレビューします。

$ grunt

gruntのデフォルトタスクにビルドとlintが設定されているので、これだけでOKなんですね。
Webのテンプレート開発環境ではローカルサーバの軌道やミニファイとか、もっとタスクが多かったのですが、ここではかなりシンプルになっています。
Sassファイルを変更して保存するとSassのlintとコンパイルが都度行われます。lintはMobifyのスタイルガイドに則っているので、下記のページを参照してください。
https://github.com/mobify/mobify-code-style

具体的には文法エラー、順番やインデントなどスタイルガイドに反した記述をするとチェックして該当箇所を指摘してくれます。

lintの例

src/sass/components/_dialog.scss
  64:5  error  Expected `margin-bottom`, found `padding`  property-sort-order
  65:5  error  Expected `padding`, found `margin-bottom`  property-sort-order

✖ 2 problems (2 errors, 0 warnings)

ここでは「padding」の前に来るべき「margin-bottom」が後ろに見つかったというエラーです。
実際に良いコーディングになるかどうかは別としてシンタックスエラーがすぐに分かるし、後でまとめてキレイにしようと思って勢いで書きなぐって結局そのままになってしまう事もないので、最初はスタイルガイドへの慣れも必要だけど習慣化してしまえば結果的には楽になるかと思います。

おまけ：WebプッシュのTIPS

Webプッシュのアイコン

プッシュ通知に表示されるアイコンはブラウザによってサイズが異なるので2種類用意します。

• Chrome用192x192ピクセル

• Safari用256x256ピクセル

JS

バナーページではデフォルトで以下の２つのJSファイルを利用します。

• webpush-shared.js
  登録などのボタンを押した際の挙動や、PCとモバイルでテキストを分ける設定

• custom.js
  バナーが現れるタイミングのコントロールや、APIを利用したカスタマイズを記述

webpush-shared.js

プロジェクトの作成時に「different_desktop_copy」で「y」を選択すると、各バナーページで本文など特定の部分をPCとモバイルで異なる文章にすることができます。

HTMLに記述されているデフォルトの文章はモバイル用で、このJSファイルにPC用のテキストを設定します。

webpush-shared.js

Utils.text('.js-softask-txt', 'Mobifyの最新情報をプッシュ通知でお届けします。次のページで「許可」ボタンを押していただくと登録が完了します。');

基本的には同じメッセージで問題ないのですが、ブラウザの通知ダイアログがモバイルでは画面の下部に、PCでは左上のあたりに表示されるので、登録を促すページで次のように使い分けたりすることができます。

• （スマホ）下の「許可」ボタンを押して登録してください。
• （PC）左上の「許可」ボタンを押して登録してください。

custom.js

このJSでは承認バナーの出現パターンをコントロールするための変数を設定します。

カスタム用変数

// 承認バナーで「受け取らない」を選択したり、登録エラーが発生した後に再度バナーが表示されるまでのセッション数
var DEFER_SESSION_COUNT = 5;

// 何回めのセッションでバナーを表示させるかの設定
var INITIAL_SESSION_COUNTDOWN = 1;

// バナーが表示されるまでに必要なページビュー
var FIRST_ASK_PAGEVIEW = 3;

// バナーが表示される頻度。デフォルトは３ページビューごとに表示
var PAGE_COUNT_MODULO = 3;

// 承認バナーを出さないパス。正規表現でこのパスにマッチするURLの場合は表示されない。
var CHECKOUT_FLOW_RE = /\/jp/;

// 注文完了ページを判別するための正規表現。
// ECで注文内容の詳細を利用する際に設定する。
var ORDER_CONFIRMATION_RE = /\/checkout\/orderacknowledgment/;

まとめ

はじめはMobifyという開発環境のノウハウにしようと思ったのですが、特殊な環境で一般的な役にはあまり立たないので、全体の流れはそのままに他の環境でも参考になるように書き換えました(^_^;)