勉強会で発表したスライドを通して今年一年を振り返ってみる


今年一年、いろんな縁があって様々な勉強会に参加させて頂きました!
今回は発表したイベントを振り返りつつ、その資料を紹介したいと思います。

第2回関西アンカンファレンス

用意された発表枠が当日に埋まっていくという、参加者が発表者にもなりうるアンカンファレンス。
準備したスライドが長かったので2回に分けて発表しました。

当日のセッションでの角南さん(@shokuto)の発表が素晴らしい!
発表 » 「伝わるプレゼン」のつくりかたのヒント
フォローアップ » 関西アンカンファレンス #2 で発表しました

大阪てら子 37 「ActionScripterのためのJavaScript入門講座」

発表スライド
やさしいjQueryの使い方

はい、タイトルからもわかるとおりスライド自体は 第2回関西アンカンファレンスの 使い回し 既存リソースの有効活用

実はこの発表自体が振りで、実際にはWebSocketで 発表スライドを同期させるという仕組みを説明するために使いました。

その他、Flash側からJavaScriptの関数を呼ぶ ExternalInterface を使ったWebSocketリアルタイムチャットのデモも行いました。

デモボタン
( Chromeあたりを3枚ぐらい起動してみてください )

Web制作者、開発者の為のFacebook勉強会

ちょうどFacebook連携サービスを作っている最中、色々Twitterであやこやつぶやいてたらお声掛け頂きました。
GraphAPIやFQLについて紹介しました。

WebSocket勉強会

発表スライド
WebSocket Communication

いまや、私の同期スライドには欠かせないWebSocketに焦点を絞った勉強会で、私の東京発表デビューでもありました。

実は会場の無線LANが10000番台のポートを塞いでいる環境で、たまたまスライドで使っているWebsSokcetの接続ポートを18080に設定していて会場ではデモが行えないというハプニングもありました。
Ustreamで発表を見ている人を優先して、そのままの状態でデモを強行しました。
(それでも直前までは色々いじりましたが・・・(汗))

このことがきっかけでWebSocketなどの接続は一旦80番ポートあたりで受けつけて、ポートフォワーディングを行うリバースプロキシを実装しないといけないなぁと思ったりしました。
また、百人を超える人の前での発表などいい経験になりました。

大阪てら子 40「そろそろモバイル開発について語ろうぜ」

発表スライド
Mono Touchに触れてみよう

iPhoneアプリをC#で開発出来るMono Touchについて紹介しました。

第2回 Web制作者,開発者の為のFacebook勉強会

JavaScript SDKの紹介と 5月に行われた開発合宿で完成させたTweet Likesの実装話など、第1回に引き続き開発メインの発表でした。
(気が付いている方がいらっしゃるかどうかわかりませんが、今ちゃんとアプリが動作していません。ちゃんとなおしますすいません・・・)

ちなみに第3回の開催が予定されています。
» 2012年1月14日(土)に「第3回 Web制作者,開発者の為のFacebook勉強会」を実施します

Node.js勉強会@関西 第0回

WebSocket勉強会での失敗からNode.jsですべてのリクエストを受けるリバースプロキシサーバをたてました。
各アプリケーションサーバへポートフォワードを行っていて、発表ではライブラリー node-http-proxy の紹介などをしました。
実は、発表が決まってから実装してスライドを作るという、今思えばなんと無茶なスケジュールだろうと思います・・・

この勉強会も私がTwitterで半年くらい前につぶやいた一言がきっかけとなって発表させて頂きました。

また、来年1月には 大阪Node学園一時限目 が開催されるのですが、こちらでも発表させて頂くことになりました。

興味のある方は是非
» 大阪Node学園一時限目

他、その他の勉強会でも飛び込みLT等で発表しましたが、ここでは省略させて頂きます。

発表するということ

改めて振り返ると今年は発表に力を注いだ1年だったと思います。

受け売りですが、この2つの言葉を糧に来年も引き続き発表したいと思います。

あなたの当たり前だと思っている話が聞きたいのです

勉強会で一番勉強できるのは発表した人

発表することに対して難しいと思うかも知れませんが、最初のハードルさえ超えればあとは大丈夫。
“超”人見知りの私でも大丈夫なのですから。

勉強会で発表をするようになったきっかけは 『俺聞け 』という @msng さん主催のイベントだったのですが、それ以降ここまで勉強会に関わるとは思ってもみませんでした。

@msng さんには本当に良いきっかけを頂いて感謝しています。

その後も Twitter や Facebook 経由で「スピーカーやらないか?」っていうお話もあったり。
どれもふとしたきっかけなんですねー。不思議不思議。

最後に

今年一年、参加した勉強会の主催者の皆様、参加者の皆様ありがとうございました。

いま改めてWordPressとOGPについて考える


WordPress Advent Calendar 2011」も半分を折り返してしまいました。
ということは、今年は残り半月も無いわけですね、恐ろしいですね;

どうも、@anticyborg さんからバトンをうけました @kamiyam です。

WordPressについて

WordPressはその多機能さもさることながら、やはり大きな特徴は非常に活発なコミュニティーの存在ではないでしょうか。
また、最近では Twitter、FacebookなどのSNSを始めとしたソーシャルグラフが非常に有用で、そのつながりから沢山の情報を得ることが多くなってきました。

そこで OGPを正しく設定して情報を有効に伝えましょう。というのが今回のお話です。

Open Graph Protocol

OGP ( Open Graph Protocol )は 指定したURLコンテンツの内容をあらわす情報とその仕組みのことです。
設定しておくと、Facebookなどで「いいね!」したりすると、サムネイルなどサイト運営者が意図したコンテンツの情報を表示させることができます。

私は最近、勉強会で発表する機会が増えてきたので、そのスライドの開催イベント・題名などの情報をOGP設定して公開するようにしています。

さて本題。
WordPressにそのOGPを付与するプラグインとしてWP-OGPが有名です。
が、今回はそのWP-OGPをカスタマイズした WP-OGP-Customized を紹介しつつ、最近Facebookでは OGPプロパティの一つ「og:locale」の項目を追加しないと怒られてしまうので、そのあたりの修正手順なんかも書いていきたいと思います。

WP-OGP-Customized

