concrete5 Ver.5.6系向けのAMP Add-onを作ってみた。

concrete5 Ver.5.6 Accelerated Mobile Pages
Share on Facebook
LINEで送る
Pocket

最近、AMP ( Accelerated Mobile Pages ) 対応ページって増えてきましたよね。
ますますPCからモバイルへとインターネット端末になっていくなか、軽快に閲覧できるこの機能はとても良いなぁと思っています。

WordPressはいち早く対応プラグインが公開されていましたが、concrete5用のAMP対応アドオンはVer.7系や8系のはhissyが作ったのが既にあるんですが、5.6系のは無かったので、作ってみました。

結構まだまだVer.5.6系使っている人多いんですよね。

AMP ( Accelerated Mobile Pages )とは?

そもそも、AMPってなんでしょう?

AMPとは、Accelerated Mobile Pagesの略で、Googleが提唱しているHTMLの仕様です。
インターネットへの接続端末のメインがスマホなどの携帯端末に変わってきたことにより、不安定な回線速度やPCに比べ非力なCPU等でも快適にWebサイトを閲覧できる様にするものです。

具体的な仕組みとしては、通常各ホームページのサーバでホストされているWebサイトの情報を、Googleが代わりに保存(キャッシュ)しておいてそれをユーザに見せます。
ここで、Googleが保存しやすく、かつモバイル端末でも快適に見れる様に専用のHTMLの仕様がAMP HTMLです。

その他にも、Googleのサイト高速表示のノウハウが詰まったAMP JSというJavascriptのライブラリも使います。

AMP HTMLとHTML5

AMP用のHTML、 AMP HTMLと通常のHTML5とはどこが違うのでしょう?
利用できるタグに制限があったりと色々違うのですが、大きいところだと外部のリソースを参照する系のタグ(imgタグやiframeタグ)が使えなかったり、style属性が使えなかったりとかでしょうか?

詳しくはこことかここに書いてありますので興味があったら参照してください。僕はちょっと見ただけで自力での変換を諦めましたw

AMPってSEOに効くの?

今のところSEO的には直接的に表示順位に影響があるかというと微妙なところです。複合的、間接的に影響があるといったところでしょうか?
ただ、Googleはモバイル向けに高速なWebブラウジングを提供することがユーザの大きな価値になると考えており、やっておいた方がSEO的にプラスな事にかわりは無いと思います。

また、schema.orgタグを使った構造化マークアップをする事により、検索結果のカルーセルに表示されたりと、通常の検索結果よりも目立つ事になるので、そういった事からトラフィックは増えそうです。

concrete5をカスタマイズ?いいえadd-onです。

さあ、ではconcrete5のページをAMP対応してみましょう。テーマやコアファイルをカスタマイズすると、バージョンアップの時に面倒なので、イベントを使ったAdd-on(Package)として作ります。

“concrete5 Ver.5.6系向けのAMP Add-onを作ってみた。” の続きを読む

Share on Facebook
LINEで送る
Pocket

Ver.8 から使えるExpressオブジェクトとは?

Share on Facebook
LINEで送る
Pocket

この記事はconcrete5 Japan Advent Calendar 2016の4日の記事です。3日の記事はacliss19xxさんの「検索ブロックのカスタマイズ」、5日の記事はmizuno.fumitoさんの「concrete5をウェブサービスのベースとして活用する」です。
この記事と合わせて読んでみてください。

concrete5 Ver.8 が12月1日にやっとリリースされました!

新しいUI、機能が盛りだくさんのメジャーバージョンアップ、concrete5 Ver.8がやっと出ました!
たくさんの新機能の中でも僕が一番注目し、喜んでいるのが Express オブジェクト です。

Express オブジェクトをわかりやすく言うと、concrete5の中にMS AccessやKintoneの様なデータベースを作れる機能です。凄いんですコレ。

今日はそんな新機能のExpressオブジェクトの使い方をご紹介します。 “Ver.8 から使えるExpressオブジェクトとは?” の続きを読む

