a-blog cms の本サイトを公開しました

今日のお昼頃に a-blog cms の本サイトを公開しました。少し前まで白っぽいサイトだったのですが、カラフルになりました。と、言っても正式版をリリースしたわけではありません。正式版のダウンロード開始は明日の15時くらいを予定しています。

もうすぐ出るよ！って言って、何年経ったことだろう？ 2007年の春に鳳来寺のペンションで合宿し、現状報告とかしてたハズなので、2年半くらいは経っているハズです。そんな a-blog cms も、その頃と比べたら何倍も良くなってます。早く皆さんに使ってもらいたくて仕方がないというところです。

過去、数字では出していませんでしたが、有料ライセンス(ビジネス＆パーソナル)での利用が2,000サイト以上あります。それだけ多くの方々に利用頂き、ホント感謝しております。ありがとうございます！そんな a-blog の後継のシステムが明日生まれます。

a-blog は、私が作ってきたシステムです。 a-blog cms では、口出しだけでコードは殆ど書いていません。法人化した頃に将来は自分はコードを書かない人になると言っていた事があります。それが実現したと言ってもいいのかもしれません。いつの間にか片手だった社員が両手くらいの人数になり、もう両手では数えられなくなってしまいます。その一人一人がいい仕事をしてくれて、今のアップルップルが、そして a-blog cms があります。

このメンバーになったのも不思議な気もしますが、明日のリリースを楽しみたいと思います。もう少しです。明日をお楽しみに！

a-blog cms

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

数年前のインターンの課題として「Facebook の複数枚写真をアップロードした際に、写真をレイアウトしてくれる JavaScriptライブラリを作ってみよう！」というお題を出していた時期があります。 3日間コースで、まずは静的な HTML と CSS で、2枚の時、3枚の時のような感じで複数のパターンを作って、その後 JavaScript を利用してターゲットの HTML に Class を振っていくという感じ。 JavaScript が苦手でも CSS と格闘しつつ、いろいろな場合に対応できない感じでも、できる学生さんなら1日5時間で2日目の終わりには、ある程度動く感じまで作ってくる人もいました。その後、長期インターンで何度も作り直して、公開しても大丈夫そうなところまで出来上がったものを「PhotoCollage.js」という名前で公開しています。しかし、インターンの学生さんが作ったもので、あまり公式にどうだろう？ってところもあり使われないままになっていました。 PhotoCollage.js の特徴いろいろな HTML に対応しています。表示している画像とリンク先は別で扱うようにしています。 smartPhoto.js の利用も考慮して設計されています。画像のパスは src なのか data-src なのか指定も可能です。生成されるHTMLソースの各所に Class や attribute の設定が可能です。オプション以下のようなオプションを設定できるようになっています。ダウンロード GitHub に公開されていますので、そちらからダウンロードしてご利用ください。 https://github.com/appleple/PhotoCollage a-blog cms のブログテーマで利用するには CSS と JavaScript のファイルをご自身の blog テーマディレクトリに入れてください。 /css/photocollage.css /js/photo-collage.bundle.js _entry.html に追加 @section("head-link") @parent @endsection @section("head-js") @parent document.addEventListener("DOMContentLoaded", function () { const elements = document.getElementsByClassName('js-photocollage'); Array.from(elements).forEach((element, index) => { element.classList.add('js-photoCollage-' + index) new PhotoCollage(".js-photoCollage-" + index, { srcAttribute: "data-src", gap: "5px", margin: "0px 0px 35px 10px", imgClass: "js-lazy-load", aAttribute: { "data-group": "group-" + index, "data-rel": "SmartPhoto", } }); }); }); @endsection 17行目の margin を margin: "0px 0px 35px 10px" と設定をしました。 21行目の "data-rel": "SmartPhoto" に変更することで、a-blog cms の SmartPhoto が動作します。 css/photocollage.css を修正 a-blog cms のユニットの仕様の関係で左右に 10px 狭くしないといけない関係で、width : 100% のところを -20px 減らすように /css/photocollage.css の .photocollage を修正しています。 calc ってのを使った事なかったのですが、イマドキは便利になってるもんですね。 .photocollage { position: relative; /* width: 100%; */ width:calc(100% - 20px); height:100%; } @media screen and (max-width: 1024px) { .photocollage { width: calc(100% - 20px); height:100%; } } a-blog cms の管理画面の設定編集画面設定のユニットグループにクラスは js-photocollage とし、ラベルは自由ですが photocollage としておきます。投稿画面の指定としてユニットグループ設定で、photocollage を選択します。解除するには、1カラムを選択することで以下のユニットは JavaScript のライブラリの対象外になります。最後にたくさんの写真を撮って、それをブログの記事に、まとめて貼っておきたい。全部みたい時には SmartPhoto の機能でスライドして見ることも可能です。よろしければ使ってみて感想を X の #ablogcms ハッシュタグをつけてお知らせください。 https://github.com/appleple/PhotoCollage