では、WP-OGP-Customized から

WordPressで簡単にOGPタグを実装できるWP-OGPプラグインを設定画面付きに改造してみた
http://inspire-tech.jp/2011/07/wp_ogp_customized_plugin/

WP-OGP-Customizedは 意外と使われていない( みんなOGP設定はHead Cleaner使ってる? )のですが、結構色々なことをカバーしてくれます。

作成者さんのブログを見てもらえれば一番いいと思うのですが、個人的に気に入ってるのは

  • og:descriptionで出力される文字数を指定できる
  • デフォルトで利用されるog:image画像URLを指定できる

といったところですね。

og:localeの設定

最近、Facebook の OGPチェックサービス 「Facebook Debugger」 でコンテンツをチェックすると「og:locale」を指定しなさいというメッセージが表示されます。

なので、WP-OGP-Customizedを更に少しカスタマイズします。
(今回変更したのはv0.0.3です。アップデートですぐに対応して頂けそうですが ^^;)

WP-OGP-Customizedプラグインフォルダの wp-ogp-costomized.php を編集します。

//37行あたり
define('OGPT_PREFIX', 'wpogp-');
define('OGPT_DEFAULT_TYPE', 'website');
define('OGPT_VERSION', '0.0.3');
define('OGPT_DEFAULT_LOCALE','ja_JP'); //←追加
//186行あたり
$data = array();
$data['og:locale']=OGPT_DEFAULT_LOCALE; //←追加

改めて、Facebook Debuggerでチェックします。

正しく設定できました。

WordPressと私

WordPressでは非常に多くのThemeやPluginが存在します。
それらを使うことで非常にスピーディ、かつ柔軟に対応することが出来る素晴らしいブログ/CMS プラットフォームです。

私はまだ使うだけの立場ですが、今後プラグインの作成やコミュニティーへの参加などを行なっていきたいと思います。

また、今年WordPress界隈ではWordCamp KOBE / WordCamp TOKYO と 非常に大きなイベントがありました。

私はこのイベントで非常に多くの人と出会い、再会することが出来ました。
今年一年ありがとうございました。

明日のWordPress Advent Calendar 2011は?

ということで、明日の担当は @mypacecreator さんです。
よろしくお願いします!

VPS Debian 環境で PHP インストールして WordPress を構築


Debian6 で PHP をインストールして WordPress を構築していきます

開発用/FTP用ユーザ作成

開発用・FTP用 ユーザ を作成していない場合は作成する
公開Webサイトの構成は下記記事の構成とする

カゴヤVPS Debian5 から 6 へアップグレードして Apache と FTP 接続環境を構築
http://prog.re-d.net/?p=753

Apache .htaccess設定他

<Directory /home/www-data/public_html/ >
<Files ~ “^\.ht”>
Order allow,deny
Deny from all
</Files>
<Files ~ “\.(inc|dat|log)$”>
Order allow,deny
Deny from all
</Files>
Options Indexes FollowSymLinks MultiViews
AllowOverride FileInfo Options
Order allow,deny
allow from all
</Directory>

○ mod_rewriteモジュールロード

# a2enmod rewrite
# /etc/init.d/apache2 force-reload

PHP

○ PHPインストール
Debian に devuser でログイン

# aptitude install php5

○ Appache上で PHP が使えるかどうか確認

# vim /home/www-data/public_html/index.php

index.php に phpinfo()を記述

<?php phpinfo();

http://exsample.com/index.php にアクセスし PHP のインストール詳細情報が表示できればOK
この後 index.php は削除しておく

MySQL

○ MySQLサーバインストール

# aptitude install mysql-server

ここでMySQL root アカウントのパスワードを設定

○ php連携

# aptitude install php5-mysql

○ MySQL再起動

# /etc/init.d/mysql restart

○ Apache 再起動

# /etc/init.d/apache2 restart

WordPress用データベースとユーザ作成

○ MySQL ログイン

$ mysql -uroot -p mysql

インストール時に設定した「root」パスワードを入力してログイン

○ データベース作成
ここではデータベース名を「wordpress」と設定

mysql> CREATE DATABASE wordpress;

ユーザ登録。権限とパスワードの設定管理を行う。
後ほど WorpPressのDB情報定義ファイルwp-config.php に記述するので控えておく

mysql> GRANT CREATE,SELECT,INSERT,UPDATE,DELETE
-> ON wordpress.*
-> TO username@localhost
-> IDENTIFIED BY 'パスワード';

mysql> FLUSH PRIVILEGES;
TO username@localhost
usernameは データベース wordpress にアクセスするユーザ名を設定
IDENTIFIED BY ‘パスワード’
passwordはデータベース wordpress にアクセスするユーザのパスワード

○ ログアウト

mysql>\q

WordPressインストール

○ WordPressダウンロード
WordPress 日本語ローカルサイト

○ DB情報設定
wordpress/wp-config-sample.php をコピーして wp-config.php にリネーム
DB情報を記述する

/** WordPress のためのデータベース名 */
define('DB_NAME', 'wordpress');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'username');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'パスワード');

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');

○ WordPress設置
FTPクライアントを使い ftpuserユーザでDebianサーバ の /home/www-data/public_html/ に WordPress 本体を配置
※ ftpuserについては 冒頭記事参照

パーミッションあたりに注意して WordPressを配置しているURLへアクセス。
インストールできれば完了!

このあたり単純な WordPress 設置なので詳細は割愛

VPS Debian 環境で git や maven レポジトリを構築


Debian 6でgit / mavenのレポジトリを構築していきます

開発用ユーザ作成

開発者用アカウントを作成していない場合は作成する
※ 前回記事参照

カゴヤVPS Debian5 から 6 へアップグレードして Apache と FTP 接続環境を構築
http://prog.re-d.net/?p=753

アカウントdevuserをwww-dataグループに追加

# gpasswd -a devuser www-data

gitやmavenレポジトリファイルの作成はdevuserで行う

WebDav

○ WebDavモジュールのロード

# a2enmod dav

Enabling module dav.
Run ‘/etc/init.d/apache2 restart’ to activate new configuration!

# a2enmod dav_fs

