Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

7ページ目

Web Components用ライブラリPolymerを使ったテーマ作成

a-blog cms Training Camp 2015 AutumnでPolymerを使ったサイト制作について発表させて頂きました。
今回は、その発表内容のフォローブログとなります。
以下のような順番で今回の発表で話しきれなかったことについてお話しします。

  1. Web Componentsについて
  2. Polymerについて
  3. SiteテーマでのPolymerの導入方法

Web Componentsについて

Web Componentsを使えば、次のようなコードで下の図のようにYoutubeを簡単に表示できます。
<google-youtube video-id="kJt3v7tQ6kc"></google-youtube>


このように別の場所で定義したHTML,CSS,JavaScriptをタグを使う事で呼び出す事が出来る技術がWeb Componentsです。さらにWeb ComponentsはShadow Domという外部からアクセスできないDomツリーを形成するので、CSSのスコープの衝突問題を解決できます。


Polymerについて

PolymerとはWebComponentsのラッパーライブラリで、WebComponentsを使いやすくしてくれるライブラリです。その他にもWebComponentsの標準機能ではない、テンプレート内で変数が使える機能や、ShimというCSSプロセッサーを使う事ができます。

独自のテンプレートエンジン

<div class="acms-summary-body">
    <p class="summaryTitle"><a href="{{item.url}}">{{item.title}}</a></p>
    <p>{{item.summary}}</p>
</div>

CSSプロセッサー Shim

<style>
      :host {
        padding: 4px;
        background-color: gray;
        /* apply a mixin */
        @apply(--my-toolbar-theme);
      }
      .title {
        @apply(--my-toolbar-title-theme);
      }
</style>

また、Polymerは公式で下記のようなエレメントをすでに用意してくれています。

Web Components公開サイト


  • Iron Elements: AjaxやFormまわりなど、Webサイトを制作する時の標準的な機能を提供
  • Paper Elements: マテリアルデザインを実現するためのUIを提供
  • Google Web Components: google-youtubeなどgoogleが提供するサービスのAPIを提供
  • Gold Elements: EC系の機能を提供
  • Neon Elements: アニメーション周りの機能を提供
  • Platinum Elements: Push Notificationやbluetoothなどネイティブな機能を提供
  • Molecule: 他のライブラリの機能を提供

また、このサイトに行くとnpmで公開されているWeb Componentsを検索してダウンロードすることが出来ます。
https://customelements.io/


SiteテーマでのPolymerの導入方法

以下のリンクより、PolymerをZipファイルでダウンロードします。
https://www.polymer-project.org/1.0/docs/start/getting-the-code.html


siteテーマの/include/head/link.htmlにて、Polymerを以下のように読み込みます。

<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/polymer/polymer.html">

さらに下記のようなソースコードでShadow Domを有効にすることができます

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

カスタムエレメントのImport

先ほどご紹介したサイトからいくつかカスタムエレメントをダウンロードしたら、以下のようにそれらのコンポーネントをImportすることができます。

<link rel="import" href="/components/google-map/google-map.html">
<link rel="import" href="/components/google-youtube/google-youtube.html">
<link rel="import" href="/components/google-calendar/google-calendar.html">
<link rel="import" href="/components/github-card/github-card.html">
<link rel="import" href="/components/x-tweet/x-tweet.html">
<link rel="import" href="/components/polymer-slideshow/polymer-slideshow.html">

Layoutモジュールでコンポーネントを使用する

Layoutモジュールでコンポーネントを使用する事でさらにPolymerは効力を発揮します。
例えば、Bannerモジュールで使用したい場合は以下のようなソースコードのファイルを、/include/module/template/Banner/フォルダに設置してください。
今回のサンプルでは、polymer-slideshowというコンポーネントを使用しています。

<!-- BEGIN_MODULE Banner -->
<div>
<!--#include file="/admin/module/setting.html"-->
<polymer-slideshow height=230>
 	<!-- BEGIN banner:loop -->
	<!-- BEGIN banner#img -->
	<polymer-slide>
      <img src="%{ARCHIVES_DIR}{img}">
    </polymer-slide>
    <!-- END banner#img -->
	<!-- END banner:loop -->
</polymer-slideshow>
</div>
<!-- END_MODULE Banner -->

この時に、次のようにコンポーネント全体をdiv要素で囲み、<!--#include file="/admin/module/setting.html"-->を記述するようにしてください。こうすることによって、図のように、モジュールの設定をするための枠をつけることができます。


モジュールのカスタムフィールドの利用

