Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Net commonsアドオンモジュールセミナー第4回小ネタ集

48,614 views

Published on

NetCommonsモジュール小ネタ集
・日誌モジュールへのfacebook「いいね!」ボタンの付け方
・メールのスレッド対応クイックハック
・パブリックスペースの閲覧制限モジュール

Published in: Education
  • Be the first to comment

  • Be the first to like this

Net commonsアドオンモジュールセミナー第4回小ネタ集

  1. 1. モジュール小ネタ集 <ダウンロード付き> NetCommons アドオンモジュール セミナー第4回目※NetCommonsは[大学共同利用機関]情報・システム研究機構の登録商標です。 0
  2. 2. 自己紹介今回は自己紹介に凝ってみました。 (*^。^*) 1
  3. 3. 自己紹介。その①本名:永原 篤 ながはら あつしハンドル:永原 ひつじtwitter@nagasheepfacebook:atsushi.nagahara趣味:山登り 2
  4. 4. 自己紹介。その②株式会社オープンソース・ワークショップ代表取締役• データベースが必要なWebサイト構築が 得意。NetCommonsをベースに、モ ジュールをアドオンしたりして開発。http://opensource-workshop.jp 3
  5. 5. 自己紹介。その③内閣府認証NPO法人コモンズネット 理事• NetCommonsの情報交換には、コモンズ ネットに入るしかないでしょう。• ビジネスでNetCommonsを使われている 皆さん、もちろん(^-^)コモンズネット の会員様ですよね?http://www.commonsnet.org 4
  6. 6. 自己紹介。その④PHP技術者認定機構 副理事長 COO• PHPの試験団体を運営しています。• 協賛会社を募集しています。費用は無料。 仕事でPHPをお使いなら、協賛して頂け れば、会社Webへリンクも貼りますよ。• 学割もスタートしました。http://www.phpexam.jp 5
  7. 7. 自己紹介。その⑤OSSコンソーシアム 理事兼CMSビジネス部会リーダ• OSSを扱う企業が集まった業界団体です。• 組み込みやビジネスアプリなど、いくつかの部 会があります。• 業界団体として情報発信することで、会社のブ ランド力を高めませんか。• イベント:CMSインサイド。毎月開催中http://osscons.jp 6
  8. 8. おまけみなさん、NetCommonsの公式キャラクター、陽菜ちゃんのツイッターはフォローしていますか? 7
  9. 9. 陽菜ちゃんtwitter twitter@MidorikawaHina• イベントなどの情報もつぶやいています。• NetCommons情報のGetには欠かせません! 8
  10. 10. おまけ②今年のNetCommonsユーザカンファレンスは一味違う!http://www.netcommons.org/userconf/ビジネスを意識したイベントになっています。事例紹介も多くある。無料です。懇親会もたった1,000円!!8/7(火)です。いますぐ申し込みを! 9
  11. 11. 宣伝はやりきったのでいよいよ本題に入りたいと思います。 10
  12. 12. 日誌の facebook「いいね!」対応 NetCommons アドオンモジュール セミナー第4回目※NetCommonsは[大学共同利用機関]情報・システム研究機構の登録商標です。 11
  13. 13. facebook「いいね!」最近、世間を騒がせているfacebookみなさん、facebookって何?とかの説明は要らないですよね?NetCommonsの日誌も、facebookへの投稿ボタンがあります。しかし!facebookといえば「いいね!」 12
  14. 14. facebook「いいね!」「いいね!」の効果があるとかないとかケースバイケースだとか、世間では分析記事もたくさんありますが。単純ミーハー技術的興味で「つけてみたいから付けてみました!」ということで、方法の公開です。 13
  15. 15. 「いいね!」ポイント① … サンプル② … 注意点③ … appId④ … OGP⑤ … 日誌モジュールPHP側⑥ … サイトのヘッダ部分⑦ … 「いいね!」ボタンのジェネレート⑧ … 日誌モジュール画面側 14
  16. 16. ポイント① … サンプル弊社Webサイトで試しています。 この部分 15
  17. 17. ポイント② … 注意点カスタマイズ例はNetCommons2.3.3.0です。たぶん、最新でも動くと思いますが、試してください。(永原が忙しすぎて最新で試せなかった。申し訳ない。。。)既存ファイルをカスタマイズします。アップデートなどは自己責任ですよ。 16
  18. 18. ポイント③ … appId「いいね!」ボタンを付けるには、facebookにサイトの情報を登録し、appId(App ID/API Key)というものを取得する必要があります。URLは以下。ここの詳しい情報はググってください。https://developers.facebook.com/apps/ 17
  19. 19. ポイント④ … OGPOGPって何?Open Graph ProtocolWebサイトの情報を表す方法の一つ。facebookはこの方法を採用している。詳しくはググればいっぱい出てきます。 18
  20. 20. ポイント④ … OGPの動き日誌詳細画面 facebook 詳細画面の PHPロジック 必要な情報を 画面に渡す OGP情報 ページ確認 HTMLの<head>タグ内 appId いいね!ボタン いいね! 日誌の詳細画面テンプレート appId カスタマイズが必要なのは3ヵ所 19
  21. 21. ポイント⑤ … 日誌PHPJournal_View_Main_Detailクラス• webapp/modules/journal/view/main /detail• カスタマイズ内容はソース見ながら。• ポイントは以下2つの変数をテンプレー トに渡しているだけ。facebook_og_urlfacebook_og_image 20
  22. 22. ポイント⑥ … ヘッダ部分header.html ファイル• webapp/templates/main• カスタマイズ内容はソース見ながら。• ポイントは以下<html> タグの追加属性<meta>で以下の情報を出力og:locale、og:title、og:type、og:url、og:image、og:site_name、fb:app_id 21
  23. 23. ポイント⑦ …「いいね!」ボタン「いいね!」ボタンへのリンクはfacebook内の以下のURLで生成できます。http://developers.facebook.com/docs/reference/plugins/like/いくつかの方式の出力がありますが、今回はiframe方式を使用しています。 22
  24. 24. ポイント⑧ … 日誌詳細画面journal_view_main_item.html ファイル• webapp/modules/journal/templates/default• 良い子はdefaultをコピーして、別テンプ レートでやりましょう。• カスタマイズ内容はソース見ながら。• ポイントは以下⑦で生成した「いいね!」ボタンを埋め込む 23
  25. 25. 「いいね!」対応ここまでさあ、時間は大丈夫かな? 24
  26. 26. 掲示板メールのスレッド対応 NetCommons アドオンモジュール セミナー第4回目※NetCommonsは[大学共同利用機関]情報・システム研究機構の登録商標です。 25
  27. 27. 掲示板メールのスレッド対応 お題2つ目。掲示板メールのスレッド対応これは、以前2.3.3.0で実験し た時の結果を報告します。 参照実装コードもあり。 26
  28. 28. 結果イメージ(画面側) 画面側はカスタマイズしていません。 27
  29. 29. 結果イメージ(メール側) 画面側と同じスレッド表示が出来てますね。 28
  30. 30. 掲示板メールのスレッド対応プロトコルの話があります。さあ、これを眠らずに聞ける人は何人いるか!!wセミナーでは「さらっと」やりますね(^^) 29
  31. 31. メールスレッド:目的NetCommons には掲示板、日誌にメールでの通知機能がある。これは非常に便利である。しかし、このメールはスレッド対応していないため、記事の経緯を追い難い。そこで、掲示板のメール送信機能をスレッド対応させてみた。 30
  32. 32. メールスレッド:実験結果意図していた通りのスレッド対応が行えた。ただし、複数のファイルにカスタマイズが必要であった。 31
  33. 33. メールスレッド:検討ポイント①--- 記事周知のメールにスレッドが必要かWebを見ればスレッドになっている、というのは確かなんですが、メールソフト内でもスレッド表示できるるのは、やっぱり便利かなと思います。 32
  34. 34. メールスレッド:検討ポイント②--- メールを識別する Message-ID のフォーマットRFC2822 を参考にします。ユニークにする、という部分がポイント。BASE_URLの値(NetCommons のURL)を使用します。localhost の場合は、テストなどいろいろしていたら、スレッドがおかしくなる可能性もありますが、 localhostは特殊な環境ということでOK かなと。 33
  35. 35. メールスレッド:実験環境// NetCommons バージョン参考実装は 2.3.2.0 に対して行った。 34
  36. 36. メールスレッド:スレッドについてMessage-ID、In-Reply-To、ReferencesRFC2822http://www.ietf.org/rfc/rfc2822.txtRFC2822 - 日本語翻訳されているページhttp://srgia.com/docs/rfc2822j.html 35
  37. 37. メールヘッダ拡大 36
  38. 38. NetCommons のメール送信処理PHPMailer を使用している。Version: 2.0.0 rc3PHPMailer のメインとなるclass.phpmailer.php はカスタマイズされていない。 37
  39. 39. Message-ID, In-Reply-To, References--- 基本RFC2822 を参考に実装する。 38
  40. 40. Message-ID"Message-ID:" フィールドはユニークなメッセージ識別子を提供する。これは、掲示板の場合、以下のように設定できる。<bbs_[post_id]@[BASE_URL]>[post_id] は掲示板のキー[BASE_URL] はNetCommons のURL例:<bbs_9@opensource-workshop.jp/nc> 39
  41. 41. In-Reply-To"In-Reply-To:" フィールドは、返信しようとしているメッセージの "Message-ID:" フィールドの内容を含む。例:<bbs_8@opensource-workshop.jp/nc> 40
  42. 42. References"References:" フィールドの内容は、親メッセージの "References:" フィールドの後に親メッセージの "Message-ID:" フィールドの内容を続けたもの。例:<bbs_7@opensource-workshop.jp/nc><bbs_8@opensource-workshop.jp/nc><bbs_9@opensource-workshop.jp/nc> 41
  43. 43. NetCommons 2.3.2.2 での参考実装①以下、参考実装の圧縮ファイルに含まれています。// 掲示板の共通コンポーネントにメールスレッド用ヘッダデータ(Message-ID、In-Reply-To、References)を生成して返す関数を追加webapp/modules/bbs/components/View.class.phpfunction getMailThreadHeader() を追加// 掲示板メール送信から、NetCommons メールコンポーネントのsend() を呼ぶ際にメールスレッド用ヘッダデータを渡すwebapp/modules/bbs/action/main/mail/Mail.class.php 42
  44. 44. NetCommons 2.3.2.2 での参考実装②続き// NetCommons メールコンポーネントから、PHPMailer のsend() を呼ぶ際にメールスレッド用ヘッダデータを渡すwebapp/components/mail/Main.class.php// PHPMailer のsend(), CreateHeader() をカスタマイズして、メールヘッダにMessage-ID、In-Reply-To、References を設定する。maple/includes/mail/phpmailer/class.phpmailer.php 43
  45. 45. 掲示板メールのスレッド対応:完了ちゃんと寝ずに聞いてた人は ダウンロードしてね。 44
  46. 46. パブリックスペースの 閲覧制限モジュール NetCommons アドオンモジュール セミナー第4回目※NetCommonsは[大学共同利用機関]情報・システム研究機構の登録商標です。 45
  47. 47. まずは画面でhttp://lime.opensource-workshop.jp/jumptest/デモします!非常に簡単なデモです。 46
  48. 48. 肝は?httpステータス301 Moved Permanentlyを返しているだけです。 47
  49. 49. 肝のファイルとコードpagejump¥view¥main¥init¥Init.class.phpheader( "HTTP/1.1 301 Moved Permanently" );header( "Location: " . $this->env[url] );ブロックが表示された時に動く部分です。 48
  50. 50. 注意点①現在のコードでは 301 固定です。ブロックごとに選べるようにしたいんですが、今は時間が取れず(>_<)用途に合わせて302(found)や307(Temporary Redirect)に変更してください。 49
  51. 51. 注意点②この方法はNetCommons的なルールに則っているわけではありません。たまたま、NetCommonsが出力をバッファしてから処理しているので、NCがhttpレスポンスを返す前に、モジュールで勝手に処理してるだけです。将来のバージョンアップでどうなるかはわからないですよ。ということ。 50
  52. 52. 注意点③モバイル対応していません。モバイルではページが見えるので要注意。モバイル管理で隠しページにしてください。 51
  53. 53. 注意点④ページ内の他のブロックを指定されたら見えます。http://lime.opensource-workshop.jp/?action=announcement_view_main_init&block_id=70NetCommonsは基本的に、ブロック単位でのアクセスが可能です。 52
  54. 54. 注意点⑤ここまでの注意点を理解頂き、その上で使えるとことにお使いください。あえて見せたくはないが、ブロック指定までして来たら仕方なし。という用途を想定。 53
  55. 55. ダウンロードURL NetCommons アドオンモジュール セミナー第4回目※NetCommonsは[大学共同利用機関]情報・システム研究機構の登録商標です。 54
  56. 56. 天の声 ちゃんと寝ずに聞いてた人か、陽菜twitterをフォローしてくれた人は ダウンロードしてね。 55
  57. 57. 本日のセミナー資料ソース関係http://netcommons.opensource-workshop.jppptスライドhttp://opensource-workshop.jp/press/ 56
  58. 58. ありがとうございましたお問い合わせ&お仕事依頼は株式会社オープンソース・ワークショップhttp://opensource-workshop.jp 57

×