Considering dependency dav for dav_fs:
Module dav already enabled
Enabling module dav_fs.
Run ‘/etc/init.d/apache2 restart’ to activate new configuration!

WebDav (git / maven)日本語対策

WebDavを利用する前に日本語ファイル対策のためにApacheモジュールをインストールする。

# aptitude install libapache2-mod-encoding
# vim /etc/apache2/mods-available/encoding.conf

<IfModule mod_encoding.c>
EncodingEngine on
NormalizeUsername on
SetServerEncoding UTF-8
DefaultClientEncoding JA-AUTO-SJIS-MS SJIS
AddClientEncoding “cadaver/” EUC-JP
</IfModule>

○ encodingモジュールロード

# a2enmod encoding

Enabling module encoding.
Run ‘/etc/init.d/apache2 restart’ to activate new configuration!

git / maven用 SSL設定

今回、gitやmavenへのアクセスは http (80番ポート)を使わず https (443番ポート)を使いたいと思います。

○ SSLモジュールのロード

# a2enmod ssl

Enabling module ssl.
See /usr/share/doc/apache2.2-common/README.Debian.gz on how to configure SSL and create self-signed certificates.
Run ‘/etc/init.d/apache2 restart’ to activate new configuration!

○ https設定の確認
Apacheデフォルトのhttpsサイト定義 default-sslを使って設定します。

DocumentRootをhttpサイト定義defaultと同じ設定にします。
(defaultのサイト定義は前回記事参照)

# vim /etc/apache2/sites-available/default-ssl

DocumentRoot /var/www/

DocumentRoot /home/www-data/public_html/
<Directory /var/www/>

<Directory /home/www-data/public_html/>

確認のため /home/www-data/public_html/index.html 作成

default-sslを有効にする

# a2ensite default-ssl

Enabling site default-ssl.
Run ‘/etc/init.d/apache2 reload’ to activate new configuration!

○ Apache再起動

# /etc/init.d/apache2 restart

https://exsample.com/ (:443)で確認

httpsでアクセスすると信用できないサイトとブラウザでエラー画面が表示されると思います。

これはApacheデフォルト(もしくは次に作る)証明書の出所が信頼できないということで表示されます。

Webサイトとして公開するのであれば別ですが、SSLアクセスを行うためだけなのでここでは無視します。

○ 証明書作成
新しい証明書を作ってdefault-sslに設定してみます

# mkdir /etc/apache2/ssl
# cd /etc/apache2/ssl
# make-ssl-cert /usr/share/ssl-cert/ssleay.cnf apache.pem

証明書ファイルを設定します

SSLCertificateFile /etc/ssl/certs/ssl-cert-snakeoil.pem
SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key

SSLCertificateFile /etc/apache2/ssl/apache.pem
SSLCertificateKeyFile /etc/apache2/ssl/apache.pem

○ Apache再起動

# /etc/init.d/apache2 restart

https://exsample.com/ (:443)で確認

git

○ gitレポジトリルートディレクトリ作成

gitレポジトリ配置場所
/home/devuser/git/repos
$ mkdir -p /home/devuser/git/repos
# chown www-data:www-data /home/devuser/git/repos
# chmod g+s+w /home/devuser/git/repos

○ Apaceh設定
Apacheのサイト定義ファイルにgitレポジトリフォルダーを追加する

# vim /etc/apache2/sites-available/default-ssl

<Directory /home/devuser/git/repos/>
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
</Directory>
#
# This is to permit URL access to GIT WebDav.
#
Alias /git “/home/devuser/git/repos/”
<IfModule mod_dav.c>
DAVMinTimeout 600
<Location /git>
DAV On
Deny from all
Allow from all
</Location>
</IfModule>

○ Apache再起動

# /etc/init.d/apache2 restart

https://exsample.com/git/ で確認

ひとまずフォルダ内の一欄が表示されます。
ファイルが無いので中身は無いですが。

gitレポジトリBasic認証

このままだと誰でもアクセスできるので、ひとまずBasic認証の設定を行います。
ここではgitクライアントからのアクセス用にgituserを設定します
注)Basic認証 ユーザー ≠ git ユーザー

○ gitアクセス用ユーザ作成
gitアクセス用ユーザをgituserとしてパスワードファイルを任意の場所に生成

# htpasswd -c /path/to/.git-htpass gituser

New password: パスワード入力 [enter]
Re-type new password: 再度パスワードの入力 [enter]
Adding password for user gituser

ユーザ名、パスワードはクライアント側で必要となるため把握しておく

○ 確認

$ vim /path/to/.git-htpass

gituser:xxxxxxxxxxxx //パスワードは暗号化されている

○ その他のユーザ管理コマンド

ユーザ追加
# htpasswd /path/to/.git-htpass user2
ユーザ削除
# htpasswd -D /path/to/.git-htpass user2

○ サイト定義にBasic認証の設定を追加

# vim /etc/apache2/sites-available/default-ssl

<Directory /home/devuser/git/repos/>
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
</Directory>
#
# This is to permit URL access to git WebDav.
#
Alias /git “/home/devuser/git/repos/”
<IfModule mod_dav.c>
DAVMinTimeout 600
<Location /git>
DAV On
Deny from all
Allow from all
# 以下追加
AuthName “Git Repository Server”
AuthType Basic
AuthUserFile “/path/to/.git-htpass”
Require valid-user
# 以上追加
</Location>
</IfModule>

○ Apache再起動

# /etc/init.d/apache2 restart

https://exsample.com/git/ へアクセス

ユーザ名パスワードを認証画面が表示され、正しいパスワード入力でディレクトリ一覧が表示されることを確認する

git(-core)インストール

# aptitude install git-core

○ 確認

$ git --version

git version 1.7.2.5

○ git サーバ側レポジトリ作成

$ cd /home/devuser/git/repos/
$ mkdir repo1.git
$ cd repo1.git
$ git init --bare --shared=true
$ git update-server-info
$ cd ..
# chmod g+s+w repo1.git
repo1.gitレポジトリURL
https:// exsample.com /git/repo1.git/

○ git クライアント側のホームディレクトリにBasic認証情報を配置する

以下、Windows XPで検証

_netrcファイル 配置場所

C:\Documents and Settings\gituser\_netrc

記述内容