2024年 1月 6日

久しぶりに 2019年を振り返ってみる

この数年は大晦日にブログ書いてなかったみたいですが、久しぶりに書いてみようと思います。ブログの記事の人気ベスト10から Google アナリティクスで、アクセスの多かった記事ベスト10を調べてみました。毎年の事ですが残念ながら #ablogcmsでたくさん書いている CMS の事については上位に入る事はありませんでした。 2012/01/10 input type="file" multiple で夢の複数ファイルをアップロード 2018/05/01 16年ぶりに MT の車 HONDA S2000 に乗ることになりました 2017/03/04 Nintendo Switch のダウンロード版のソフトは amazon で買うのがオススメ 2019/03/06 Googleスプレッドシートでタイムテーブルを書くためのテンプレートを一般に公開しました 2018/06/30 MacBook 12インチになりました 2017/02/19 Mac で DELL U2713HM を WQHD 2560x1440 表示するには 2017/03/17 D.D.R 名古屋SAKAE でレーシングシミュレーターに乗ってきました 2018/07/21 MacBook 12インチで 2560x1440 ディスプレイを使う方法 2018/05/14 S2000のマフラーをノーマルに戻しました 2017/07/19 メールのリンクをクリックした時に Gmail を起動する方法アップルップル今年は法人化して15周年の年でした。 10周年で何もできなかったこともあり、今年「アップルップル15周年記念パーティー」を開催する事に。普段のベースキャンプ名古屋での飲み会ではなく、15年お世話になった人たちをお招きして開催したいということで、グローバルゲートのレストラン MEDI での開催し、70名を超える人たちにお越しいただきました。ありがとうございました。今年は、新人が増えることはありませんでしたが、出ていく人もいませんでした。成長していないということではマイナスかもしれませんが、今年が2年目だった新人たちも一人前に働けるようになり、社内の戦力としてはしっかり成長した年になったのではないでしょうか。アップルップルのスタッフは私を含め10人、今が一番戦闘力が高く、今が一番いいチームだ！って思っている。社内でも言ってるし、こうやって社外に向けてもお伝えしておく。サイトは昨年リニューアルしたが、事例やブログの追加があまりできてなかった。来年はもう少し積極的に更新してもらえるような何かを考えてみよう。過去のアップルップルのサイトは上記の Wayback Machine - Internet Archive を見ると10年以上遡ってみる事ができる。 a-blog cms 今年は 2.10.0 を2月にリリースし、2.11.0 を年末にリリースした年になりました。リリースを表にまとめてみました。4つのバージョンを32回バージョンアップを行い、のべ回数にすると61回も行ったようだ。また、これらのバージョンをメンテナンス期間について明確に公表する事にし、バグフィックスは2年間、セキュリティフィックスは5年間行う事にした。バグフィックス 2.8.x - 2020/3/26 2.9.x - 2020/10/9 2.10.x - 2021/2/28 2.11.x - 2021/12/17 セキュリティフィックス 2.8.x - 2023/3/26 2.9.x - 2023/10/9 2.10.x - 2024/2/28 2.11.x - 2024/12/17 という事になるので、1.x - 2.8.x についてはバージョンアップをそろそろ検討して欲しい。そして、2.11.0 からの新しい試みということで、サブスクリプションライセンスを始めることと、バージョンアップ費用をいただく事を年末に発表しました。 WCAN 2019年は mini を 1回開催と無料イベントである contents.nagoya 通常の WCAN を3回の合計5回のイベント開催で 766人に参加いただきました。協賛のご案内を1月6日にお送りする予定ですが、協賛とは別に「スキルアップサポート企業」というのを今年はやってみようと思っております。スキルアップサポート企業の社員はWCANの参加の際には会社負担で参加でき、会社としては教育制度として社員のスキルアップを応援していることを社内外にアピールできるというものです。ベースキャンプ名古屋 2019年は、7年目にしてオープン当初から計画していた会員さんにも鍵を提供して時間外利用ができるようにし、あまり利用されている会員さんは少ないですが玄関に靴箱が導入されました。あと写真のように図書スペースが本が半分になり、机をテレビが壁につきました。このスペースもテレビが活用できる打ち合わせスペースに改造を計画中です。最後に今年も1年いろいろな人にお世話になりました。ありがとうございます。来年も、CMS や勉強会、コワーキングスペースなど、どれも頑張りますので、よろしくお願いします。