Share on Facebook
LINEで送る
Pocket

クロスキューブのコーポレートサイトをconcrete5でリニューアルしました。

クロスキューブのコーポレートサイト
Share on Facebook
LINEで送る
Pocket

先日クロスキューブのコーポレートサイトを暫定ではありますが、リニューアルしました。もちろんconcrete5使ってますw

今年に入って私含めクロスキューブに役員が2人加わったので、クロスキューブで提供できるサービスも増えました。なので以前のコーポレートサイトもconcrete5を使っていたんですが、コンテンツを早急に整理する必要があったため、ついでにデザインも一新してしまおうということでリニューアルに至りました。

配布、販売されてるThemeがやっぱり優秀

上記でも書いたとおりですが、出来る限り早くリリースする必要がありました。ということで、今回はconcrete5公式で販売しているテーマ『Super Mint』を購入して使いました。

concrete5テーマ

このテーマ、Bootstrapベースにカスタマイズして作られたものなんですが、色々とすごいです。

“クロスキューブのコーポレートサイトをconcrete5でリニューアルしました。” の続きを読む

Share on Facebook
LINEで送る
Pocket

Designer Contentアドオンで作ったブロックを修正する時の権限の問題

Designer Content デザイナーコンテント
Share on Facebook
LINEで送る
Pocket

concrete5にはDesigner Contentデザイナーコンテント)という素晴らしいアドオンがあります。

concrete5には標準でいくつものブロックタイプが準備されており、Google マップやyoutubeを挿入できる物など、いろんなブロックタイプが準備されています。
このアドオンは、ここにオリジナルの新しいブロックタイプを追加できるというアドオンです。
しかも無料!!!

ただ、残念ながらこのアドオンにもいくつか不便な点があります。

まず、一度作ったブロックは管理画面から修正できない事。
あとapacheのモジュールとしてPHPを動かしている場合、ファイルたディレクトリのオーナーがapacheになってしまい、FTP等で接続して直接ファイルを編集しようとしても権限の問題でできない事がある事です。

Designer Contentでできる事

まず最初に、Designer Contentで具体的にどんな事ができるかをご説明します。

簡単な入力フォーム付きの物しか作れないのですが、サイト全体のHTML構造を崩さずに簡単に入力できるブロックを新しく作る事ができるので、非常に重宝しています。

例えば、

<div class="row">
    <div class="span4"><img alt="xxx" src="xxx.jpg" /></div>
    <div class="span8">
        <h3>タイトル</h3>
        <p>テキストテキストテキストテキスト</p>
    </div>
</div>

の用なHTMLを出力するブロックを作るとします。

管理画面の[ブロック] > [デザイナーコンテント]をクリックし、ブロックタイプの設定画面を開きます。

デザイナーコンテント設定画面

ブロックハンドル、ブロック名、説明文を入力します。

次に「フィールドを選択」の「画像」を選択し、imgタグを囲うHTML等を入力します。

同じ様に「テキスト」「テキストエリア」のフィールドを設定していきます。

デザイナーコンテント フィールド設定

最後に、「ブロックを作成!」ボタンをクリックすると、/blocksにブロックタイプのファイルが生成され、各エリアに置ける様になります。

実際に置く場合の入力画面は、このブロックの場合こうなります。

スクリーンショット 2014-02-12 9.18.59いやー、便利ですね〜。最高です。

これを見つけた時は思わず日本語ファイルをみんなで作ってプルリクエスト送っちゃいました。なので日本語でも使えます。

作ったブロックのパーミッションが…

でも、作ったブロックのviewファイルとかを少し変えたくなった時、apacheモジュールとしてPHPを動かしていると、apacheユーザでブロックが作成されるため編集できない場合があります。

これを解決するためには以下の方法があります。

“Designer Contentアドオンで作ったブロックを修正する時の権限の問題” の続きを読む

Share on Facebook
LINEで送る
Pocket