表示部分がないヘッドレスCMS「microCMS」でサイトを作ってみたmicroCMSJavaScirptおみやげ調べてみた2019-09-30追記デモサイトの公開を終了しました。microCMSで「画像のリサイズ」が可能になりました。boolean(チェックボック)フィールドが追加されました。ASP型のヘッドレスCMS「microCMS」のベータテストが始まっています。通常は月額8,500円が必要ですが、試用期間は無償で使い放題ということで、事前予約をしていました。https://microcms.io/「ヘッドレスCMS」については後述しますが、これまでのCMSと概念が異なるため、使いどころが難しいです。実際にサイトを構築してみるしかないだろうと、コンセプトから考えてきっちり作ったので、体験レポートをします。サンプルサイト「動画投稿サイトから人気が出たブレイク直前の男性アーティスト」という、どこかで聞いたような人物のオフィシャルサイトです。試用期間が終了する、2019年9月30日まで限定公開します。(公開は終了しました)Tsuyoshi.さん、かっこいい写真をありがとうございます。:D基本的に静的サイトですが、以下の3箇所で、JavaScriptでmicroCMSに投稿したデータを表示しています。NewHome>Discography最新DiscographyヘッドレスCMSとは話を戻して、ヘッドレスCMSについてざっと説明します。これまでの主要なCMSは、管理画面=投稿部分と、テンプレートエンジン=表示部分で構成されていますが、ヘッドレスCMSは表示部分を持っていません。そのかわりAPIが提供されていて、各ユーザーがAPIから取得したデータを加工して利用します。利点は、ユーザー側が好きなスクリプト言語を使用でき、かつウェブサイトに限らず、スマートフォンアプリ・デジタルサイネージと、様々なプラットフォームに使えるというところです。一方で欠点は、ノンプログラマには利用できないところです。アーカイブを考えなければならないブログやコーポレートサイトでの利用では、便利さを感じにくいでしょう。管理画面の印象APIのセット=サイトやプロジェクト名を新規作成すると「スキーマ」を作るように言われます。「フィールド」のことらしいです。入力例がないので何のことなのかしばらく悩みました。上の画像はDiscographyのスキーマの一部です。フィールドタイプは、現状、5種類しかありません。「ラジオボタン」「セレクトボックス」「チェックボックス」がないのは、かなりきついです。正式版までに実装されると願いたいものです。NewsやDiscographyのカテゴリーラベルは文字列の直打ちにしました。booleanフィールドが追加され、チェックボックスでの選択が可能になりました。日時は、タイムスタンプ=公開日時のことはありません。タイムスタンプはデフォルトで提供されます。公開日時を変更可能にしたい場合は、フィールドを作る必要があると思います。スキーマを作ったらすぐ入力を始められます。画像フィールドに編集アイコンがありますが、画像のサイズを変えることはできません。現時点ではアップロード時のリサイズ生成ルールもありません。ここでは公開サイズに編集してからアップロードしています。APIリクエスト時にクエリを送ることで、画像をリサイズできるようになりました。開発の方からTwitterで教えていただいたのですが、画像サイズについては早めに対応を考えているとのことです。開発ロードマップは、管理画面で見ることができます。入力はすぐできたので、静的サイトを作って、いよいよAPIの取得・表示部分に取り掛かりました。サンプルサイトのスキーマは複雑なので、「タイトル・日付・画像・テキスト」を持ったスキーマ「post」を表示するサンプルをGistで公開しておきます。表示するかの選択くらいしかないことでした。以下のようなことは自分でスクリプトを書いて実装しなければならないということです。私はJavaScriptを専門にできるほどのスキルはまだありません。Gistの内容を実装するまででも2時間くらいかかりました。テンプレートエンジンを知っていればもっとスムーズだったかもしれませんが。microCMSのトップページの導入ケースに「デザイナー」がいるので誤解しがちですが、少なくともデザイナー向けのCMSではないです(そう書いてもいません)。私はコーポレートサイトの制作が多いので推測レベルですが、以下のようなコンテンツに向いていそうです。静的サイトのごく一部にしか使用しないデータを表示したい対象が、サイト、アプリ、デジタルサイネージなど多数あるデータ構造がシンプルページネーション、検索、アーカイブなどの必要性が薄いパッと浮かんだのが、スマホゲームアプリの開発会社です。公式とアプリの両方にお知らせを出しつつ、多数のゲーム用のアカウントを作る感じです。APIは30本まで作れるので、単純に30タイトルまでいけるということになります。ゲームアプリを作るくらいの人たちであれば、ゲーム内にお知らせを組み込んだ方が楽なのかもしれないですが。今回、アーティストのサイトを作ったのは、アーティストのサイトは、最初はSNS中心で小さく始めて、売れるに従って規模が大きくなっていくケースが見られるからです。使用したいサイトが1個だけであれば、こちらの方がコスパが良かったりします。https://movabletype.net/support/setting/data-api.htmlただし、MovableType.netはあくまで、ウェブコンテンツの管理が主であり、API利用に特化するなら必要ない機能も多いです。microCMSのようにサクッと立ち上げることは難しいでしょう。そのあたりで差別化ができそうです。私の業務内容からすると、microCMSはまだまだ縁が薄そうなのが残念です。スキーマや表示部分を自分を組み立てていくのはとても楽しかったです。APIや管理画面の機能が改良されていけば、これまでになかったCMSとなるだろうと期待しています。cmsの企業向け公式テーマ「site2015」を軽量化し、個人サイトや学習目的に利用しやすくした「site2015mini」を、GitHubに公開しました。https://github.com/webbingstudio/ablogcms-site2015mini表示確認用エントリーを含む、インポートデータ一式も同梱しています。cms本体のライセンスに基づき、学習用、プロトタイプ用にご自由にご利用ください。cmsの「投稿画面用CSS」の改良版を配布しますablogcmsCSSおみやげデザインWebbingStudioの管理画面WebbingStudio@メインサイト改修中です。cmsの最大の魅力は、投稿画面を公開ページに併せて変更できることです。その投稿画面のカスタマイズをやりやすくした、改良版CSSを配布します。「これまでデフォルトのまま使っていた」「投稿画面が既存サイトのCSSと相性が悪かった...」という方はぜひぜひ。※バージョン1.4時点のacms.cssをベースにしています。今後のバージョンアップで、追加スタイルが必要になるかもしれません。6での表示確認はしていません。cmsでFacebookページの「いいね!」表示を分ける方法ablogcmsFacebookphpおみやげ私のFacebookページでも使っていますiFrame版のFacebookページは、読み込み元で自由にプログラムを仕込めるので、「いいね!」されているかどうかでコンテンツの表示を分けることができます。PHPでのやり方については、藤本さんが記事を書かれています。cmsはテーマ内に直接PHPを書くことができません。cmsの山本さんにアドバイスをいただいて、いいね!されていないときだけ囲まれている内容を出力する「Touch_NotFbLike」モジュールを作成したので公開します。第20回北海道開発オフ:ゲームの共同開発をしてみるゲーム北海道HTML5おみやげ北海道開発オフが丸三年、20回目を迎えました。DevDo::北海道開発オフメンバーの皆さんおめでとうございます。これまで参加した皆さんありがとうございます。20回記念ということで、今回は少し趣向を変えて、同じアプリケーションを違うプログラミング言語で作成する「共同開発」を行いました。Engineチームでそれぞれ作るとなりました。参加者のわたなべさんから「じゃあ、うぇびんさんは仕様に添ってゲーム画面作ってください。HTML5とCANVASで。」という素晴らしい無茶振りをいただきました。/li>HTML5+CSS3で作り直したゲーム画面ドラクエやWIZ風のUIにしてみましたが、CSS3のプロパティを駆使すればファイナルファンタジー風に変更することも可能です。HTML5なので閲覧にはChromeかSafariを推薦します。HTML5、CANVAS、プログラミングの勉強の素材にしてみたい方は自由にソースコードをご利用ください。私もこれを使って、PHPでゲームを作ったらいい勉強になるかなと考えています。パラメーターなどの要素をTwitterのAPIと連携させても面白いかもしれませんね。Railsチームのプロジェクト名です。成果発表(開発側)Python+GAEチームは、基本動作まで形になりました。Railsチームは、コマンドラインでのキャラ生成まで。詳しくはsmokeymonkeyさんの記事をご覧ください。第20回北海道開発オフに参加した次回からは、また普通のユルユル独習会になります。開発オフという勉強の場があったおかげか、独習かCMSのカスタマイズでしかプログラミングを扱う機会がない私が、お仕事でPHP+MySQLの簡単なアプリケーションを作れるまでになりました。これからも初心者が勉強会に参加できる気軽な窓口として、各種言語の技術者が交流できるハブとして、活動のお手伝いができればいいなと思います。結婚のご報告とお知らせ。