machine exsample.com
login gituser
password パスワード

_netrcファイルが存在しない場合、git push時にユーザ名 / パスワードの入力を求められる

○ クライアントからgitコマンドを実行する
(gitはインストール済みと仮定)

・git push
サーバ側で所謂「俺々証明書」を発行しているため、証明書チェックを行わないよう設定

$ git config --global http.sslVerify false

レポジトリ作成

$ git init
$ git remote add origin https://exsample.com/git/repo1.git/
type nul > README ←windowsの~ファイル生成コマンド
$ git add .
$ git commit -m "initial import"
$ git push origin master

pushできればOK

・git clone

$ git clone https://exsample.com/git/repo1.git/

○ レポジトリ確認

$ git config remote.origin.url

https://exsample.com/git/repo1.git/

maven

mavenレポジトリルートディレクトリ作成

mavenリポジトリ配置場所
/home/devuser/maven/repos
$ mkdir -p /home/devuser/maven/repos
# chown www-data:www-data /home/maven/git/repos
# chmod g+s+w /home/devuser/maven/repos

○ mavenアクセス用ユーザ作成
パスワードファイルを任意の場所に生成
mavenアクセス用ユーザをmvnuserとしてパスワードファイルを任意の場所に生成

# htpasswd -c /path/to/.mvn-htpass mvnuser

New password: パスワード入力 [enter]
Re-type new password: 再度パスワードの入力 [enter]
Adding password for user mvnuser

ユーザ名、パスワードはクライアント側で必要となるため把握しておく

○ 確認

$ vim /path/to/.mvn-htpass

mvnuser:xxxxxxxxxxxx //パスワードは暗号化されている

○ サイト定義にBasic認証の設定を追加

# vim /etc/apache2/sites-available/default-ssl

<Directory /home/devuser/maven/repos/>
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
</Directory>
#
# This is to permit URL access to maven WebDav.
#
Alias /maven “/home/devuser/maven/repos/”
<IfModule mod_dav.c>
DAVMinTimeout 600
<Location /maven>
DAV On
Deny from all
Allow from all
AuthName “Maven Repository Server”
AuthType Basic
AuthUserFile “/path/to/.mvn-htpass”
Require valid-user
</Location>
</IfModule>

○ Apache再起動

# /etc/init.d/apache2 restart

https://exsample.com/maven/ へアクセス

ユーザ名パスワードを認証画面が表示され、正しいパスワード入力でディレクトリ一覧が表示されることを確認する

mavenレポジトリBasic認証

○ maven クライアント側のホームディレクトリにBasic認証情報を配置する

以下、Windows XPで検証

settings.xmlファイル 配置場所

C:\Documents and Settings\gituser\.m2\settings.xml

記述内容

<?xml version="1.0" encoding="UTF-8"?>
<settings>
<servers>
<server>
<id>http-basic-repository</id>
<username>mvnuser</username>
<password>パスワード</password>
</server>
</servers>
</settings>

○ 俺々証明書のサイトにmaven deploy(javaでアクセス)すると BUILD FAILURE が発生する

次の記事を参考に InstallCert.java をコンパイル・実行することで mvn deployを実行出来るようになりました。
注意点としてmvn deploy を実行するjavaと他のjavaとをしっかり区別しないと嵌ります。(生成されるフォルダが変わる)

javaでSSL接続をすると、PKI PATHの構築に失敗となる
http://www.melange.co.jp/blog/?p=2345

カゴヤVPS Debian5 から 6 へアップグレードして Apache と FTP 接続環境を構築


少し前 カゴヤVPS がベータから正式版に移行しました。

私は カゴヤVPS のベータ版で初めてLinuxを触り始め、最初 CentOS で構築していたのですが、正式版申込のタイミングで Debian 環境に移行しました。

将来、カゴヤVPSで Debian6 のアプリケーションパックが提供されると思うのですが、今のところ Debian5 までなので、アップグレードから始めました。

すでに Debian6 のアプリケーションパックが提供されていれば Debian5 (lenny)→ Debian6 (Squeeze) へアップグレードの作業は不要です。
また、他のVPSでもDebianであれば大体の手順は変わらないと思います(適当)

以下、後から書いたので抜けがあるかも知れませんが、備忘録として都度追加していきます。

Debian6へアップグレード

アプリケーションパック
debian 5 64bit OSパック(debian 5 64bit)