2019年 12月 31日

年末のお約束 2015年を振り返ってみる

まずはブログの記事の人気ベスト10から Google アナリティクスで、アクセスの多かった記事ベスト10を調べてみました。昨年同様な事ですが CMS の事については上位に入る事はありません。2012年のマルチファイルアップロードの記事がありますが、今年アップルップルではブラウザ上での画像リサイズ機能というのを実装しましたが、これについて紹介する記事を書いてみてもいいかもしれませんね。 MacBook Air 11インチか MacBook 12インチ Retina どれを買いますか？ 2015/03/10 アップルが対応すべきiPadのサブディスプレイ化について TwomonUSB と Duet Display 2014/12/17 input type="file" multiple で夢の複数ファイルをアップロード 2012/01/10 家族の iPhone を IIJmio みおふぉん「ファミリーシェアプラン」に 2014/10/31 スタンディングデスクの導入を考えてみる 2013/11/14 LG製 webOS 搭載のスマートテレビ 55LB6700 を買ってみた 2014/08/10 IKEAから安価なスタンディングデスクが出るからなのか 2015/01/14 MacBook Air から MacBook Pro 15 に買い換えて1ヶ月半の感想を書いてみた 2014/07/04 福岡でオープンドライブを楽しんできた 2014/07/27 MacBook Air 13インチモデルをフルHDで表示させる方法 2014/01/05 このところ、MacBook Pro 15 Late 2013 ( i7 2.5GHz / 16GB ) から MacBook Air 11 Mid 2013 ( i5 1.3GHz / 4GB ) にメインで利用するマシンを変更しました。この事について書いてないですね。実はメモリーなんて 4GB でも 16GB でも、どちらにしても足りないので同じなのかも。って最近思うようになりました。ここら辺を近いうちに書いてみたいと思います。（書いたらココからもリンクしておきます）アップルップル残念ながら、アップルップルの Works のコンテンツがアップデートされていません。でも、アップルップルの売り上げの59%は受託制作なので、まだまだ制作もしています。 Works のコンテンツのアップデートもしないといけないが、2016年は、アップルップルのサイトを夏くらいにはリニューアルを済ませていたい。そして、久ぶりに年末に「Find-job」で求人をしてみました。残念ながら今のトコロは採用が決まっていません。最近は、期限切れになってもソコから求人の応募ができるようになっているようです。（検索しても出てきませんが、ページとしては存在しており Google で検索すると出てきます） 2016年は、マークアップエンジニアを1人採用後に、デザイナーを1人採用する事を考えています。さらに2017年4月の新卒採用もします。有限会社アップルップル - 国産CMS「a-blog cms」のマークアップエンジニアの転職・求人情報 | Find Job ! 受託制作と自社開発CMSフロントエンドを支えるエンジニアを大募集今やWebサイトのコンテンツ管理に欠かせないCMS。アップルップルでは2009年に自社開発のCMS「a-blog cms」を発表し、たくさんのWebサイト管理者・制作者の皆さんにご利用いただいています。このa-blog cmsを支える柱のひとつがマークアップエンジニア。登録されたデータをどう見せるか、どう伝えるかを日々考えながら、a-blog cmsの基本となるテーマや管理画面を作成しています。また、Webサイトの受託制作を行う会社としての側面もあり、実際に使っていただくお客様に合わせた制作も行います。アップルップルでは、よりよいWebサイト、CMSを一緒に作っていく仲間を募集しています。 a-blog cms 2015年も日本各地を回ってきました。昨年、約束してきたよう2人体制でまわるようにする事にしました。やっぱり1人より参加者のフォローができいいのですが、1人のときのような無茶なスケジュールで短期間でまわる事ができなくなり全国ツアーが長くなってしまってました。新しい試みという事で「コンテンツ東京 2015」というイベントにも出展してみました。結果としてはイマイチな感じで、大阪の「CMS夏祭り」の方が良かった感じではありました。 4/4 【岡山】a-blog cms 勉強会 in 岡山 2015 / 13人 5/22【名古屋】a-blog cms Training Camp 2015 Spring / 57人 5/22.23【名古屋】a-blog cms Training Camp 2015 Spring / 49人 6/15 【沖縄】a-blog cms DAY in OKINAWA 2015 (昼の部) / 8人 6/15 【沖縄】a-blog cms DAY in OKINAWA 2015 (夜の部) / 9人 6/20 【札幌】SaCSS vol.66 / 16人 6/30 【東京】a-blog cms DAY in TOKYO 2015/06 / 16人 7/1.2.3 【東京】コンテンツ東京 2015 7/17 【北九州】a-blog cms DAY in KITAKYUSHU 2015 / 13人 7/18 【福岡】a-blog cms × baserCMS 合同勉強会 / 13人 7/24 【神戸】a-blog cms DAY in KOBE 2015 / 11人 7/25 【広島】a-blog cms DAY in HIROSHIMA 2015 / 16人 8/23 【東京】MT東京-16 CMS夏祭り 9/5 【大阪】CMS大阪夏祭り 9/6 【大阪】 a-blog cms DAY in OSAKA 2015 / 16人 9/26 【静岡】a-blog cms DAY in SHIZUOKA 2015 / 13人 10/2 【高知】WCK Meeting vol.33 10/3 【高松】a-blog cms DAY in TAKAMATSU 2015 / 16人 10/21 【金沢】a-blog cms DAY in KANAZAWA 2015 / 6人 11/20 【名古屋】a-blog cms DAY in NAGOYA 2015/11 / 40人 10/21 【名古屋】a-blog cms Training Camp 2015 Autumn / 36人 12/19 【大阪】まにまにフェスティバル P4 名古屋では毎月 a-blog cms DAY というカタチでイベントを開催していますが、毎月やっている事から普段は人が集まらないのをなんとかしないといけないと思っています。 WCAN 今年も年に4回と mini を春までに2回の合計6回開催しました。今年は名古屋国際会議場から、名古屋商科大に会場を移しました。他の会場では体験できない大きなスクリーン 32:9 もイイ経験でしたが、飲食禁止というのがイベントとしては厳しい利用制限である事から、来年は名古屋国際会議場に戻したいと思います。 1/31 WCAN mini 2015 Vol.1 20人 3/6 WCAN mini 2015 Vol.2 23人 4/11 WCAN 2015 Spring 137人 7/11 WCAN 2015 Summer 221人 9/12 WCAN 2015 Autumn 162人 12/12 WCAN 2015 Winter 221人秋の WCAN ですが、夏・冬に比べ参加者が減っている事から少しやり方を変えてみようと思っています。大阪での「CMS夏祭り」や「まにまにフェスティバルP4」のようなブースを用意するようなカタチで一度やってみるつもりでいます。詳細は、春までには発表できるようにします！ベースキャンプ名古屋 1月に店舗を任せていた社員が辞めてしまった事から、どうなるか心配もありましたが、残ったアルバイトと、新しく入ったアルバイトのスタッフの協力により、なんとか1年運営を続けていく事ができました。増えたといえば、集中スペースの机が増えた事と Pepper が増え AirREGI とモンスターチャンネルを使いはじめました。残念ながら使われなかった液晶タブレット「Cintiq 22HD」が売られてしまいました。そして、2016年は 2年前から欲しい！って言っている「レーザーカッター」を導入してみる予定でいます。この春にベテランの学生アルバイトが3人社会人になる事から、今日の段階ではアルバイトが9人もいます。でも、6人になる前に、もう一度アルバイトを募集してみようと思っています。最後に今年1年いろいろな人にお世話になりました。ありがとうございます。来年は、きっと今年とは違う1年が待っているハズです。アップルップルのスタッフの皆に助けてもらいつつ、ベースキャンプ名古屋のスタッフにも頑張ってもらいつつ、今年よりもいい1年に出来るように頑張りますので、よろしくお願いします。