また、モジュールIDのカスタムフィールドを利用するとWebコンポーネントを下のイメージのようにその場で操作しやすいです。モジュールIDのカスタムフィールドはVer.2.5.0より使用可能となりました。


/admin/module/field.htmlに設定を記述することができます。
この時に以下のように、モジュールによってテンプレートを分ける記述をしておくことをお勧めします。

<!--#include file="/admin/module/mid%{mid}.html"-->

以上が、サイトテーマでのPolymerの導入方法になります。a-blog cmsのモジュールの考え方がWeb Componentsの考え方と相性がいいですし、Web Componentsのimportもa-blog cmsのパスの解決機能によって楽に行えます。
みなさんも是非、a-blog cmsで、Web Componentsという未来の技術にチャレンジしてみてはいかがでしょうか?


aTemplate.jsの紹介

a-blog cmsのテンプレートエンジンに非常によく似たテンプレートエンジンをJavaScriptで作成してみました。名付けてaTemplate.jsです。
今回は、友人に使い方を聞かれるので、現在出来る機能をまとめてみました。すべての機能は網羅できていませんが。


このテンプレートエンジンは、a-blog cmsのカスタムフィールドメーカーを一から作り直そうという話になって作ったテンプレートエンジンです。フロント側でもa-blog cmsのようなテンプレートエンジンを使いたいという人はこのままお読み下さい。これから、このテンプレートエンジンの導入方法、またどういったことが出来るのかを説明していきたいと思います。


「aTemplate.jsの紹介」の続きを読む

「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加してきました。

名古屋のトライデント コンピュータ専門学校で開催されたアクセシビリティの勉強会「【名古屋】アクセシビリティからはじめる、WebサイトのUXデザイン」に参加してきました。
株式会社ビジネス・アーキテクツの太田良典さんの講演、そして、株式会社Gaji-Laboの山岸ひとみさんのワークショップという二本立てのイベントでした。
アクセシビリティと言えば、個人的に視覚に障害のある人たちのための対策というイメージが強かったのですが、考慮する点は他にもいろいろあるなと今回のイベントで気づかされました。
以下に今回のセミナーを聞いて考慮しないといけないなと考えさせられた点をいくつかピックアップします。

  1. 印刷時の事
  2. スクリーンリーダーの事
  3. Windowsのハイコントラストモード
  4. 位置に依存した説明を入れない
  5. 読者の注意を散漫にさせるものをおかない

1. 印刷時の事

印刷時にそのページが伝えたい内容が印刷されないことがないようにしないといけないなと感じました。例えば商品一覧をdivなどの背景画像に指定していたら印刷時には全く表示されない事があります。
なので、見せたいコンテンツはなるべくimage要素で指定しておくことが大事ですね。
ついつい便利なので背景画像をつかってしまうのですが。

2. スクリーンリーダーの事


例えば、左の図のように画像のaltタグに"堀 悟大"と書かれていて、その下にテキストでまた"堀 悟大"と書かれていたらスクリーンリーダー上では同じ名前が二回読まれることになってしまいます。
だから意図的にalt属性を空にする事も手なのだそうです。


組織図など複雑で重要な情報が画像で表現されている場合


また、上のような組織図がイメージ要素で、altに「組織図」としかかかれていなければ、スクリーンリーダー上で読み上げたとき「組織図」としか読まれないので、どのような組織図なのかが判断できません。なので、alt属性にしっかり構成図の詳細を記述することも時には必要かもしれません。普段の業務でもこれは意識したいです。

3. Windowsのハイコントラストモード

表示されているものを見やすく表示するためにWindowsではハイコントラストモードというものが用意されています。背景が黒く表示され、文字が白く表示されます。この設定にしておくと意図しない場所がハイコントラストモードで全く表示されない事があります。例えば背景画像を設定している要素等は要注意だそうです。意識的にWindowsのハイコントラストモードでどう表示されるかという事も確認するようにしたほうがいいかもしれませんね。

4. 位置に依存した説明を入れない

少しタイトルからだと何を言っているのか分かりにくいのですね。例えば、「右上のボタンをクリックしてください。」と書いてあったとします。そのサイトを閲覧している状況によっては本当にそのボタンが右上にあるとは限りません。例えばスクリーンリーダーでそのサイトを見ていた場合、上にそのボタンがあるかもしれませんし、下にそのボタンがあるかもしれません。ですのでどうしても説明を入れたい場合は、「ページ下部の『送信する』ボタンを押してください。」などボタンの情報を具体的に記載することが大事と話されていました。位置関係に依存せずにユーザに分かってもらえるサイト作りを心がけたいです。

