1. 10分で作るオリジナルサイト
Powered by adiary

2. 1. インストール

3. 1. インストール
● インストールはたったの 4 行
※ コンソールが使えない場合はファイルをコピー
$ git clone https://github.com/nabe-abk/adiary
$ cd adiary
$ chmod 777 __cache/ pub/ data/
$ cp adiary.conf.cgi.sample adiary.conf.cgi

4. 2. 初期設定

5. 2. 初期設定

6. 2. 初期設定
最初から入力済

7. 2. 初期設定
自分を管理者として追加

8. 2. 初期設定
設定したパスワードを入力

9. 2. 初期設定

10. 2. 初期設定

11. 2. 初期設定

12. 2. 初期設定
サイト名を設定
サイトの説明

13. 2. 初期設定

14. 2. 初期設定

15. 2. 初期設定
サイトが使える状態になりました

16. 3. 試しに記事を書いてみる

17. 3. 試しに記事を書く

18. 3. 試しに記事を書く
記事のタイトル
記事の本文

19. 3. 試しに記事を書く
記事のタイトル
記事の本文
記事入力にも色々な機能があり、
例えば Markdown 入力もできます

20. 3. 試しに記事を書く

21. 3. 試しに記事を書く
記事が公開されました

22. 4. デザインの変更（前編）

23. 4. デザインの変更（前編）
● よくあるサイトデザイン方法
– HTML や CSS を書き換え
– テンプレートという特殊なファイルを書き換え

24. 4. デザインの変更（前編）
● よくあるサイトデザイン方法
– HTML や CSS を書き換え
– テンプレートという特殊なファイルを書き換え
adiary なら面倒な作業は不要！
専門知識も不要！

25. 4.1 ベースデザイン選択

26. 4.1 ベースデザイン選択

27. 4.1 ベースデザイン選択

28. 4.1 ベースデザイン選択

29. 4.1 ベースデザイン選択
テーマと呼ばれる基本デザインが
13 種類附属
※2016 年 1 月現在

30. 4.1 ベースデザイン選択
テーマ bigblue

31. 4.1 ベースデザイン選択
テーマ hatena2

32. 4.1 ベースデザイン選択
テーマ nature-forest

33. 4.1 ベースデザイン選択
テーマ yuu

34. 4.1 ベースデザイン選択
テーマ wp

35. 4.1 ベースデザイン選択
テーマ wp
Wordpress 風のシンプルなデザイン
（カスタマイズ前提のテーマです）

36. 4.1 ベースデザイン選択
テーマ konomi

37. 4.1 ベースデザイン選択
テーマ konomi
このようなポップなテーマも
何種類か入ってます

38. 4.1 ベースデザイン選択
テーマ mikky

39. 4.1 ベースデザイン選択
このテーマをいったん保存します。

40. 4.1 ベースデザイン選択

41. 4.1 ベースデザイン選択
テーマが切り替わりました

42. 4.2 配色の変更
再びデザイン編集を開き、
今度は H バーを操作します。

43. 4.2 配色の変更

44. 4.2 配色の変更

45. 4.2 配色の変更

46. 4.2 配色の変更
配色をマウスで簡単に変更できます
※ 個別に色を設定することもできます

47. 4.2 配色の変更
以上でテーマ選択が
終わりました

48. 4.2 配色の変更
テーマや配色は、
スマホ画面にも
反映されます
※ 一部非対応のテーマがあります。

49. 4.3 テーマ機能まとめ
● 13 種類からテーマを選択できた。 (2016/1 時点 )
● 配色をマウスで簡単に変更。
– 非対応のテーマもあります。

50. 4.3 テーマ機能まとめ
● 13 種類からテーマを選択できた。 (2016/1 時点 )
● 配色をマウスで簡単に変更。
– 非対応のテーマもあります。
CSS の知識があれば
テーマを作ることもできます。
詳細資料 http://adiary.org/devman/theme/

51. 5. デザインの変更（後編）

52. 5.1 デザイン編集

53. 5.1 デザイン編集

54. 5.1 デザイン編集
見慣れないボタンが……？

55. 5.1 デザイン編集
表示をクリックすると
色が変わるブロックが……

56. 5.1 デザイン編集
サイト要素はモジュールの
組み合わせで成り立っている
タグ一覧
サイト情報
記事一覧
コメント
一覧
検索
記事ヘッダ
記事フッタ
ページ送り

57. 5.1 デザイン編集
マウスで位置を変更

58. 5.1 デザイン編集
位置が入れ替わりました

59. 5.1 デザイン編集
☓ ボタンをクリック

60. 5.1 デザイン編集
system info が
消えました

61. 5.1 デザイン編集
モジュールを
追加してみましょう。

62. 5.1 デザイン編集
カレンダーが
追加されました

63. 5.1 デザイン編集
フリー入力を追加

64. 5.1 デザイン編集
設定ボタン

65. 5.1 デザイン編集
タイトル
本文
HTML も入力できます

66. 5.1 デザイン編集
すぐに反映されました
※ すぐ反映されない物もあります

67. 5.1 デザイン編集
今度はページタイトルの
デザインを変えてみます。

68. 5.1 デザイン編集
デザイン編集ツールが表示されました。

69. 5.1 デザイン編集
タイトルの文字色変更

70. 5.1 デザイン編集
タイトルの装飾を設定

71. 5.1 デザイン編集
反映されました

72. 5.1 デザイン編集
背景画像の変更

73. 5.1 デザイン編集
背景画像の変更

74. 5.1 デザイン編集

75. 5.1 デザイン編集
ヘッダや
画面全体の設定

76. 5.1 デザイン編集
全体の横幅も
設定できます。
（今回はそのまま）

77. 5.1 デザイン編集

78. 5.1 デザイン編集
この後、ヘッダ背景色と
記事部を少し設定して
保存しました

79. 5.1 デザイン編集

80. 5.2 デザイン編集まとめ
● モジュールを組み合わせデザインを変更できた。
● HTML を書かずにサイトの構成を変更できた。
● CSS を書かずに細かい見た目を変更できた。

81. 5.2 デザイン編集まとめ
● モジュールを組み合わせデザインを変更できた。
● HTML を書かずにサイトの構成を変更できた。
● CSS を書かずに細かい見た目を変更できた。
10 分でオリジナルサイトが
完成した。

82. 6.adiary の便利な機能

83. 6 adiary の便利な機能
● サイトを運営する上で役立つ機能が沢山ある。
● そのような機能をいくつか紹介。

84. 6.1 画像アルバム機能

85. 6.1 画像アルバム

86. 6.1 画像アルバム
画像ビュー
フォルダ

87. 6.1 画像アルバム
アップロード
OS の
エクスプローラーから
ドロップ

88. 6.1 画像アルバム

89. 6.1 画像アルバム
ダブルクリック

90. 6.1 画像アルバム

91. 6.1 画像アルバム
Lightbox2.js による拡大表示
キーボード、マウス、
スワイプ操作（タッチ）
で画像をめくれます

92. 6.1 画像アルバム
選択してドラッグ

93. 6.1 画像アルバム

94. 6.1 画像アルバム

95. 6.1 画像アルバム
画像を選択して

96. 6.1 画像アルバム
画像を選択して

97. 6.1 画像アルバム

98. 6.1 画像アルバム
画像使って記事を
作成できました

99. 6.1 画像アルバム
記事編集画面に
ファイルを直接ドロップすること
もできます

100. 6.2 コンテンツ管理機能

101. 6.2 コンテンツ管理
● いわゆる固定ページ機能。
● コンテンツページはすべて階層構造を持つ。

102. 6.2 コンテンツ管理

103. 6.2 コンテンツ管理
記事 URL の一部となる
記事 key を設定

104. 6.2 コンテンツ管理

105. 6.2 コンテンツ管理
先ほどの記事を
親に指定します

106. 6.2 コンテンツ管理

107. 6.2 コンテンツ管理
ツリーをたどるリンクが
表示されます

108. 6.2 コンテンツ管理
先ほどの記事には
子の一覧が表示されます

109. 6.2 コンテンツ管理
同様に
いくつかコンテンツページを
作成しました

110. 6.2 コンテンツ管理

111. 6.2 コンテンツ管理
コンテンツの状態を
確認してみます

112. 6.2 コンテンツ管理

113. 6.2 コンテンツ管理

114. 6.2 コンテンツ管理
コンテンツページが一覧で
確認できます

115. 6.2 コンテンツ管理
コンテンツページが一覧で
確認できます
マウス操作で
ツリーや順番を
変更できます

116. 6.2 コンテンツ管理
コンテンツの一覧を
分かりやすく表示してみましょう

117. 6.2 コンテンツ管理

118. 6.2 コンテンツ管理

119. 6.2 コンテンツ管理

120. 6.2 コンテンツ管理

121. 6.2 コンテンツ管理

122. 6.2 コンテンツ管理

123. 6.2 コンテンツ管理
コンテンツ一覧
ドロップダウン
メニュー

124. 6.2 コンテンツ管理
● コンテンツのツリーが『自動反映』される。
– ツリーを使いサイトを構築できる。
– ツリー構造のメモ代わりに使える。

125. 6.2 コンテンツ管理
● コンテンツのツリーが『自動反映』される。
– ツリーを使いサイトを構築できる。
– ツリー構造のメモ代わりに使える。
「マルチユーザー機能」
「同時編集ロック機能」
情報共有メモに便利

126. 6.3 スマホ完全対応

127. 6.3 スマホ完全対応
設定不要で
スマホ表示に対応

128. 6.3 スマホ完全対応
記事の編集もできる

129. 6.3 スマホ完全対応
管理画面も大丈夫

130. 6.3 スマホ完全対応
設定画面も大丈夫

131. 6.3 スマホ完全対応
タッチ操作で
画像管理もできる

132. 6.3 スマホ完全対応
タッチ操作で
画像管理もできる
アップロード、記事貼り付け
だけではなく全操作 ok ！
フォルダ管理、ファイル移動、
スライドショー、サムネイル再生成
…… 等々

133. 6.3 スマホ完全対応
手持ち画像をアルバムに入れて、
出先から画像サーバとして
使うと超便利！

134. 6.3 スマホ完全対応
● 設定しなくてもスマホ対応！
● しかもただ表示するだけではない！

135. 6.3 スマホ完全対応
● 設定しなくてもスマホ対応！
● しかもただ表示するだけではない！
– 記事を書いたり画像をアップしたりできる。
– 管理機能のほとんどを使用できる。
– テーマ設定が、スマホ画面にも反映される。

136. 6.4 その他の特徴

137. 6.4 その他の特徴
● マルチユーザー、マルチサイト対応
● 超高速動作！
● Markdown やさつき記法（はてな記法風 )
● 外部 DB 不要（ PostgreSQL/MySQL にも対応）
● 階層化されたタグ（カテゴリ）機能
● プライベートモード（非公開サイト、会員制など）
● Facebook OGP/Twitter Cards 標準対応
…… などなど

138. 7. まとめ

139. 7. まとめ
● 10 分でオリジナルサイトを作成できた。
● それ以外もに便利な機能がたくさんあった。
● 使いやすい管理画面。

140. 7. まとめ
W○rdpress
なんて投げ捨てて
adiary を使おう！

141. 7. まとめ
● http://adiary.org/
● https://github.com/nabe-abk/adiary
– adiary は日本製オープンソース CMS です