2015年 12月 31日

年末のお約束 2014年を振り返ってみる

2014年はブログの記事件数を数えてみると114件書かれていました。3日に1件くらいのペースで書いていた計算になります。大晦日っぽく書いてみます。今のオフィスに引っ越しして2年経って、やっとアップルップルの看板がついたのは今年の出来事でしたね。まずはブログの記事の人気ベスト10から Google アナリティクスで、アクセスの多かった記事ベスト10を調べてみました。1番多かったのが、私の仕事に関係する記事だったのが、ちょっと嬉しい！でも、CMS の事については、やっぱり上位に入る事はありませんね。未経験でこれからWeb制作会社に入りたいと思っている人達へ Web制作会社, ブログ, appleple MacBook Air から MacBook Pro 15 に買い換えて1ヶ月半の感想を書いてみた MacBookPro input type="file" multiple で夢の複数ファイルをアップロード html5, ablogcms スタンディングデスクの導入を考えてみる家具 MacBook Air のディスクが足りなくなってきている時の対処方法 macosx MacBook Air 13インチモデルをフルHDで表示させる方法 AppleTV, MacBookAir, Mavericks 家族の iPhone を IIJmio みおふぉん「ファミリーシェアプラン」に MVNO, IIJmio silhouette CAMEOをIllustratorで利用する CAMEO, ベースキャンプ名古屋スタンディングデスクを導入しました家具, 机 Nike+ FuelBand と UP by JAWBONE の2つを使ってみた Nike, JAWBONE アクセス数を増やすのなら、Mac の事を書くのが一番簡単なんですが、2015年はCMSの事が入るようになるといいなって思って頑張ります。 Web制作今年も年間を通して関わっていたのは、名古屋商科大＆大学院のサイトでした。また、a-blog + スクラッチで作っていた勝藤屋のサイトを a-blog cms 化するというのも大きめなプロジェクトでしたね。ほぼ、標準でいけるだろうって思ってた企画でしたが、最終的には随分多くの特製モジュールを開発しないと実現させる事ができず苦労したようです。2015年はEC向けの a-blog cms を作るつもりもあるので、その前にいい経験になったんじゃないかと思います。 2015年も少しづつ仕事が決まってきてますが、次のバージョンからできそうな新しい事を取り入れた新しい事もやってみたいですね。春以降の案件を募集してますので、お気軽に相談ください。 a-blog cms 2014年も日本各地を回ってきました。2015年も、きっと春以降くらいから全国を回りたいと思っています。また、今年各地で約束してきたように、2人体制で回れるようにするつもりでいます。 5/9.10 【名古屋】a-blog cms Training Camp 2014 Spring / 43人 5/24【大阪】初心者向けa-blog cms勉強会 in 大阪 / 13人 6/7 【仙台】dachas「CMS & 日本語Webフォント」 / 14人 6/8 【山形】a-blog cms 勉強会 in 山形 / 9人 6/13 【神戸】ゼロからはじめる a-blog cms：ふわっとbiz 01 / 25人 6/14 【広島】第68回 WEB TOUCH MEETING / 38人 6/15 【広島】a-blog cms ミニ勉強会 in 広島 MOVIN'ON / 8人 6/21 【静岡】Talk Note Vol.10 / 22人 6/22 【富士】第五回データファーム自習室 / 7人 7/5 【東京】a-blog cms 勉強会 in 東京 / 21人 7/19 【札幌】SaCSS vol.56 / 21人 7/25 【北九州】a-blog cms meeting in 北九州 / 10人 7/26 【福岡】2014年a-blog cms全国ツアー feat.マカベン / 20人 8/1 【高知】WCK Sessions Vol.7 / 13人 8/2 【高松】Webridge Meeting / 26人 2014年は a-blog cms 2.0 をリリースして新しくなってさらに便利になったシステムで戦う1年でした。1.7 を使うと古いなーって気がするのは、iPhone 6 を使い始めて、iPhone 5s に戻ると変な気がするのと同じ感覚がしますね。新しいバージョンがリリースされ、しばらくこれでいい！って思うが、新しいバージョンができると、やっぱり新しい方がいい！そんなシステムを作っていってるつもりです。次のバージョンは、もっといい！ 2015年は楽しみで仕方がない！テンプレートの作り方を変える事ができるようになります。しかし、これまで通りに作る事も可能です。ほんと楽しみですね。いろいろアナウンスしたい事も多い年末ですが、来年に取っておきます。 WCAN 今年も春夏秋冬と、どのイベントもいいモノを開催できたんじゃないかと思います。 2015年は、小さな勉強会も多くやっていきたいと思っています。皆さんのご協力をお願いします！ベースキャンプ名古屋 2014年の名古屋のコワーキングスペースは、どうだったんだろう？増えたり、減ったりも、あまり聞かない名古屋のコワーキングだったんじゃないかと思います。もう少し広く、愛知ってエリアにすると増えてるんじゃないかと思います。 2014年のベースキャンプ名古屋の変化は何だろう？ Cintiq 22HD を買ったくらいかな？アルバイトの子が増えたり、減ったりもしてる。この春に卒業する子もいるので、随時変わっていってますが、ベースキャンプ名古屋のアルバイトについては随時募集しています！助けて−！ 2015年アップルップルと一緒に仕事しましょう！アップルップルは2014年は10人で仕事しています。ベースキャンプ名古屋のアルバイトを含めると15人になるけどね。この数年、積極的に求人はしていませんが、アップルップルで働きたい人がいれば随時面接を行っています。アップルップルと一緒に仕事しよう！という事であれば、アップルップルの社員になるという事以外でも、WCAN で登壇するとか、a-blog cms を使ってサイトを作るのも一緒に仕事するって事になるかなって思ったりもします。そういえば、ベースキャンプ名古屋に来て仕事するだけでも、一緒に仕事する事になりますね。 2014年、ありがとうございました。そして、2015年よろしくお願します！

