プログラミングなしで簡単に！　　　DrupalでSNSサイトを作る方法 ～イラスト投稿サイトの構築事例より～

オープンソースカンファレンス　 2015 Tokyo/Spring

Drupal ユーザーグループ

西村拓央

2015年2月28日（土） 15時15分－16時00分明星大学 日野キャンパス

本日の流れ

・自己紹介

・オタクリップのデモ

・Drupalの紹介＆サイト構築の流れ

・オタクリップの紹介＆サイト構築の流れ

Drupalで作れるSNSサイト

オタクリップのデモ

英語：otaclip.com日本語：otaclip.com/ja中国語：otaclip.com/zh-hans

Drupalの紹介

国立国会図書館

ホワイトハウス

・個人のブログ・SNSサイト・企業のサイト・公的機関のサイト・メディアサイト・グループウェアサイト

・約30000モジュール、約2100テーマ、約37000人の開発者

・世界100万人以上の利用者、229ヶ国（180言語）のサイトが利用

・幅広い用途に使えるように設計されており、汎用性が非常に高い

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）

投稿フォーム（コンテンツタイプ）の設計

自由に作れる投稿フォーム

(1) Stracture > Content Type > add content type

(2) Manage fieldでFieldの追加

(3) Image Fieldを追加してみる

新規コンテンツタイプでコンテンツ投稿

新しいコンテンツタイプに投稿してみるContent > add content > upload pictures トップページに投稿できた！

新規モジュールのインストール（Views）

(2) DrupalのサイトからzipのURLをコピー新規モジュールのインストール(1) administration > modules > install new modules

(3) コピーしたURL貼り付けて「 install」

モジュールの有効化

(1) administration > modulesで有効化ctoolsが必要という警告が出てインストールできない

(2) Ctoolsを先にインストールして・・・

(3) Viewsのインストールに成功！

Viewsが出来る事

表示を簡単に切り替える（Format）

表示する情報を選べる（Field）

表示する情報を並べ替える（Sort）

- 投稿タイトルField- 閲覧数 Field- 投稿画像 Field- 登録ユーザー Field　 などなど.......

ViewsのFront Pageの有効化

(1) Administrator > Views (2) Front Pageの有効化 (Enable)

初めてのViews設定

ViewsのFront Pageの初期状態

Configration >site informationでトップURLをfrontpageに設定を忘れずに。

単純投稿サイトで使いたいモジュール

Wysiwyg (CKeditor)エディターを使えるようになる

insertImage FieldからBodyに画像挿入

File Field Sources外部URLからイメージ挿入

media Youtube, 画像などを一括管理

Scald簡単に画像を挿入できる

Image Field CaptionImage Field下にCaption挿入

Better exposed filtersデータベースのフィルターを付加

メディア系フィールド系 その他

ViewsDrupalの必修モジュール

Statistics記事の閲覧数などをカウント

SNSを作れるモジュール例

Views投稿内容の表示

Flagお気に入り・ファン登録

Privatemsgメッセージのやり取り

i18nサイトの多言語化

Voting API投票を行えるようにする

Organic Group承認制グループ

Display Suitコンテンツタイプ拡張

Fivestar5段階評価を行える

コミュニケーション その他表示 投票

login destination今のページでログイン

LoginToboggan登録後設定に飛ばす

オタクリップの紹介

Otaclip.comの特徴

・2012年10月から運営

・Drupal7を使って運営・Webmate Responsive Theme 7.x・CSSを数行だけ追加・プログラミングなし・国際化に対応

・ユーザー1500名以上・イラスト4000枚以上

オタクリップで利用してるモジュール

PUXプロフィール設定の画面

External Link外部URLに印付け

Easy SocialTwitter, Facebookと連動

User Profile Commentプロフィールにコメント

File Field Sources外部URLから画像取り込み

Capchaスパムを阻止する

Views Infinate Scroll無限の画像表示

Real Name ニックネーム機能

表示の部分 プロフィール部分 その他

Views表示のほとんどViews

Views Masonary GridMasonaryのレイアウト

Display Suitコンテンツタイプの拡張