5. 読者の注意を散漫にさせるものをおかない

例えばカルーセル等がとても速いスパンでぐるぐる回転しているようなサイトだと、そこにだけ意識が集中して記事の内容をおえなくなってしまう人もいらっしゃるそうです。
なので記事の内容をしっかり読んで欲しいページではカルーセル等は使わない方が良いかもしれませんね。

講義のスタイルについて

このイベントはただ、講師の話を聞くスタイルではなく、グループを作ってアクセシビリティについて話し合う機会がありました。その中で聞いた事を自分なりに整理して意見をだせたので、アウトップットした分、今日聞いた内容がしっかり頭に残っています。
インプットだけでなく聞いた内容をアウトップットできる講義スタイルはいいですね。

アクセシビリティの向上は手段であり目的ではない

アクセシビリティ自体が目的になっているサイトも結構あるということを仰っていました。結局誰に読んで欲しいか、そして読んでもらうためにはどういった配慮が必要かという、当たり前のことが大事になってくるんですね。
また、アクセシビリティを追求しすぎるといくら時間があっても足りないですし、運営が大変になってしまうことがあります。なのでそのサイトに応じて、考慮できる点からアクセシビリティの対策をしていきたいと思います。


少し変なSVGのフォールバック方法

imgタグ等でSVGを使用すると、ベクター画像のため拡大しても粗くならなくていいですね?ですがSVGは下記のようにIE8に対応していないので、IE8用のフォールバック対策が必要です。


今回は、そのフォールバック方法を3つほど取り上げて紹介したいと思います。

  • 1.image要素を使ったフォールバック
  • 2.CSSハックを使ったフォールバック
  • 3.Object要素を使ったフォールバック

1.imageタグを使ったフォールバック

IE8がsvgタグを認識しないことを利用したフォールバックです。

<svg width="445" height="319">
	<image xlink:href="/themes/callisto@blog2015/sample/images/header_logo.svg" src="/themes/callisto@blog2015/sample/images/header_logo.png" width="445" height="319"/>
</svg>

下が実行結果になります。

CSSハックを使ったフォールバック

下のように\9をCSSのプロパティの末尾につけることで、IE8のみにスタイルを適応させることができます。

.logo{
    background: url(/themes/callisto@blog2015/sample/images/header_logo.svg) no-repeat;
    background: url(/themes/callisto@blog2015/sample/images/header_logo.png) no-repeat\9;
    max-width: 445px;
    padding-bottom:45%;
}
<div class="logo"></div>

下が実行結果になります。

3.Object要素を使ったフォールバック

object要素のタイプをSVGに指定して、IE8に認識させないフォールバック方法もあります。

<object type="image/svg+xml" data="/themes/callisto@blog2015/sample/images/header_logo.svg">
  <img src="/themes/callisto@blog2015/sample/images/header_logo.png">
</object>

下が実行結果になります。

まとめ

個人的には、これらのフォールバック方法の中では、変な要素を利用しない分、2番のやり方がスマートだと思います。
ただ、SVGに対応していないブラウザではsvg画像をJavaScriptでpng画像に置き換える方法が一番いいとは思います。
それはまた別の機会に解説しますね。


Pace.jsでローディング時にかっこいいエフェクトをつけてみた


Pace.js

こんばんは。stelydylanです。みなさん、Pace.jsをご存知でしょうか?Pace.jsを使うと、ページの読み込み時やAjaxによるデータの読み込み時にかっこいいエフェクトをつけることが出来ます。
現在このブログに使っているエフェクトにもこのPace.jsを使っています。
下記のようにJavaScriptとCSSを読み込むだけで使えますのでとても導入が簡単です!!

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

エフェクトの変更など

公式サイトよりダウンロードできるCSSはエフェクトごとに用意されていて、エフェクトを変えたければ読み込むCSSを変えることで別のエフェクトを実現できます。
ボールがバウンドするエフェクトや、ローディングバーが表示される物などバラエティ豊かなローディングエフェクトがあります。

また、エフェクトが物足りない場合、エフェクトのスタート時や終了時にフック処理を書くことができます。終わった後にクラスを追加するだとかそういった処理を使うことで、もうひと味加えることができます。

Pace.on("done",function(){
	$(".landLoadingBg")
	.addClass("done")
	.delay(300)
	.queue(function(){
		$(this).remove();
	});
});

詳しくはドキュメントをご覧ください



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド