DrupalでSNSサイトを作る方法～イラスト投稿サイト

オープンソースカンファレンス　2015 Tokyo/Spring
プログラミングなしで簡単に！
DrupalでSNSサイトを作る方法
～イラスト投稿サイトの構築事例より～
2015年2月28日（土）
15時15分－16時00分
明星大学日野キャンパス
Drupal ユーザーグループ
西村拓央
本日の流れ
・自己紹介
・オタクリップのデモ
・Drupalの紹介＆サイト構築の流れ
・オタクリップの紹介＆サイト構築の流れ
Drupalで作れるSNSサイト
オタクリップのデモ
英語：otaclip.com
日本語：otaclip.com/ja
中国語：otaclip.com/zh-hans
Drupalの紹介
ホワイトハウス
・約30000モジュール、約 2100テーマ、約37000人の開発者
・世界100万人以上の利用者、 229ヶ国（180言語）のサイトが利用
・幅広い用途に使えるように設計されており、汎用性が非常に高い
国立国会図書館
・個人のブログ
・SNSサイト
・企業のサイト
・公的機関のサイト
・メディアサイト
・グループウェアサイト
Drupalのサイト構築手順
１、Drupalのインストール
２、投稿フォーム（コンテンツタイプ）の設計
３、主要モジュール・テーマのインストール
４、Views、Display Suitなどモジュールの調整
プログラミングなしで、クリックだけでサイト構築を完結できる
Drupalのインストール手順
インストールの基本的な流れ
0、サーバーを準備する
（データベースの使えるサーバー）
1、Drupalをダウンロード
https://www.drupal.org/start
2、ファイルをサーバーにアップロード
（FTPソフト、コマンドなどを用いて）
3、ブラウザよりサーバー情報を入力
投稿フォーム（コンテンツタイプ）とは？
Drupalのコンテンツタイプ
・タイトル、本文（Body）、イメージ（画像）などFieldの設計
（manage fields）
・設計したFieldの表示方法の設定（並び順など）
（display field）
投稿フォーム（コンテンツタイプ）の設計
自由に作れる投稿フォーム
(2) Manage fieldでFieldの追加
(1) Stracture > Content Type > add content type
(3) Image Fieldを追加してみる
新規コンテンツタイプでコンテンツ投稿
新しいコンテンツタイプに投稿してみる
Content > add content > upload pictures
トップページに投稿できた！
新規モジュールのインストール（Views）
(2) DrupalのサイトからzipのURLをコピー
新規モジュールのインストール
(1) administration > modules > install new modules
(3) コピーしたURL貼り付けて「install」
モジュールの有効化
(2) Ctoolsを先にインストールして・・・
(1) administration > modulesで有効化
ctoolsが必要という警告が出てインストールできない
(3) Viewsのインストールに成功！
Viewsが出来る事
表示を簡単に切り替える
（Format）
表示する情報を選べる
（Field）
- 投稿タイトルField
- 閲覧数 Field
- 投稿画像 Field
- 登録ユーザー Field
などなど.......
表示する情報を並べ替える
（Sort）
ViewsのFront Pageの有効化
(1) Administrator > Views
(2) Front Pageの有効化 (Enable)
初めてのViews設定
ViewsのFront Pageの初期状態
Configration >site informationでトップURLをfrontpageに設定を忘れずに。
単純投稿サイトで使いたいモジュール
フィールド系
メディア系
その他
insert
Image FieldからBodyに画像挿入
media
Youtube, 画像などを一括管理
Better exposed filters
データベースのフィルターを付加
File Field Sources
外部URLからイメージ挿入
Scald
簡単に画像を挿入できる
Views
Drupalの必修モジュール
Image Field Caption
Image Field下にCaption挿入
Wysiwyg (CKeditor)
エディターを使えるようになる
Statistics
記事の閲覧数などをカウント
SNSを作れるモジュール例
表示
投票
コミュニケーション
その他
Views
投稿内容の表示
Voting API
投票を行えるようにする
Organic Group
承認制グループ
i18n
サイトの多言語化
Display Suit
コンテンツタイプ拡張
Fivestar
5段階評価を行える
Privatemsg
メッセージのやり取り
login destination
今のページでログイン
Flag
お気に入り・ファン登録
LoginToboggan
登録後設定に飛ばす
オタクリップの紹介
Otaclip.comの特徴
・2012年10月から運営
・Drupal7を使って運営
・Webmate Responsive Theme 7.x
・CSSを数行だけ追加
・プログラミングなし
・国際化に対応
・ユーザー1500名以上
・イラスト4000枚以上
オタクリップで利用してるモジュール
表示の部分
プロフィール部分
Views
表示のほとんど Views
PUX
プロフィール設定の画面
External Link
外部URLに印付け
File Field Sources
外部URLから画像取り込み
Views Masonary Grid
Masonaryのレイアウト
User Profile Comment
プロフィールにコメント
Capcha
スパムを阻止する
Easy Social
Twitter, Facebookと連動
Display Suit
コンテンツタイプの拡張
Real Name
ニックネーム機能
Fivestar
5段階評価
i18n
サイトの多言語化
Menu Token
メニューの拡張
login destination
今のページでログイン
Views Infinate Scroll
無限の画像表示
その他
LoginToboggan
登録後に設定に飛ばす
オタクリップの構築手順
１、Drupalとモジュールインストール
２、コンテンツタイプの設計・表示設定
３、Display Suitでコンテンツタイプ拡張
４、Viewsでページ設計
５、細かいモジュールの設定
投稿フォーム（コンテンツタイプ）の設計
オタクリップのコンテンツタイプ設計
・タイトル
・画像のアップロード
・画像の説明
・エロを含む時チェック
・タグ
コンテンツタイプの設計
Display Suitで出来ること
コンテンツタイプを拡張する Display Suit
・コンテンツタイプで出来たページを好きな形に分割
（Dipslay Suitの標準機能）
・フィールドに好きなものを挿入
(Display Suit UI)
・Fieldのテンプレートを書き換える
（Display Suit Extra）
・Viewsのフォーマットに入れて連動する
（View mode）
コンテンツタイプの表示設定
レイアウトをDrag and Dropで簡単に変更できる
Profile UXモジュールの重要性
Profile UX
ユーザーの設定を見やすくする
・アカウント設定
・パスワード設定
・プロフィール設定
上記3つの画面を分離
プロフィール設定を切り分ける事
で、プロフィール記入率が上昇。
更に登録後に LoginTobogganを
使ってプロフィール設定ページに飛
ばすと、記入率が上昇する。
Before
After
オタクリップのViewsモジュール
メインメニューのページ
・トップページ
・一般の展示場
・ちょいエロ展示場
・月間ランキング
・最新の投票
Viewsの基本
ユーザーメニューのページ
・自分の「過去の投稿」表示
・自分の「過去のコメント」表示
・自分の「ファン」表示
・自分の「ファン」の「最新投稿」表示
・自分の「投稿数」をカウント表示
Viewsの応用
Viewsモジュールでトップページ形成
オタクリップのトップページ（ Viewsの基本）
Viewsによるセクシー系イラストの除外
一般展示場の Views（Viewsの基本）
Viewsでユーザーメニュー実現
ユーザーメニュー（ Viewsの応用）
Viewsでそれぞれのユーザごとページ作成
自分の投稿一覧などを確認できる
例えば・・・・
1、自分の「過去の投稿」表示
2、自分の「過去のコメント」表示
3、自分の「ファン」表示
4、自分の「ファン」の「最新投稿」表示
5、自分の「投稿数」をカウント表示
１、自分の「過去の投稿」を表示する
Path : /user/%/posts
２、自分が「過去のコメント」を表示
Path : /user/%/comment
4、自分の「お気に入りを表示
Path: user/%/favorites
５、自分の「お気に入り」の「最新投稿」を表示
Path : /user/%/favorite
Menu Tokenモジュール
Menu Tokenモジュール
https://www.drupal.org/project/menu_token
メニューにTokenを使えるようにする
「投稿管理」
user/[current-user:uid]/posts
「フォローの投稿」
user/[current-user:uid]/favorite
「お気に入り」
user/[current-user:uid]/bookmarks
「設定」
settings/[current-user:uid]/profile
Drupalの学習方法
・Drupalコミュニティで質問
https://groups.drupal.org/japan
日本語で質問できる
・Drupalのセミナーに参加する
http://cmslabo.org/
皆で一緒にDrupalを学習できて効率的
・Youtubeによる学習
1人で進められるが、英語のものが多い
・YoutubeでDrupal学習動画の例：
Display Suitを学習；Part1-Part11まで。
https://www.youtube.com/watch?v=HjOG8dVcN4Y
https://www.youtube.com/watch?v=MRZaCdkNIyI
https://www.youtube.com/watch?v=mvFP16PJt4c
https://www.youtube.com/watch?v=egVp3i44wpY
https://www.youtube.com/watch?v=rn3e91C_2jw
https://www.youtube.com/watch?v=ngBUKTXk628
https://www.youtube.com/watch?v=y4wyjxyhbNA
https://www.youtube.com/watch?v=tiUzobRKKco
https://www.youtube.com/watch?v=cKTsjEJuvQ4
https://www.youtube.com/watch?v=M3KoB_k5VZU
https://www.youtube.com/watch?v=Gr3gsrOzUBU
クレジット・ライセンス
Drupal は Dries Buytaert による登録
商標です。この資料で使われている製
品および名称については、それぞれの
所有者の商標または登録商標となって
います。
この資料の作者は、西村拓央です。
電子メール：[email protected]
電
話：+05058063888
オタクリップキャラクター・イラストについて
キャラクターを描いて下さった方。
「ななおとさん」
http://otaclip.com/node/651
「青夏さん」
http://otaclip.com/en/node/87
この資料の中で引用されたユーザーによるイラストの
著作権は、各ユーザーに帰属します。

Download Report