Fivestar5段階評価

i18nサイトの多言語化

login destination今のページでログイン

LoginToboggan登録後に設定に飛ばす

Menu Tokenメニューの拡張

オタクリップの構築手順

１、Drupalとモジュールインストール

２、コンテンツタイプの設計・表示設定

３、Display Suitでコンテンツタイプ拡張

４、Viewsでページ設計

５、細かいモジュールの設定

投稿フォーム（コンテンツタイプ）の設計

コンテンツタイプの設計

・タイトル

・画像のアップロード

・画像の説明

・エロを含む時チェック

・タグ

オタクリップのコンテンツタイプ設計

Display Suitで出来ること

・コンテンツタイプで出来たページを好きな形に分割（Dipslay Suitの標準機能）

・フィールドに好きなものを挿入(Display Suit UI)

・Viewsのフォーマットに入れて連動する（View mode）

・Fieldのテンプレートを書き換える（Display Suit Extra）

コンテンツタイプを拡張する Display Suit

コンテンツタイプの表示設定

レイアウトをDrag and Dropで簡単に変更できる

Profile UXモジュールの重要性

Profile UXユーザーの設定を見やすくする

・アカウント設定・パスワード設定・プロフィール設定上記3つの画面を分離

プロフィール設定を切り分ける事で、プロフィール記入率が上昇。

更に登録後にLoginTobogganを使ってプロフィール設定ページに飛ばすと、記入率が上昇する。

After

Before

オタクリップのViewsモジュール

メインメニューのページ ユーザーメニューのページ

・自分の「過去の投稿」表示

・自分の「過去のコメント」表示

・自分の「ファン」表示

・自分の「ファン」の「最新投稿」表示

・自分の「投稿数」をカウント表示

・トップページ・一般の展示場・ちょいエロ展示場・月間ランキング・最新の投票

Viewsの基本 Viewsの応用

Viewsモジュールでトップページ形成

オタクリップのトップページ（ Viewsの基本）

Viewsによるセクシー系イラストの除外

一般展示場のViews（Viewsの基本）

Viewsでユーザーメニュー実現

例えば・・・・

1、自分の「過去の投稿」表示

2、自分の「過去のコメント」表示

3、自分の「ファン」表示

4、自分の「ファン」の「最新投稿」表示

5、自分の「投稿数」をカウント表示

ユーザーメニュー（Viewsの応用）

Viewsでそれぞれのユーザごとページ作成自分の投稿一覧などを確認できる

１、自分の「過去の投稿」を表示する

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日本語で質問できる

・Youtubeによる学習1人で進められるが、英語のものが多い

・Drupalのセミナーに参加するhttp://cmslabo.org/皆で一緒にDrupalを学習できて効率的

・YoutubeでDrupal学習動画の例：Display Suitを学習；Part1-Part11まで。

https://www.youtube.com/watch?v=HjOG8dVcN4Yhttps://www.youtube.com/watch?v=MRZaCdkNIyIhttps://www.youtube.com/watch?v=mvFP16PJt4chttps://www.youtube.com/watch?v=egVp3i44wpYhttps://www.youtube.com/watch?v=rn3e91C_2jwhttps://www.youtube.com/watch?v=ngBUKTXk628https://www.youtube.com/watch?v=y4wyjxyhbNAhttps://www.youtube.com/watch?v=tiUzobRKKcohttps://www.youtube.com/watch?v=cKTsjEJuvQ4https://www.youtube.com/watch?v=M3KoB_k5VZUhttps://www.youtube.com/watch?v=Gr3gsrOzUBU

クレジット・ライセンス

この資料の作者は、西村拓央です。電子メール： info@shinpi.net 電 話 ：+05058063888

オタクリップキャラクター・イラストについて

キャラクターを描いて下さった方。「ななおとさん」http://otaclip.com/node/651「青夏さん」http://otaclip.com/en/node/87

この資料の中で引用されたユーザーによるイラストの著作権は、各ユーザーに帰属します。

Drupal は Dries Buytaert による登録商標です。この資料で使われている製 品および名称については、それぞれの所有者の商標または登録商標となっています。