kazumich.log

kazumich.log

iPadに対応しているCMSといえば a-blog cms

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

今日は、iPadネタを書くと読んでもらえる日なので1つ書いてみます。

弊社で作っている a-blog cms は、もちろん iPad に対応しています。 どのような対応かを説明しておかないといけないですね。サイト上には以下のように書かれています。

ユーザーエージェントによって、表示テンプレート等の設定を変更する機能を搭載！
今までのInternet Explorer、Firefox、Safari、iPhone、携帯電話などに加え、iPad、Android、i-mode2.0の最新デバイスにも新規対応。

もちろん、iPad なら PCと同じレイアウトでも大丈夫なのですが、iPad専用コンテンツを作ったら同じURLで自動で切り換えされるようなサイトを構築できるという事になります。

昨日リリースした1.3ですが、リリース直前まで iPad は MobileSafari のグループに入っていて iPhone レイアウトで表示されるモノになっていました。今後の事を考え MobileSafari というグルーピングをやめ、スマートフォンとタブレットというグループに変更する事にしました。（おかげでリリースが3時間ほど遅れました）

これで iPad のような Android端末等が出てきた時には、タブレットのグループに登録するとか、PalmのWebOSとかをスマートフォンに入れたりとかもできるようになります。そんな今時の事をしっかり考えられて作られているCMSといえば a-blog cms ではないでしょうか。

更新

Facebookでシェアする Xでシェアする LINEでシェアする

シェアする

Recommendation

a-blog cms 用の iOS アプリが近日アップデート＆リリース

a-blog cms for iOS が今頃ですが iOS7 対応されました。（そろそろ 7.1 も出てきそうなのですが...）そして、2つ目の新しいアプリ a-Timeline というものも用意できました。どちらも a-blog cms 2.0.1 以降に対応です。今日の段階ではどれも出てないですね。 a-blog cms for iOS 近日アップデート パッと見は iOS7 対応ですが、今回の目玉機能はカスタムフィールド対応ですね。a-blog cms の仕様上の問題もありカスタムフィールド部分はWebビューでの対応となりました。そのためオフライン環境では更新できない事になります。本当はiOSのUIで用意したかったのですが、カスタムフィールドの設定というよりは、HTMLを書いて実装する仕様なのでiOSのUIを用意するのが難しいという事で今回の感じになっております。 もう1つオマケ的なところとして、サイネージモードが用意されています。実際の運用で利用しようと思ったら、専用アプリにしないといけない気がしています。まずは、デモができるように準備しました。アプリを立ち上げてHDMIで接続するか、AirPlayで接続してみるとサイネージモードを体験できます。a-blog cms のルールで Web Signage を選択してテーマを設定するとサイネージ用のテーマを表示できます。 a-Timeline 近日リリース Twitter や Facebookページ は日々アップできるのに、自社サイトにコンテンツがアップできないという状況をなんとかするために、専用のアプリ a-Timeline を用意しました。 このアプリを利用すると、iPhoneに設定されているTwitterのアカウントと、Facebookのユーザーが管理できるFacebookページを選択し投稿が可能です。そして、a-blog cms にもエントリーとは別にタイムラインというモノを用意しました。 タイムラインモジュールというものが用意され、サイト上に投稿したタイムラインを自由にデザインする事ができます。さらに、管理ページ上から選択したタイムラインのデータを利用して、エントリーを生成する事ができるようになります。イベント時に写真や短めのメッセージをアップし、そのデータを元にレポートエントリーを簡単に用意する事ができる事になります。これがSNS時代にCMSが用意するべき機能かな？って思ってますが、どうでしょうか？ Facebookページに投稿できるアプリって実は少ないので、a-blog cms に関係無く、FacebookページとTwitterに同時投稿したいという利用する事もできます。それでもいいのでリリースされたら使ってみて下さい。

a-blog cms for iOS をリリースしました

以前は a-blog cms for iPhone というアプリをリリースしていましたが、iPad にも対応した事から、アップデートではなく新規に a-blog cms for iOS v1.0 という事になりました。アプリ本体は無料で利用できます。 前回のiPhone版では、iPhoneから更新した記事のみ更新可能でしたが、今回のモノはPCから更新したものを iPhone や iPad で更新が可能になり、さらに3G環境でないWi-Fiモデルでもしっかり使えるようにオフラインでエントリーを書く事が可能になりました。また、メイン画像の設定・画像にALTやリンクの設定・ユニットグループも設定できるようになり、ほぼブラウザからの更新と同様の事ができるようになりました。 a-blog cms に慣れている方であれば、PCでの更新と同じように写真を貼ったり、レイアウトしたりも自由自在にできる事が分かるかと思います。iPhone で更新するのは面倒だと思ってた人も iPad を使ってみて下さい。今回のモノはホントは for iPad のつもりで作っていたものでした。きっと、満足頂けると思っております。 デモサイトに簡単に接続できるようにしてありますので、この機会に a-blog cms for iOS を試しに使ってみて下さい。そして、感想やご意見を Twitter・Facebook・Google＋・AppStoreのレビュー・デモサイト・皆さんのブログ等に書いて下さい。よろしくお願い致します。 a-blog cms for iOS サポートサイト a-blog cms for iOS AppStore a-blog cms a-blog cms デモサイト

iPad (3rd generation) 買ったよー

iPhone は 3G・3GS・４・4S と毎年買い換えているが、iPad は 2 を買わないでいた。 iPad は 3G のプリペイドモデルにし、毎月の利用料金を抑えつつ外でも使えるようにした。 結局、プリペイドモデルというのは、できるだけ3G回線を使わないように使うので、結局は Pocket Wi-Fi を使うようになり、ほとんど 3G は使わない事になってしまった。そして、Pocket Wi-Fi と一緒でないと使えない事からすぐに利用できなかったりして iPad 自体の利用ができなかった。 そこで今回は、Wi-Fi + 4G という事で、iPhone と同等に使える iPad にしてみる事にした。結局使わないかどうかってところが分からないところではあるが... 使ってみての、あたりまえの感想としては、「キレイ！」ってところ。 iPad 2 を買う気にならなかったところがカメラがダメだったところも改善され、画質が向上しているのも嬉しいところかな。これで、a-blog cms を利用してサイトを更新するための端末に利用できそう。 App Store - a-blog cms for iPhone も、これで iPad 用のモノの準備を進められそうです。最低限で言えば、iPadの画面に対応してるだけでも十分な気もするが、横利用の際にはエントリーリストが出るような感じにするのかな？ ちょっと悩むところです。

iPadを抽選で1名にプレゼントします

iPad が国内予約を開始した事もあり、Twitterでフォローするととか、RTすると、抽選で iPad をプレゼントというような事をしているところもありますね。 iPad プレゼント で検索してみると、以下のようなエントリーが見つかります。フォローしたり、RTしてみるといいかも。 iPad Wi-Fi（16GB）プレゼント企画！！フォローしてリツイートするだけで応募完了！ | iStation-おすすめiPhoneアプリやニュースなどの様々な情報を日々配信 容量無制限の無料オンラインストレージ firestorage 春のiPadプレゼントキャンペーン Cybozu Benko System iPad プレゼント 【iQ mirror】+【iPad】プレゼントキャンペーン！開始！！ « スタジオルーペ開発者日記 [[ iPhone修理・パーツ・アクセサリ販売の専門店[ iPhone-factory ] iPadプレゼント！](http://www.iphone-factory.jp/pre.html) でも、アップルップルとしては、やはり a-blog cms を試してくれる人にプレゼントしたいと思いますので「a-blog cmsを試してiPadをもらおうキャンペーン」をというタイトルとなりました。 対象としては、以下のような感じ。 ■ 対象 a-blog cms1.3.0b2をインストールして頂き、ブログにインストールやカスタマイズのレポート、感想等を書いて頂ける方。（ログインしないと見る事のできないSNS内の日記は対象外とします） エントリーに書いて頂く内容として、 インストールして利用してみた感想 実際にインストールした先へのリンク、もしくはキャプチャ画像 a-blog cmsを試してiPadをもらおうキャンペーンへのリンク の3つを書いて下さい。 賞品としては、 Apple iPad 16GB Wi-Fiモデル（抽選 1名） iTunes Card 3000円（抽選 3名） ブログに書いてある内容によっては特別賞も！ という事にしていますので、力作のエントリーや、有益なエントリーをたくさん書いてくれたとか、数人に特別賞も考えようという事を考えています。 エントリー者が100人も1000人もになる事はないと思いますので、インストールさえ出来れば、結構 iPad がもらえる確立は、他のプレゼントより高いかと思います。（もちろん労力が違いますが...）a-blog cms について機会があればチャレンジしようと思っていた方は、ぜひ一度 a-blog cms をお試し頂き、感想をブログに書いてみて下さい。 詳しくは、a-blog cmsを試してiPadをもらおうキャンペーン のページをご覧下さい。 カスタマイズにチャレンジしてみようという方は、ココの ablogcms くらいをご覧になって頂くと、いろいろな情報が見つかります。 また、5/15(土) に ひと足早くiPadのWebを考える勉強会 というのをやろう！という事になりました。興味のある方はどうぞ！

a-blog cms と htmx で作る SPA(Single Page Application) なブログテーマの実装方法

今回、この a-blog cms で作られているブログを htmx を利用して SPA(Single Page Application) にする実験をしてみましたので、その点について紹介をしてみます。 Single Page Application（SPA）とは ウェブ開発の世界では、Single Page Application（SPA）がますます人気になっています。SPA は、従来の複数ページからなるウェブサイトと異なり、単一の HTML ページで動作し、ユーザーの操作に応じて部分的に、必要なデータだけをサーバーから取得するためデータの授受が最小限になり、ページの表示速度向上が向上します。 一般的には、React や Vue.js などのフレームワークを利用して構築することが多く、エンジニアのコストが増えることもあります。 htmx をフロントエンドに、 バックエンドには a-blog cms を採用すると a-blog cms では、PHP のコードを書くことなく、テンプレートには HTML のみを記述し、管理画面で表示件数やソート順、表示する情報の条件を設定する必要がなく、バックエンドのコードは記述する事がありません。また、そのテンプレートの HTML に属性を追加するだけで、htmx が動作し、手軽に SPA を実現することが可能です。 最初のアクセスは a-blog cms が担当 トップページはもちろんですが、Google検索や SNS のリンクなどで途中のページにアクセスがあった際にも、最初のアクセスは a-blog cms がページ全体の HTML を生成します。 分かりやすくするために、サブカラムの一番上に a-blog cms のロゴを表示するようにしています。 2ページ目以降は htmx が担当し Ajax で更新しています 1ページ目を表示し、どこかのリンクをクリックすると Ajax で部分的にページを更新するような実装になっています。この時には a-blog cms のロゴだったところが、htmx に変わっている事で確認できます。 History API の活用（ hx-push-url ） 一般的には htmx の属性で hx-push-url="true" と追加することで、htmx でページを書き換えた際にブラウザの URL も変更されます。また、URL 以外にタイトルタグの更新も簡単にできるため、ページ全体をリロードしない部分的な更新であっても、ブラウザの履歴にはクリックするたびにタイトルと URL が記録されます。そのため、ブラウザの戻るボタンで前のページに戻ることが可能になります。 今回の実装では、この書き換えられた URL でブラウザのリロードをした場合に a-blog cms が同様のページを生成できるように、hx-push-url="{url}" のように URL を指定し History API に書き込む情報を調整しています。 htmx 化する際の実装方法 リンクの修正 通常 <a herf="{url}"> と書かれているようなリンクを以下のように修正します。 今回は、ほとんどのリンクが entry-body.html のテンプレートを利用して部分的にページを更新する事になりました。内容としては、以下のようになります。 元のリンク先 a-blog cms をバックエンドに利用する際には必要な記述 htmx でアクセスする URL を指定 History API に記録したい URL を設定 置き換えたい場所の <div id="main-contents"> <div>を残す設定 置き換えたい場所を指定 ページの上部にスクロールする a-blog cms 側の設定 「htmx でアクセスする URL を指定」で、例えば https://kazumich.com/htmx-spa-blog202405.html/tpl/include/htmx/entry-body.html と指定しているとすると https://kazumich.com/htmx-spa-blog202405.html で表示される内容を、/tpl/include/htmx/entry-body.html のテンプレートに切り替えて表示させるという指示になります。 次に、そのテンプレートについて解説します。 呼び出されるテンプレート entry-body.html 呼び出されるテンプレートについては、もともと Entry_Body のモジュールだけ書かれているテンプレートファイルですが、ここに Topicpath モジュールと、タイトルタグを生成するための Ogp モジュールを追記して1つのファイルにまとめています。 （略） （略） htmx:{title} entry-body.html のテンプレートファイルの中で hx-swap-oob="true" が付いている <div id="topicpath"> 〜 </div> は、id="topicpath" の部分が置き換わります。hx-swap-oob="true" については複数のエリアを一緒に更新ができる便利な属性になります。また、<title>〜</title> については htmx の属性をつける事なくタイトルタグを置き換えることができます。 残った HTML が、<div id="main-contents"> 〜 </div> に置き換えられる事になり、複数のエリアの置き換えが完了する事になります。 このように a-blog cms を利用するとバックエンドの処理を PHP で書くことなく、htmx を呼び出すついでに、呼び出される HTML ファイルを書き、呼び出される側の HTML にも hx-swap-oob="true" などの属性を付加するなどして相互に関連するテンプレートを HTML だけで書いていくことが可能なのです。 検索機能の実装 これまでは <a hx-get="{url}" ... > タグでリンクを作成し、htmx を動かしコンテンツを呼び出すことについて説明を書いてきましたが、次は記事の検索機能を hx-post を利用して作っていくことを解説していきます。 標準的な検索フォーム htmx 化するには hx-get で方法が身についていれば、hx-post でも同様に書くことができます。今回のフォームでの htmx を動作させる場合のトリガーには hx-trigger="submit" を利用します。 加えて name="tpl" を hidden で追加します。 これで hx-post の設定は完了です。 オマケ： input 要素に hx-trigger="keyup" で htmx を動かす キーワード検索の <input> を以下のように修正します。 <form> 自体を POST する必要があると最初は考えましたが、この <input> タグ単体でサーバーに情報を送ることができたらと考え hx-get で呼び出したい URL を指定し、hx-trigger="keyup" で GET リクエストを送ってみたところ思った動きになりました。その後、delay:1s を追加し、1秒後に動作するようにしています。 あと、hx-push-url="true" とする事で URL も https://kazumich.com/?keyword=htmx のようになります。ここでは entry-summary.html を指定しており、サブカラムの最新記事を更新しています。 hx-post で hx-push-url="true" をする際のオマジナイ History API を利用して URL を書き換える際に、hx-get であれば URL を hx-push-url="{url}" のように、この URL にしたいと事前に設定ができますが、hx-post の場合には POST 後に URL が確定し、書き換えられた URL となってしまいます。 この URL から include/htmx/＊＊.html を削除する JavaScript になります。 addEventListener('htmx:beforeHistoryUpdate', function (event) { const proposedUrl = event.detail.history.path; const customUrl = proposedUrl.replace(/\/tpl\/include\/htmx\/.*\.html/, ''); event.detail.history.path = customUrl; }); htmx 動作後に a-blog cms の acms.js を再度起動する a-blog cms が標準提供している JavaScript で acms.js というものがあります。ページを読み込んだ後で、この acms.js が動かないと困るようなこともありますので、HTML の読み込み後に再起動します。 addEventListener('htmx:afterSwap', function (event) { ACMS.Dispatch(event.target); }); ※ 現在、シンタックスハイライトが上記の JavaScript を書いても動作していない問題を抱えています。その点は改善された際にアップデートします。 a-blog cms で作られたブログを SPA にする ヘッドレスCMS を活用して JSON を相手に、SPA ブログを作ろうと思うと少しづつ SPA 化していくというよりは、最初からそのように実装していく事になります。その点、今回の私のブログを SPA 化する際には、部分的にこの部分を htmx を動くようにしよう！ を繰り返し、最終的には全てのページの遷移を htmx で動くように進めていきました。 ビルド環境も必要ないですし、htmx の利点である JavaScript を書かない = 難しいプログラミングをしない の延長で、バックエンド側である PHP も書かず、htmx属性を追加するついでに、呼び出す HTMLテンプレートを書き、またその中に htmx属性も含める。これで a-blog cms の実装ができる人であれば誰でも簡単に SPA 化していくことが可能になるのではないでしょうか。 もちろん、a-blog cms の学習コストが高いという方もいるかと思いますが、よかったら htmx@blogテーマがどんな実装になっているのか ablogcms.io の環境で試してみてください。

JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ

htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうなので、いろいろ実験を始めたところです。 https://htmx.org/ 他にも、調べてみると 【GitHub Accelerator】GitHubが選んだ、将来有望なプロジェクト20選 というのも見つかり、その中にも htmx が選ばれているようです。 2023-04-12 : GitHub Accelerator: our first cohort and what’s next 世界的に見れば、結構話題になっているという事になります。 そんな中で、日本国内ではどんな感じかを調べてみるときのリンクを以下に。 Qiita : htmx 20件 Zenn : htmx 9件 X : #htmx lang:ja 日々少しある YouTube : htmx 日本語では数件 Google : htmx + 日本語を検索 海外と比べると、ほとんど無いと言ってもいいくらいな状況であることがわかります。 Qiita や Zenn の記事を読みつつ、何で日本では流行ってないんだろ？って考えてみると、今の日本国内ではフロントエンドのフレームワーク的なものを使おうと思う人たちは、やっぱり React や Vue のような JavaScript をしっかり書くような人が多いのではないだろうか。 そんな中で htmx は、JavaScript で実装するものではなく、HTML のテンプレートを書きつつ、必要なところだけサーバーサイドから欲しい HTML を返してくれる必要があるので、普段使ってる JSON を返してくれる ヘッドレスCMS では欲しいデータを返してくれないということになる。 そうなると、そこに学習コストをかけようということになってないのかもしれない。私の勝手な考えではありますが... 私自身が、JavaScript をバリバリ書く人ではないので、書かないでもいい！って言われると、私と似た属性の人たちに紹介したくなるので、少し初歩的なところも書いておきます。 htmx とは htmx は、ウェブページにインタラクティブな機能を簡単に追加するために設計された、HTMLを拡張するJavaScriptライブラリです。このライブラリを使用すると、サーバーと非同期に通信し、ページの一部を更新することができます。これにより、ページ全体を再読み込みすることなく、ユーザーインターフェイスを動的に更新することが可能になります。 htmx は、HTMLの属性を使用して動作します。これにより、JavaScriptをほとんどまたは全く書かずに、多くの一般的なウェブ開発タスクを実行できます。例えば、ある要素をクリックしたときに特定のURLからコンテンツを取得してその要素内に表示する、といった動作を簡単に設定できます。 htmx は、モダンなウェブ開発のアプローチの一つとして注目され、Ajax、WebSocket、サーバー送信イベント（SSE）などの技術をより簡単に活用できるようにすることを目指しています。 htmx の主な特徴 以下のような主な特徴を持っています。 簡単なインストールと設定 単一のJavaScriptファイルを HTML に追加するだけで利用開始できます。 HTMLを拡張する 特別な hx-* 属性をHTMLタグに追加することで、非同期通信 ( ajax ) や DOM の更新を行うことができます。 簡潔さとアクセシビリティ インタラクティブな Webアプリケーションを作成するために、JavaScript のコードをほとんどまたは全く書く必要がありません。 Click Me! 上記は、公式サイトにあるサンプルコードでは、（Click Me!）ボタンをクリックすると、https://example.com/clicked に POST して、取得した HTML を id="parent-div" と置き換える処理が実行されます。 開発者は複雑なJavaScriptやフレームワークに頼ることなく、HTMLの拡張を通じてインタラクティブなウェブアプリケーションを構築できます。これにより、コードベースが簡潔に保たれ、メンテナンスや理解が容易になります。 低い学習曲線 HTML属性を利用することで機能を実現します。そのため、HTMLの基本的な知識があれば、追加のプログラミング言語やフレームワークを学ぶことなく、すぐに使用を開始できます。 サーバー中心のインタラクション設計 サーバーサイドのロジックを活用して、クライアントサイドのインタラクティビティを向上させます。これにより、サーバーとクライアント間の連携が強化され、開発プロセスが合理化されます。 この htmx の通信をするサーバー側の処理を簡単にできたら、さらに便利に htmx が使えそうではないですか。 スムーズな統合性 既存のウェブアプリケーションに簡単に統合でき、大規模な書き換えを必要としません。これにより、従来のウェブサイトを段階的にアップグレードすることが可能になります。 パフォーマンスと効率 必要な部分のみを更新することで、全体のページリロードを避けます。これは、帯域幅の使用を削減し、アプリケーションのパフォーマンスを向上させます。 幅広い互換性 現在、リリースされている htmx 1.x では IE11 もサポートしているようです。もちろん現代のブラウザであれば問題なく動作します。 2.0.0-alpha1 リリース され、IE のサポートを終了したそうです。（もう IE は対応しないでいいですよね） htmx と a-blog cms の相性が良さそうな理由 htmx のことを調べて、ここに辿り着いた人は a-blog cms なんて知らないかもしれないので、少しだけ説明をしておきます。 a-blog cms とは PHP + MySQL で動作する国産の ローコードCMS で、基本的には HTMLファイルとしてテンプレートを作り、PHP や JavaScript など難しい事は書くことなくウェブサイトを作ることができる CMS（コンテンツ・マネージメント・システム）です。 https://www.a-blogcms.jp/ a-blog cms には htmx に似た Ajax 機能が標準搭載 a-blog cms には post include 機能 という名称で10年前から htmx のような ajax 機能を用意しています。よく利用される記述をサンプルコードを紹介します。 class="js-post_include-ready" がある form では、ページが表示された後に include/sample.html を読み込みます。また、sample.html には以下のようなコードが書かれているとします。 {title} これで、何件かのリストが表示されることになります。 このように、a-blog cms では標準的な機能として、Ajax でリクエストがあった情報を部分的に HTML で返すことができる機能を持っています。 これ htmx でやってることと同じです。もちろん、これまで通り純正の post include で作るということでもできますが、htmx の方が機能が豊富なので、置き換えることも可能ではないだろうかと考えています。 実際の post include の動作デモ 以下の青いボタンをクリックすると、このブログの新着記事を5件 Ajax で読み込み、その読み込まれたコードにも続きを読むボタンがありますので、繰り返し読み込むことができるようになっています。 a-blog cms の post include は、標準的に消して、出てくるアニメーションがついているので、下の htmx のデモと違うもので動いているのが分かりやすいと思います。 ボタンのコード class="js-post_include" がある <form> タグは画面を遷移せずに、Ajax でコンテンツを読み込みます。 読み込まれる sample.html のコード 上半分が記事の一覧を読み込む部分で、下半分が続きを読むためのボタンのためのコードになります。 {title} post include を htmx に置き換えてみる やる事は簡単で <form> タグ部分の属性を書き換えます。見やすく属性毎に改行していますが、もちろん 1行でも大丈夫です。 ボタンのコード こちらは https://kazumich.com/include/sample-htmx.html を GET で読み込むように設定してみました。 読み込まれる sample.html-htmx のコード こちらは、何ページ目という情報を POST で渡すカタチで書いています。 {title} head タグに追加する htmx のライブラリを読み込むコード a-blog cms のテンプレートの中で、htmx を呼ぶためには、hx-ext="ajax-header" を追加する必要があります。そして、これを利用するためには、<head> タグ内に以下のように htmx のライブラリとあわせて ajax-header.js も読み込みます。 最後に htmx で渡される HTML 自体をテンプレートとして表示部分を記述し、POSTするだけで a-blog cms は結果を HTML として返してくれます。上記のサンプルコードをご覧になれば、htmx が簡単に Ajax 部分を処理してくれているのと同様に、a-blog cms が必要な HTML を整形してくれることがわかります。 必要な部分だけ JSON で返してくれる ヘッドレスCMS と違い、必要な部分だけ HTML を返してくれる機能を a-blog cms は持っているのです。このように、a-blog cms と htmx の相性はとってもいいのではないかと考えています。 ローカル環境での利用や、個人が非商用で利用する際には無料で、費用はかかりません。htmx の学習の環境として a-blog cms 使ってみませんか？

Contact

お問い合わせはこちら