こちらの記事で書かれてあることをまるまる参考にさせて頂きました(^^;

Debian5 から 6へアップグレード
http://loofah.jpn.org/BLOG/archives/157
$ cd /etc/apt/
# cp sources.list sources.list_bak
# vim sources.list

元のソースリストをコメントアウト

# deb http://ftp.debian.org/debian lenny main contrib non-free
# deb http://volatile.debian.org/debian-volatile lenny/volatile main contrib non-free
# deb http://security.debian.org/debian-security lenny/updates main contrib non-free

以下追加

deb http://ftp.jp.debian.org/debian squeeze main
deb-src http://ftp.jp.debian.org/debian squeeze main
deb http://security.debian.org/ squeeze/updates main
deb-src http://security.debian.org/ squeeze/updates main
deb http://volatile.debian.org/debian-volatile squeeze/volatile main
deb-src http://volatile.debian.org/debian-volatile squeeze/volatile main

新しいソースリストからアップグレードを実行

# apt-get install aptitude
# apt-get clean
# apt-get update
# aptitude install dpkg
# aptitude safe-upgrade
# aptitude dist-upgrade

Debian のバージョンが新しくなったかどうか確認します

# cat /etc/debian_version

6.x.x

sambaとケルベロス認証(?)削除

# aptitude purge samba-common
# aptitude purge libpam-krb5

開発用ユーザー追加

開発用ユーザー devuser (以下、devuser)を追加

# adduser devuser

Adding user `devuser’ …
Adding new group `devuser’ (xxxx) …
Adding new user `devuser’ (xxxx) with group `devuser’ …
Creating home directory `/home/devuser’ …
Copying files from `/etc/skel’ …
Enter new UNIX password: パスワード入力 [enter]
Retype new UNIX password: パスワード入力 [enter]
passwd: password updated successfully
Changing the user information for devuser
Enter the new value, or press ENTER for the default
Full Name []: devuser[enter]
Room Number []: [enter]
Work Phone []: [enter]
Home Phone []: [enter]
Other []: [enter]
Is the information correct? [Y/n] y [enter]

管理者権限付与

# gpasswd -a devuser sudo

Adding user devuser to group sudo

確認

$ su devuser

Password: パスワード入力[enter]

devuserでログイン出来ればOK
以降、VPSへはrootではログインせずdevuserでログインを行う。

Apache

○ Apacheインストール
Apacehが入っていない事はないと思いますが・・・

# aptitude install apache2

○ Apache停止

# /etc/init.d/apache2 stop

○ Web公開用ディレクトリ作成

$ cd /home
# mkdir www-data
# chown www-data:www-data www-data
# chmod 775 www-data
# chmod g+s www-data

$ cd www-data
# mkdir public_html
# chown www-data:www-data public_html
# chmod g+w public_html

○ デフォルトサイト定義
すでにデフォルトサイト定義ファイル(default)があるので、ここに公開用フォルダの設定を記述

$ cd /etc/apache2/sites-available/
# cp default default.org
# vim default

DocumentRootを作成した公開用ディレクトリに変更

DocumentRoot /var/www/

DocumentRoot /home/www-data/public_html/

○ Apache再起動

# /etc/init.d/apache2 start

public_htmlディレクトリにindex.htmlを作成

$ cd /home/www-data/public_html
# vim index.html
index.html
<h1>Hello Debian!</h1>
# chown www-data:www-data index.html

http://exsample.com/ (:80ポート接続)で確認

「Hello Debian!」が表示されればOK!

Apache設定ファイル覚書(参考)

Apache設定ファイル
/etc/apache2/apache2.conf
ポート設定
/etc/apache2/ports.conf
listen 80 80番ポートが使用される

○ Apache サイト定義
/etc/apache2/sites-enabled/ディレクトリに、有効なサイト定義が配置されています。
実際にはサイト定義用ディレクトリへのリンクが置かれる。

有効サイトディレクトリ
/etc/apache2/sites-enabled/
サイト定義ディレクトリ
/etc/apache2/sites-available/

○ 設定サイト定義の有効/無効切り替え

有効にする(リンクを貼る)
# a2ensite
無効にする(リンクを解除)
# a2dissite

(例 default サイト定義を有効にする

# a2ensite default

○ モジュール定義ファイル
モジュールについてもサイト定義ファイルと同じような方法で設定を行う。

有効モジュールディレクトリ
/etc/apache2/mods-enabled/
モジュール定義ディレクトリ
/etc/apache2/mods-available/

○ モジュールの有効/無効切り替え

有効にする
# a2enmod
無効にする
# a2dismod
(例 encodingモジュールを有効にする
# a2enmod encoding

モジュールの状態により出力される内容が異なる

有効化
Enabling module @モジュール名.
すでに有効な場合
Module @モジュール名 already enabled

FTP(vsftpd)

○ vsftpd インストール

# aptitude update
# aptitude install vsftpd

○ vsftpd停止コマンド

# /etc/init.d/vsftpd stop

○ 設定ファイル

# vim /etc/vsftpd.conf

設定はこちらのサイトを参考に設定しました

ftpサーバ(vsftpd)の設定
http://www005.upp.so-net.ne.jp/develop-tom/deb/vsftpd-deb.html
FTPサーバー構築(vsftpd)
http://centossrv.com/vsftpd.shtml

chroot_list_enableをYESにする場合
空の/etc/vsftpd.chroot_listを作成します

# touch /etc/vsftpd.chroot_list

○ アクセス許可ユーザーを設定

# vim /etc/vsftpd.user_list

ftpuser

○ FTPユーザー(以下ftpuser)作成

# adduser ftpuser

○ www-dataグループへ追加

# gpasswd -a ftpuser www-data

DevianではApache実行ユーザーグループをwww-dataとしているのでグループwww-dataに追加。

○ ftpuser ホームディレクトリの変更

# usermod -d /home/www-data/ ftpuser
# rm /home/ftpuser

○ ホームディレクトリ確認

# vim /etc/passwd

ftpuser:x:0000:00:ftpuser,,,:/home/www-data/:/bin/bash

○ ftpuser設定確認
www-dataグループにftpuserが追加されているのを確認

# vim /etc/passwd

www-data:x:00:ftpuser

○ vsftpd起動

# /etc/init.d/vsftpd start

ftpクライアントからftpuserでアクセスして確認

ftpuserでファイルの削除などが行えればOKです!

CSS Nite in OSAKA, Vol.27に参加して思ったこと


先日、「CSS Nite in OSAKA, Vol.27」に参加しました。

阪急オフィスタワー の30階 (!)が会場でした。

今回の勉強会はグループワークが目的

オープニングトークで、主催者のお一人秋葉さん (@Hidetaro7) から

プログラマ向けにハッカソンといったイベントはあるのに、デザイナ向けのそれに当たるものが少ない。

というお話がありました。

確かにデザイナ向けのハッカソンってあまり聞かないですし、プログラマ向けのハッカソンにはなかなか参加しづらい。

ということで、今回は敢えて参加人数を減らしグループワークを目的とした勉強会を開催したとのこと。

秋葉さんのそういった試みなどは、私が色々書き連ねるよりも、ご本人のブログを見て頂いた方が良いかと思います。

デザイナー主体のハッカソンをはじめました
http://akibahideki.com/blog/cat5/post-22.html

イベントにおけるグループワークの着地点

レポートとしてあがっていた、角南さんのブログを見て

なるほど、グループワークの成果というのはやはり個人個人で違うんだなと思いました。
(記事の趣旨はグループワークの成果のお話ではないですが)

インターフェースのデザインの前に
http://withcomputer.jp/cssniteosaka27.html

私の場合、勉強会でのグループワークで特に意識しているのは

それぞれから発案されたアイデアをうまく取りまとめて、定められた時間内にコンセプトとしてのまとまりを きっちり「完成させること」

としています。

これは、ほとんど初対面で話したことのない人と

「俺、これ書きます」

とか

「私、こっちの部分完成させます」

とか

あの短い時間とドキドキする緊張感の中で、ちゃんと役割を分担しないといけない。

こうだと思う完成形にみんなが向かわないと達成出来ない。

乱暴に書くと、多少なりとも不完全な所があってもコンセプトとして完成させることが目標になります。

不完全なのに完成とは何事かと言われるかも知れないですが、普段の仕事では出来ないからこそ、勉強会でのグループワークではそこに重点を置いてみたりしてます。

瞬発力が必要と言うか、やったもん勝ちというか。

Webサービスとかって時にそういうことを求められたりするので、そこを鍛えられたらなぁと思っています。

もちろん、どんな成果を持ち帰るかは人それぞれ。そこは参加する人が決めることだと思います。

ただ、今回のようなグループワーク(最終的には個人ワークだったけど)を目的としたイベントの場合、ちゃんとゴールも明確になっていた方がよかったかな。

と、思いました。

そこは、次回以降に期待しつつ次回の開催を待ちたいと思います。

□ □ □

ともあれ、普段仕事のプロジェクトに対し、一人でディレクター兼プログラマとして進めることが多い私にとって非常に貴重な一日でした。

また、このような勉強会に参加できたらと思います。

最後に

主催者の皆さん、参加された皆さん有難うございました。

矢野りんさんにサイン貰ったの図

どさくさにまぎれて矢野りんさんにサインも頂いたりしてとても満足な勉強会でした。

RSS.Graffiti を使って、FacebookとTwiiterにWordPressの更新情報を流す


RSS.Graffiti
RSSフィードURLを利用して、WordPressの記事の更新情報をTwitter と Facebook(ページ)とに流す方法を紹介します。

WordPressだけに限定した話ではありませんが・・・
(先日、WordCampTokyoに参加して来たのですが レポートを書かない代わりに、WordPressを使う人のためになる記事が書ければということで;)

実はブログ記事のタイトルとURL流すだけなら RSS.Graffitiではなく twitterfeed の方が設定は簡単だし、OGPも対応しているようなので、そっちでいいと思います。。。

私の場合、TwitterとFacebookに流す投稿文章の先頭に【ブログ書いた】を入れたいがためにRSS.Grafittiを使っています。

Twitterfeed でも「Post Prefix」「Post Suffix」まで設定できるのですが、追加した日本語が文字化けしていました(記事タイトルは大丈夫。

まぁ、こちらで RSS.Graffiti と twitterfeed の簡単な比較をされているようですので、dlvr.itなども含めお好みのやつを。

twitterfeedとFacebookのRSS Graffitiはどちらが便利か?
http://ameblo.jp/mattintosh/entry-11077777490.html

それでもRSS.Graffitiを使うのであれば、以下お付き合いをば。。。


Facebookへの投稿

Facebookに流す更新情報は 個人アカウント or Facebookページ どちらでも設定できますが、FacebookページはFacebook内の広報ページのようなものなので、登録しておいて損はないと思います。

Facebookページの作り方
http://f-navigation.jp/manual/pages/make.html

Facebookアプリ RSS.Graffitiを利用出来るように設定します。

アプリ画面へアクセスします。
RSS.Graffiti

アプリを使用していないので、プロフィール画像の横に

Status: Authorization Required

と表示されています。

使用するには、中央の黄線枠の下部 「Click HERE to autorize RSS Graffiti」 ボタンを選択します。

すると、認証画面に移るので認証します。
RSS.Graffiti認証画面

「許可する」を選択して、アプリ画面へ戻って来ると ステータスが

Status: Configured

に変わります。

たまに ステータスが 「Authorization Required」 のままだったり、空欄だったりの時があるので、その時はリロードします。(ペシッ

アプリ認証完了

まずブログの更新をFacebookに流す設定します。

ここで、一考。
Facebookにブログの更新情報を流せるのですが、

  • 個人アカウントのフィード
  • Facebookページのフィード

どちらに流すかを考えます。

個人アカウントの設定を選択している状態です。
個人アカウント選択状態

こちらはFacebookページを選択している状態です。
Facebookページ選択状態

おや、「Disabled」・・・右上のスイッチでONに切り替えてください。
(すいません、色々いじりすぎてデフォルトがONなのかOFFだったか定かじゃないです・・・

投稿したい方の項目から選択します。(私はFacebookページを選びました
「Feeds」タブが選択されていれば、右下の「Add feed」からWordPressのRSSフィードURLを追加することができます。
Facebookページ選択状態

WordPress のRSSフィードのURLをコピーします。

http://prog.re-d.net/?feed=rss2 (※私の場合

RSSフィードURL入力

「FeedURL」にURLを入力し、右下の「click here to fetch and preview」をクリックすると、URLが有効かどうか確認できます。
「Source Name」は入力しなくてもRSSから自動で値を引っ張ってきてくれます。
RSSフィードURL入力

はい、プレビューが表示されてSource Nameも設定されています。
RSS.Graffitiプレビュー(standard)

でもなんか長い・・・

そこで、ページ下部の 「Style」から表示内容を変更します。

種類は3種類

  • Standard
  • Compact
  • StatusUpdate

先ほどのやたら長いのがStandardですね。

こちらはCompact
RSS.Graffitiプレビュー(compact)
おぉ、コンパクト!

こっちは Status updates
RSS.Graffitiプレビュー(status updates)
あぁ、なるほど、ステータスアップデート(?)
ただ、URLが出力されません;
(20111129追加)
「Transform」タブから「Append short URL」にチェックを入れれば大丈夫でした。
(20111129追加終わり)

右上の「Save」をクリックして、設定を保存します。
これで、WordPressの記事をアップすると指定したFacebookページへ自動的に投稿されます。

「Schedule」タブを選択して「Update frequency」の項目をデフォルトの「Every half an hour」から「As soon as possible」を選択すると「なるはや」でRSSフィードを取ってきてくれるようになるでしょう。
RSS.Graffiti Schedule

しかし、「Standard」も「compact」も、OGP設定しているのにサムネイル出ませんね。
なんとか出てもらえると嬉しいのですが。。。

投稿されるメッセージの変更

FacebookページとTwitterに出力の先頭に文言を追加することができます。

上の例なら

【ブログ書いた】 Twitterで見知らぬ人からリプライが飛んできてNode.js勉強会で発表した話 http://prog.re-d.net/?p=746


と出したいわけです。

「Transform」タブから「Prefix」に文言を入力すれば、先頭に文言が追加されます。
RSS.Graffiti Prefix設定

Twitterへの投稿

RSS Graffiti からTwitterへの投稿を許可します。

「application setting」を選択
application setting

「Add Account」ボタンをクリックしてTwitterの認証を許可します。
twitter認証

これでTwitterとの紐付けはOK!
twitter認証完了

もう一度、Facebookページを選択「edit」→「More」、紐付けしたTwitterアカウントを選択して、右上の「Save」をクリック。
twitter連携設定

これで、TwitterにもFacebookにもWordPressの更新情報が流れるようになります。
TwitterやFacebookの連携機能を有効にしている場合、投稿が重複してしまうので、注意が必要です。

WordPressにRSSフィードURLが設定されていない

通常RSSフィードは、次のURLで有ることが多いです。

  • http://exsample.com/feed
  • http://exsample.com/?feed=rss2

自分のWordPressにRSSフィードURLが設定されていない場合、
ブログのhead要素内にRSSフィードのURLが出力されているか確認します。

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://exsample.com/feed" />
<link rel="alternate" type="application/rss+xml" title="ブログタイトル &raquo; フィード" href="http://exsample.com/?feed=rss2" />

出力されていない場合、function.phpを確認。

add_theme_support('automatic-feed-links');

テーマサポートのfeedURL出力用の関数がなければ追加します。(Ver3 以降

意図的にサイト内にRSSフィードのURLリンクを設置する場合は、

<p><?php the_feed_link(“a要素表示文字列”)  ?></p>

とします。

Twitterで見知らぬ人からリプライが飛んできてNode.js勉強会で発表した話


ある日、TwitterでURLだけ書かれたリプライが飛んできました。

リプライを送ってきたのは @vanx2 さん。
全く面識が無く「???」と思いつつ開くと

Node.js勉強会@関西 第0回
http://atnd.org/events/21762

ふむ、Node.jsの勉強会だったんですね。

もちろん興味があったので参加をすることにしましたが、発表するのはちょっとハードルが高いかな・・・と思っていました。

そんな中、TwitterのタイムラインでこんなTweetが

勉強会の発表とかは発表してから後悔すればいいんです

(Via) @repeatedly

うん、そうですよね。せっかくなので発表しよう!

そんなこんなで、発表を決めました。
( 今だから書きますが、実は発表が決まってからNode.jsをインストールしなおしました(笑)

私は、発表用のスライドをWebSocketで同期させる仕組みを作っていて、それを開発用サーバのJetty( Javaで書かれたWebアプリケーションサーバ )にアップしていました。
そのあたりのURL(というかポート番号)をもう少しすっきりさせようと、リバースプロキシをNode.jsで実装しました。

発表スライド : Node.jsでつくるリバースプロキシ
http://prog.re-d.net/demo/slide/20111119/

ちょうどその頃、自分の開発用VPSサーバの移行をしていたり、SyncSlideで使っていたWebSocket用のサーバを作り変えていたりとなかなか時間的にハードでしたが、非常に充実した時間でした。

勉強会の詳細は @papettoTV さんが纏めてくださっています!

Node.js勉強会@関西 第0回に参加してきた
http://blog.playispeace.com/424/nodejs_osaka/
Node.js勉強会@関西 第0回 ハッシュタグ #nodesgw00
https://twitter.com/search?q=%23nodesgw00

※ 補足)当日、@kumatch さんが行われたライブコーディングで、不安定だとされていたリクエスト数に対するのレスポンス数の増加はテストで使用したab( Apache Bench )でのみ発生していたようで、Node.js側の問題では無いようです。

あとで知ったのですが、@vanx2 さんは Node.js 専用のクラウドホスティングサービスNode Ninja の中の人でした。
東京Node学園祭2011 に参加された人にβ版として公開されているのですが、アカウントを頂いてしまいました。感謝!!!

ちょうど、半年前ぐらいに「Node.jsの勉強会、関西で無いのかな?」とぼそっとTweetしたのがきっかけで、今回声を掛けていただけたようです。

まさか、スピーカーとして呼んでいただけるキッカケが、何気ない一言だったとは思ってもみませんでした。

Node NinjaではWebSocketが使えるのということなので、いろいろ試してみたいと思います!

最後に、主催の@craftgear さん。
会場を手配くださった@takagig さん @vanx2 さん。
スピーカー、ならびに参加者の皆さんお疲れ様でした。

jQuery Templateについてちょっと調べてみた


先日CSSNite LP18に参加したのですが、中でも一際気になったjQuery Templateの機能を掘り下げたいと思います。

jQuery Template?

利点

これを使うと何が嬉しいかというと、表示のためのHTMLとロジック処理のためのJacaScriptをきちんと分離出来るということが挙げられます。
(※ちなみに、まだbetaです)

サンプル

例えば、こんなHTMLがあったとします。
サーバーサイドからある書籍のリストをAjaxでロードしてリスト表示します。

<div>
    <h4>書籍タイトル</h4>
    <dl id="bookList">
    <!--
    	<dt>逆襲ノマド</dt>
    	<dd>新しい仕事</dd>
        <dt>黄昏サスペンデッド</dt>
        <dd>今日は早く帰ろう</dd>
        <dt>やる気 not Fount!</dt>
        <dd>ノーコメント</dd>
    -->
    </dl>
</div>

マークアップをした人はコメントアウトしている箇所をdt+ddの定義リストで表示することを想定しています。

一方JavaScript側ではこのような記述をしているようです。

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.js"></script>
<script type="text/javascript">

/*
 *	Ajax処理の結果
*/
var result = [
		{ "title":'逆襲ノマド',               "description": '新しい仕事' 	},
		{ "title":'黄昏サスペンデッド',   "description": '今日は早く帰ろう'	},
		{ "title":'やる気 not Fount!',    "description": 'ノーコメント'		}
	];

(function($){
	$( "#load" ).click(function(e){

		//result = Ajax処理の結果とか
		var jsonAray = result;

		var bookList = "";
		for (var i = 0; i < jsonAray.length; i ++) {
			var book = jsonAray[i];
			bookList += "<tr>";
			bookList += "<td>" + book.title + "</td>";
			bookList += "<td>" + book.description + "</td>";
			bookList += "</tr>";
		}

		$("#bookList").append( bookList );
	});
})(jQuery);
</script>

定義リストを(dl要素)想定しているのにテーブルのtr要素で返って来ました。
これは、はなから構築するHTMLをちゃんと打ち合わせしていないので例が悪いですが、JavaScriptのロジック中に要素を直書きしているのが原因です。
dt+dd要素にspan要素を追加してidを振り、一つずつ値を設定すれば、JacaScriptの処理中にhtmlタグを記述せずに済みそうですが数が多くなると大変です。

また、後からこの書籍の定義リストをやはりtable要素に変更したいという事になったとします。

これぐらいの規模ならさっと変更箇所を探せますが、複雑な処理を行なっているJavaScriptのコードにポツンとdt+dd要素があったりして、どの部分のコードなのかが分からなかったりします。

そこで、jQuery Templateを使ってこのようにHTMLを記述します。

<div>

   	<h4>書籍タイトル</h4>

    <dl id="bookList2">
    <script id="bookList2Tmpl" type="text/x-jquery-tmpl">
		<dt>${title}</dt>
		<dd>${description}</dd>
	</script>
	</dl>
</div>

dt+dd要素をhtml側に記述しているのがわかります。

使い方としては script要素の type属性 に “text/x-jquery-tmpl”を記述し、idを振ります。
Ajaxで取得することが予想される書籍リストの情報、Jsonオブジェクト(オブジェクトリテラル)のプロパティ(今回は${title}や${description})を記述しておきます。

Ajaxで取得したデータをテンプレート(id=”bookListTemple”)に割り当てるJavaScriptのコードはこのようになります。

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script type="text/javascript">

/*
 *	Ajax処理の結果
*/
var result = [
		{ "title":'逆襲ノマド', 		"description": '新しい仕事' 	},
		{ "title":'黄昏サスペンデッド', "description": '今日は早く帰ろう'	},
		{ "title":'やる気 not Fount!', 	"description": 'ノーコメント'		}
	];

(function($){
	$( "#loadTmpl" ).click(function(e){

		// テンプレートの記述場所によっては注意が必要
		// (scriptタグごと消える)
		//$("#bookList2").children().remove();

		//result = Ajax処理の結果とか
		var jsonAray = result;

		var bookList = $( "#bookList2Tmpl").tmpl( jsonAray );

		$("#bookList2").append( bookList );

	});
})(jQuery);
</script>

これでJsonデータのプロパティさえしっかり割り当てていれば、デザイン側の編集は簡単に行うことができます。
今回は配列に複数個の書籍データを同じプロパティ名で指定していますが、このあたりは上手く複数個(ループ)処理してくれるようです。

本当はテンプレート内にdl要素を記述できればいいのですが、同一プロパティを複数個割り当てる場合は、子要素のみの記述になりそうです。

また、この例では追加するdl要素内にscriptタグを記述していますが、DOM操作に注意が必要です。

例えば、dl要素内のdt+dd要素をクリアするつもりで

$("#bookList2").children().remove();

と記述すると、dl要素内のscriptも無くなってしまいます。
この場合はちょっと視認性が落ちますが、head内に移動するなどの必要がありそうです。

サンプルデモ

jQuery Templeteのデモ

考察

最近、特にJavaScript上からAjaxなどでデータを取ってくる事が多く、しかも構造が複雑になってきているので、jQuery Templeteを上手く使いこなせば相当コードの見通しが良くなると思います。
なにより、表示と処理ロジックが分離出来るということはデザイナーさんと分業する場合に非常に効果的だと思いました。

CSSNite LP18 「その先にあるjQuery」 参加レポート


9/17 東京で行われたCSSNite LP18 「その先にあるjQuery」 に参加してきました。
今回のCSSNiteはダブルヘッダーで、前半はLP17が行われました。

CSSNite LP18
http://lp18.cssnite.jp/
Togetter – CSS Nite LP18「その先にあるjQuery」
http://togetter.com/li/189149

実はいままで仕事では全く使っていないjQuery。その先の・・・というタイトルが付いている通り、jQueryをこれからも使っていく上で重要なパフォーマンス改善 / 新機能を知ることができる大変貴重なセミナーとなりました。

普段jQueryを使っていて、深く掘り下げて調べる機会がなかったのですが、全く知らない使い方が紹介されていて非常に面白い内容でした。

jQuery高速化

西畑 一馬 (@KazumaNishihata) さんのセッションはjQueryの高速化についてでした。
何も考えずにjQueryを使っているだけでは (特にモバイルデバイスなどに非力な環境では)、パフォーマンスが非常に悪くなる。
JQueryのマジックボックスにDOMを入れて操作するには、なるべくコンパクトにまとめた形にして、蓋を開けたり閉めたリする回数はなるべく少なくしましょう。(意訳)
といったお話でした。

Rich JavaScript Application

前半は徳田 和規 (@5509) さんのjQuery注目の機能のお話。
jQuery TemplatejqXHRとかDeferred Objectとかevent delegationでバブリングとか盛りだくさんでした。
面白い話ばかりだったので機会があったらそれぞれ掘り下げていきたいと思います。

カーソルが大きいねたとか、カーソルが大きいネタとか、大阪でも見たので割りとスルーな感じで(ry

(追記)
jQuery Templateについてちょっと調べてみた
(追記終わり)

後半は高津戸 壮 (@Takazudo) さんが製作された、「ポチってもうたー」というサービスの機能やUIを例に、少単位の機能を切り出して考えることでメンテナンス性を上げる設計や開発工程をもっと見通しの良くしよう。
また、jQueryではプラグイン化することが容易で、コンポーネント化することで他のサービズでも流用してハッピーになりましょう(超意訳)
といった内容でした。

まとめ

この日はLP17とあわせて6時間という、非常に長いセミナーでしたが、非常に内容が濃かったです。
個人的にはJacaScriptの仕様もしっかり勉強しないとなと思いました。

スピーカーのみなさん、参加者のみなさんお疲れ様でした。
東京まで行った甲斐がありました!