2014年 12月 31日

アップルップルの作るCMS 14年間の進化の歴史

今日は、公開アップルップル社内勉強会 Vol.5 がベースキャンプ名古屋で開催され、そこで昔話をするために書いてみました。 2004年10月21日のキャプチャをご紹介。残念ながら、ちょうど10年前の今日ではなく、10年前の明日ってところが残っていました。 a-Nikki 1.06・ a-News 2.32・ a-Column 2.31 ・ a-Update 2.01 ・ a-Site 20040505・ a-Link 1.00・ a-Blog 1.0b11 が公開されていたようです。ユーザー登録しないとダウンロードできないようにしてあったようで、User 10649 / Today +8 / Yesterday +9 というのも見えますね。では、順番に紹介していきましょう。 a-Nikki v1.06 一番最初に世の中に公開した日記のCGIになります。リリースする直前までは appleple Nikki だったと記憶しています。長いなって事で a-Nikki になったのですが、それが無かったら a-blog は appleple Blog だったり appleple CMS だったりしたかもしれません。ソースの最初に以下のように書かれています。これでリリース日が分かるというものです。 #====================================================== # a-Nikki v1.06 (2001/03/08) # a-Nikki v1.05 (2001/03/08) # a-Nikki v1.04 (2001/01/19) # a-Nikki v1.03 (2001/01/07) # a-Nikki v1.02 (2000/12/10) # a-Nikki v1.01 (2000/12/07) # a-Nikki v1.00 (2000/10/28) #------------------------------------------------------ 余談ですが 1.0 をリリースしたのが今の WCAN の元になった勉強会の当日だったりします。話のネタに、こんなの作ったんだ！って言いたかったんでしょうね。 Macお宝鑑定団のサイトの更新ができるようなものを作ってみようというのを最初の目標にしていますので、そっくりな仕様で書けるようになっています。データとしては、/data/2014/10/11.html というテキストファイルに以下の情報のみ書かれています。お久しぶりですとっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。 a-Nikki は a-nikki じゃなかったんだねぇ... そして文章の書き方が Macお宝鑑定団形式なんだよね。世の中からブログって名前のものが出てくる前の時代がとても懐かしい。 data.csv のような感じでサイト全体のコンテンツを1つのCSVファイルくらいで運用するようなものが多かったですが、書き込み時にデータが壊れたり、長く運用できるような方法として、年のディレクトリ、月のディレクトリ、日のテキストファイルのような分割をする事でサイトの運営が破綻しないような構成で作られています。 a-News v2.32 a-Nikki の文字だけだと寂しいって事で写真をアップできるようなものを作ろうって事で、a-News が出来ました。 a-Nikki が 2001/3 で終わっているので、3年くらいは a-News の開発が続いた事になります。 #====================================================== # a-News v2.32 (2004/05/05) #------------------------------------------------------ 全バージョンの更新履歴があったらよかったのに... トップページは index.html を静的出力しサーバの負荷軽減対策をしてあり、a-Nikki の時とは違い1日分のテキストファイルは単体でアクセスした時には1つのHTMLファイルになるようにHTML構造になっています。 RSSの存在を知った時にRSS対応もしたんだと思います。 a-News：2014/10/11 (土) 2014/10/11 (土) ● ああああああああああああああああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。 ● 同じ日に2つあったらどうなるんだっけ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？ ● a-news も登録できたよへぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。＜!--news_from--＞から＜!--news_to--＞を読み込んで正規表現でデータを分解し、更新用のフォームを作るような感じになっています。また、年のディレクトリ部分には index.html というファイルで年間カレンダーを生成しています。タイトル・URL・内容・写真が1つのセットになり、これを繰り返し登録できるような仕組みになっています。カテゴリーや表示のステータスもなく、日付の変更もできない仕様になっていました。 a-Column 2.31 a-News と同じ時期にリリースされていた a-Column は、今でいうところの Category_EntryList になります。 a-News になかったカテゴリーと記事を非公開にする機能が用意されていました。 #====================================================== # a-Column v2.31 (2004/05/04) #------------------------------------------------------ あと、静的コンテンツの利用という事も考慮して、そのカテゴリーにファイルを置けばリストにタイトルタグからテキストを持ってきて一覧に表示できる機能も面白い機能であったかもしれません。一度書いた内容の順番を変更する機能が用意されていない事から、追加する際に（下追加）（上追加）のボタンがあったり、今でもある URL挿入なんかができたり、写真を左右に配置する際には小さく上下の時には大きく表示するような機能もあったようです。追記した際には、日付をアップデートするのかも指定可能です。HTMLタグをコピペで貼る時のために改行を無効にするか、改行をBRタグを利用するのかも指定します。 a-Update 2.01 a-blog cms でいうところの、ブログのカスタムフィールドみたいなものかな。 #====================================================== # a-Updater v1.00 (2001/10/13) # a-Updater v2.00 (2002/11/19) # a-Updater v2.00 (2004/04/15) #------------------------------------------------------ 静的なHTMLファイルを読み込んで、テキストと画像を更新できるフォームを生成するシステムです。静的なHTMLファイルに以下のような記述をします。テキストこの部分が INPUT name="main" になります。画像 a-Link 1.00 残念ながらソースが無い。まぁ、今の Links モジュールみたいな感じですね。 a-Site 20040505 a-News + a-Column + a-Link をセットにした siteテーマみたいなもんでした。 a-blog 1.90 これまでは、Perl のCGIにテキストファイルでデータを保存するものでしたが、このシステムからは PHP + MySQL という環境で動作するものになりました。リリースノート的なものがダウンロードしたファイルの readme フォルダの中にありました。正式版リリース以降は全て1つのファイルにまとまっていたようです。 a-blog 改訂履歴記事の基本設定 a-News には無かった、公開ステータスやカテゴリーが追加になっています。当時のブログにはトラックバックというブログ間での連携をする機能というのがあってこそブログと名乗れるようなところもあった事からトラックバックのURL欄も大きく作られていました。 a-blog の頃のユニットここら辺からは今の a-blog cms のようなインターフェースになってきているのが、なんとなく分かる感じがします。a-blog の頃はテキストユニットと画像ユニットがセットになっていました。画像がたくさんある記事ではテキスト欄が空のままで画像だけ設定されるような利用でした。昔は wiki の記法でも登録できたようですね。忘れていました。画像のサイズとFloat設定「画像を左寄せ＋下の記事を横に」って意味分からないかもしれないけど、下の記事を横にする機能が後半できるようになった事で、写真が横に並べられるようになりました。この頃もサイズの指定は無く、横に配置した時のサイズと上下に配置した時でサイズが違うという a-News の仕様のままでした。 a-blog cms 2.1.1.1 そして、現行の a-blog cms も昨年まで5年間同じような管理ページでしたが、年末に 2.0 がリリースされ次の進化が行われました。これから先の進化は、今のアップルップルの皆さんの手で正常進化させていきましょう！ http://www.a-blogcms.jp という昔話をしていました。皆さんはこの話はどこら辺からご存知ですか？今回の勉強会では、アップルップル 1年目の今井、2年目の森田、3年目の日比野と、3人の女子が発表していました。皆どこに出しても恥ずかしくない発表のできる子達です。近いうちに今回の発表についてもアウトプットがあるハズです。公開されたら追記してお知らせします。月間10,000PVのブログにするために学んだSEO | ひびの備忘録

