2014年11月21日・22日に開催されたa-blog cms Training Camp 2014 で発表した内容です。

1. ! a-blog cmsのバージョンを1系から2系へ
アップデートするときに気をつけておきたいこと
有限会社アップルップル 森田かすみ
a-blog cms Training Camp 2014 Autumn

2. アップデートしたほうがいい理由

3. 「アップデート大変そうだなー」
と感じていませんか？

4. アップデートは積極的にしていきましょう
とくにVer.2系にはいっぱい便利な機能がある

5. IFブロックユニットの
レスポンシブ対応
バージョン管理
画像のリサイズ
メディア管理
動的フォーム
カスタムユニット

6. IFブロックユニットの
レスポンシブ対応
画像のリサイズ
・・・他にもいろいろ
バージョン管理
メディア管理
動的フォーム
カスタムユニット

7. いろんな新機能をみていると、
逆にVer.1系のカスタマイズをする方がまどろっこ
しくなってきました

8. 実際に受託案件では、IFブロック使いたさにアップデートしました

9. Web制作を助けてくれる新機能がいっぱい
というわけで本日はVer.1系から2系へのアップデー
ト方法をご紹介します

10. 本日の進め方
• 実際に行ったアップデート手順
• テンプレートの修正手順
• アップデートにかかる時間は？
• アップデートの難易度

11. 実際に行ったアップデート手順

12. 実際に行ったアップデート手順
‣ ダウンロード
‣ テンプレートの修正
‣ インストール

13. ダウンロード
「Ver.1系からのアップデート版」を使用

14. ダウンロード
Ver.1系に入っていないファイルが入っている
のでアップデートが楽なようになっている
おすすめ！
!

15. ダウンロード
Ver.1系に入っていないファイルが入っている
のでアップデートが楽なようになっている
おすすめ！
!
ファイルの内容
‣ archives_rev
‣ media
‣ v1.7からのアップデートマニュアル.pdf
など

16. テンプレート修正
段階としては3つ

17. テンプレート修正
段階としては3つ
第1段階
第2段階
第3段階
表側を正常に表示する
管理画面を整える
新しい機能を追加する

18. テンプレート修正
段階としては3つ
表側を正常に表示する
管理画面を整える
新しい機能を追加する
第1段階
第2段階
第3段階
! 主に第1・第2段階まで対応できれば十分

19. テンプレート修正
段階としては3つ
表側を正常に表示する
管理画面を整える
新しい機能を追加する
第1段階
第2段階
第3段階
主に第1・第2段階まで対応できれば十分
新しい機能を追加したい（動的フォーム・承
認機能）場合に追加する
!!

20. 第1段階 表側を正常に表示する

21. 第1段階 表側を正常に表示する
‣ Entry_Bodyのインクルードをcolumn.htmlから
unit.htmlに変更
‣ Column_ListモジュールはUnit_Listへ変更
‣ column.htmlをカスタマイズしてテーマに持って
きている場合、unit.htmlに修正

22. 第1段階 表側を正常に表示する
‣ Entry_Bodyのインクルードをcolumn.htmlから
unit.htmlに変更
‣ Column_ListモジュールはUnit_Listへ変更
‣ column.htmlをカスタマイズしてテーマに持って
きている場合、unit.htmlに修正
対策： column.htmlをカスタマイズして
いる場合以外はテキストエディターの一括
変換で対応可能
!

23. Coulumn_Listの挙動
そのままでも表示側では正常に機能しているので大丈夫そうに見えますが、
モジュールの表示設定では真っ白になるので、今後のためにも修正しておき
ます

24. 第2段階 管理画面を整える

25. 第2段階 管理画面を整える
‣ テーマの中に持ってきている管理画面のテンプ
レートを要修正
‣ カスタムフィールドの編集ボタンをblog_index
からblog_editへ変更
‣ 気になるなら管理画面のカスタムフィールドの
スタイルを修正

26. 管理画面のカスタムフィールドは崩れる
読み込んでいたacms.cssの中身がガラッと変わってしまったのでレイアウト
が崩れてしまいますが、機能はしています。

27. 第2段階 管理画面を整える
カスタマイズがよくされていそうなテンプレート
‣ /admin/action.html
‣ /admin/○○/edit.html（field.htmlがないバージョン
ではカスタマイズされている可能性あり）
‣ /admin/config/function.html

28. 第2段階 管理画面を整える
カスタマイズがよくされていそうなテンプレート
‣ /admin/action.html
‣ /admin/○○/edit.html（field.htmlがないバージョン
ではカスタマイズされている可能性あり）
‣ /admin/config/function.html
対策：どこをカスタマイズしているか分から
ない場合はDiffツールで差分を探しましょう
!

29. 第3段階 新しい機能を追加する

30. 第3段階 新しい機能を追加する
‣ 動的フォーム・承認機能を利用するなら
Entry_Bodyに専用のインクルードの記述が必要
‣ column.htmlの中身をカスタマイズしている場合
はユニットのレスポンシブ対応やカスタムユニ
ットの対応をしたいなら追記が必要

31. 第3段階 新しい機能を追加する
‣ 動的フォーム・承認機能を利用するなら
Entry_Bodyに専用のインクルードの記述が必要
‣ column.htmlの中身をカスタマイズしている場合
はユニットのレスポンシブ対応やカスタムユニ
ットの対応をしたいなら追記が必要
とくに追加していないからといってレイアウ
トが崩れることはないので、追加したい機能
だけ追加するのをおすすめします
!

32. テンプレート修正 まとめ
ツールを上手く使って効率よくテンプレート
を修正しましょう
!
テンプレートを修正する際は、どこまで対応
するのかを明確にしておくと、より楽・迅速
に対応できます
!