2014年 10月 20日

CMSプロトタイピングを活用したアップルップルのWeb制作のワークフローについて

この4ヶ月間、名古屋・大阪・仙台・山形・神戸・広島・静岡・東京・札幌・福岡と日本各地をまわってきました。その中で紹介してきたアップルップルのWeb制作のワークフローについて、ココにも書いてみる事にしました。一般的には、サイトの設計・デザイン・マークアップ・CMS実装・データ登録という流れでWebサイトを制作しているんじゃないかと思います。例えば、この1つの行程が1週間だったとすると、完成までに5週間という事になるし、少し規模が大きく1つの行程が1ヶ月だったとすれば、5ヶ月という事になる。この後は、小規模なサイト（1人1週）という事で話を進めていく事にする。管理画面にアクセスできるのは随分後である小規模なサイトという事で話を進めていく事にする。この場合、クライアントは管理ページにアクセスできるようになるのは4週目以降になる。しっかり打ち合わせをしたとして、以下のようなカスタムフィールドを設定した管理ページを用意したとする。実際に、情報の登録を始めると「画像がもう1つ余分に登録できないと困るんだけど！」って言われたりする事も起こってきたりする。そういう経験をした事がある人も多いのではないだろうか。マークアップまで戻るかもしれませんし、登録できる画像が増えたのであればデザインから見直しも必要になるかもしれませんね。その後、CMSの実装をする人も手を動かす必要が出てくる事になるでしょう。 HTML+CSSは得意だがPHPが苦手な人が多いこの春・夏のツアーで各地で「職種は？」「HTML+CSS 得意？」「PHPはどう？」って質問してまわってきていたものを集計してみました。7割以上の人達は HTML+CSS は出来るが、同じくらいPHP は苦手という結果になりました。最初に紹介していた一般的なWeb制作のワークフローでは、後行程のCMS実装担当者の人口が少なく、さらに納期に近いところでPHPの得意な人材が必要になってくる事になります。この状況で複数の案件をまわしているとCMS実装担当者の手が足りないという部分がボトルネックになっていませんか？ a-blog cms を利用したアップルップルのワークフローアップルップルでは、仕事を受注して最初に準備するのは a-blog cms をインストールしたサイトです。 CMSの実装を後にするのではなく最初に行います。こうする事で早いタイミングでクライアントに管理ページを見せる事ができ、実際のデータを登録していく事ができます。実データを入れていく事で本当に必要な項目や登録できる情報や量を知る事ができます。 Webサイトのプロトタイピングというと、ペーパープロトタイプとか、HTMLで書かれたものが一般的かもしれません。アップルップルでは、CMSを先行実装しクライアントとプロトタイプサイトを共有しつつ制作していく手法を CMSプロトタイピングと呼ぶ事にしました。 a-blog cms をインストールする際には、site2014・blog2014・bootstrap3 の3つのテーマから選ぶ事になります。まず a-blog cms を学んでみようと思うのであれば、site2014 を選択してください。一般的なコーポレートサイトで必要な設定がされ、サンプルのデータも登録済みです。クライアントには、このサイトを見せて「まずは、このサイトをプロトタイプとして共有していきましょう。まだデザインは用意されていませんので、最終的にはナビゲーションも横ではなく縦になるかもしれませんし、まだこれからです。まずは各リンクをクリックした際のページ遷移と表示されるコンテンツを決めていきましょう。」のような事をお話しています。 site2014でも、ある程度はサイトのカタチが見えていますので、もっと何もない方がいいようであれば、blog2014にして全てのページをブログの記事として登録していきつつ用意していく事もあります。 bootstrap を使ってサイト制作をされた事があれば、bootstrap3 のテーマを使うのもプロトタイプサイト作りにはオススメです。 a-blog cms がCMSプロトタイピングにむいている理由 a-blog cms が CMSプロトタイピングにむいている理由としては、テンプレート上にプログラムを書かずにテーマを用意する事ができ、HTML+CSSが書ける多くの人で触る事ができるからです。 {title} 記事の一覧を表示する Entry_List を例にすると分かりやすいですね。BEGIN_MODULE から END_MODULE までをモジュールと呼び、ここでは Entry_List というプログラムが動く事を宣言しています。BEGIN entry:loop から END entry:loop までを繰り返し {url} と {title} にデータが編集されます。これなら誰がテーマを触っても大丈夫だとは思いませんか？ CMSプロトタイピングを利用する4つのメリット最後にアップルップルのCMSプロトタイピングを活用したWeb制作のワークフローを利用したメリットをいくつかあげてみたいと思います。 1. CMSプロトタイプを見ながらデザインができる実際にリンクをクリックして全てのページを移動できる状態で、できるだけ本番に近いデータが入った状態でデザインできたら、きっとデザイナーはデザインがしやすい事でしょう。この一覧では、写真を使った一覧にした方がいいのかタイトルだけの文字の方がいいのかが分かったり、どれくらいの量の情報が入るかが分かった上でデザインした方が間違いがない作業をする事ができます。 2. デザインとCMS実装の並行作業ができる必ずしも、CMS実装が終わってからデザインをスタートさせる事が必須ではありません。細かい部分については、CMSの実装が終わってから、ある程度データが入ってからデザインをした方がいいかもしれませんが、サイト全体のデザイン設計を進められるところから進めておくのも、期間を短縮する事が可能になります。 3. 早いタイミングでのデータ登録ができるクライアントさんに早いタイミングで管理ページを触ってもらえる事が、公開後に長い期間日々更新していくサイトにとって重要になってきます。初期段階での管理ページの修正は、まだまだ影響範囲も少なく制作側のダメージも少なく済みます。また、クライアントさんにサイト制作が始まっている事を意識してもらう事ができ、実際に公開するべき情報についても早く揃ってくる事でしょう。 ※上の図で登録に2人いるのは、制作スキルのないアルバイトの子とクライアントさんを表しています。 4. 制作スタッフのアサインが楽になるほぼPHPの知識のあるエンジニアがいない状態でのCMS実装が可能になり、納期近くで必要な人材がCMS実装者ではなく、マークアップエンジニアになります。HTML+CSSができる人の確保についてはPHPが得意な人を用意するより容易である事を考えると制作スタッフのアサインは楽になるではないでしょうか。 ※上の図でマークアップが2人いるのは、忙しくなった時にヘルプを入れられるという事で2人描かれています。

2014年 8月 19日

kazumich.log