33. インストール
上書きしてはいけないテンプレート
‣ /private/config.system.yaml
‣ /php/ACMS/User/

34. インストール
上書きしてはいけないテンプレート
‣ /private/config.system.yaml
‣ /php/ACMS/User/
カスタマイズしていないければ上書きしても
大丈夫！
!

35. アップデート手順まとめ
Ver.1系から2系へのアップデートではテン
プレートの修正が主な作業になってくる
!
一番の難所！

36. アップデート手順まとめ
Ver.1系から2系へのアップデートではテン
プレートの修正が主な作業になってくる
!
一番の難所！
テンプレート修正はツール活用して解決！
‣ テキストエディターの一括変換機能を活用する
‣ Diffツールで差分を探す

37. テンプレートの修正手順

38. テンプレートの修正手順
制作者としてはアップデート中はこの画面が見えているの
で、表側はなるべく迅速に対応したい！

39. テンプレートの修正手順
制作者としてはアップデート中はこの画面が見えているの
で、表側はなるべく迅速に対応したい！
テンプレートの事前準備をしておくと安心

40. テンプレートの事前準備

41. テンプレートの事前準備
まずは表のテンプレートを修正して、アップデー
トしてからあとの管理画面の部分を直す
表のテンプレートに関するところ
‣ Entry_Body
‣ Unit_List

42. テンプレートの事前準備
まずは表のテンプレートを修正して、アップデー
トしてからあとの管理画面の部分を直す
表のテンプレートに関するところ
‣ Entry_Body
‣ Unit_List
先に表側を直すことで、メンテナンス画面を表
示している時間が短縮できる

43. 作業方法
主な2つの方法

44. 作業方法
主な2つの方法
‣ テスト環境を用意してアップデート
‣ ローカル環境でテンプレートのみ編集

45. テスト環境を用意してアップデート
テーマ・テンプレートが多い、カスタマイズをし
ているサイトはコードだけの確認では心細い

46. テスト環境を用意してアップデート
テーマ・テンプレートが多い、カスタマイズをし
ているサイトはコードだけの確認では心細い
テスト環境でウェブサイトを表示しながらア
ップデートを試すと安心

47. まずはローカル環境でテンプレート編集
• あまり時間をかけられない
• 予算が足りない
• 他、テスト環境が用意できない

48. まずはローカル環境でテンプレート編集
• あまり時間をかけられない
• 予算が足りない
• 他、テスト環境が用意できない
以上のような場合はローカル環境でテンプレ
ートに関するところだけ直すだけでも十分

49. まずはローカル環境でテンプレート編集
• あまり時間をかけられない
• 予算が足りない
• 他、テスト環境が用意できない
以上のような場合はローカル環境でテンプレ
ートに関するところだけ直すだけでも十分
テスト環境が用意できない分、アップデート
後は要チェック！
!

50. Q.アップデートにかかる時間は？

51. Q.アップデートにかかる時間は？
A. サイト次第で変わります。

52. アップデートにかかる時間
私が担当している受託案件では1日
外部の方から頼まれたサイトでは1時間（確認を含
めて）

53. アップデートにかかる時間
私が担当している受託案件では1日
外部の方から頼まれたサイトでは1時間（確認を含
めて）
! 同じアップデートでも時間は違ってくる

54. アップデートにかかる時間
受託案件
‣ 修正テーマ数50以上
‣ 管理画面カスタマイズあり
‣ テスト環境あり
サポート案件
‣ 修正テーマ数は3つ
‣ 管理画面カスタマイズなし
‣ テスト環境なし・ローカルでテンプレート編集

55. アップデートにかかる時間
こんなサイトは時間がかかるかも
‣ テーマ・テンプレートの数がおおい
‣ 管理画面をカスタマイズをしている
‣ テスト環境を用意する

56. アップデートにかかる時間
それでも
‣ 自分が携わっていない案件でも対応できる
‣ マークアップエンジニアの作業の範囲内

57. アップデートにかかる時間
それでも
‣ 自分が携わっていない案件でも対応できる
‣ マークアップエンジニアの作業の範囲内
a-blog cmsに慣れてるならデザイナーさんに
も手伝ってもらうこともできる
!

58. アップデートの難易度

59. アップデートの難易度
イメージをしにくいと思うので、
実際にVer.1.7に同梱しているsite2013テーマをアップデートし
てみました

60. アップデートの難易度
作業内容
‣ 最新バージョンをインストール
‣ Entry_Bodyのunit.html一括変換
‣ カスタムフィールドの編集ボタン一括変換

61. アップデートの難易度
作業内容第1段階まで対応
‣ 最新バージョンをインストール
‣ Entry_Bodyのunit.html一括変換
‣ カスタムフィールドの編集ボタン一括変換

62. アップデートの難易度
作業内容
10分あれば余裕でアップデートは終了！
!
第1段階まで対応
‣ 最新バージョンをインストール
‣ Entry_Bodyのunit.html一括変換
‣ カスタムフィールドの編集ボタン一括変換

63. アップデートの難易度
一括変換で対応可能な部分だけなら簡単にアップ
デートできる

64. アップデートの難易度
一括変換で対応可能な部分だけなら簡単にアップ
デートできる
! 一括変換が難しいもの
‣ テーマの中に管理画面のテンプレートを持ってきてカス
タマイズしている場合
‣ Entry_Bodyの動的フォームなどの新機能の追加

65. 今日のまとめ

66. 今日のまとめ
ツールをうまく使えばテンプレート修正も楽
になる
さきに表側のテンプレートを修正してアップ
デートしてから管理画面を整えると時間短縮
簡単なサイトであれば10分以内でアップデ
ートは完了する

67. 以上です
ありがとうございました！