Slide 1

Slide 1 text

PHPハウトゥ ー実際のサイトからの視点ー 第1回山陰PHP勉強会 山陰ペチパーズ 藤原慎太郎 2016/10/01

Slide 2

Slide 2 text

今日は、ちょっとしたPHPテクを紹介します。 私は、PHP を趣味で楽しんでいる人です。 AWS を個人で契約して Web サーバをたてて、全世界に情報を発信しています。 (来てくれた人に話すことを話す) では、始めます。

Slide 3

Slide 3 text

情報発信に大切なもの ー 動機と継続 動機 全ての要求の源であり、継続性を保つための原動力 これやりたい、あんなことしたい、できたら楽しそう 継続 ポテンシャルを維持して改善していくために必要 動機の源を断ち切らせない

Slide 4

Slide 4 text

動機 ー 何が動機になりうるか? それが好きだから 自分を知ってほしいから 感動を共有したいから

Slide 5

Slide 5 text

継続 ー 動機を断ち切らせない 自分自身が楽しくいられる 発見がある 変化を取り入れられる

Slide 6

Slide 6 text

これらを満たすもの ー 楽しくておもしろい ー PHPじゃろ

Slide 7

Slide 7 text

このサイト・・・そうなんです、PHP使ってます

Slide 8

Slide 8 text

ページのコンセプト あらゆるヘヴィメタバンドの あらゆる youtube 映像がエンドレスで流れる。 業界の最新情報がわかる バンド検索機能がある アーティストの詳細がわかる コンサート情報や、日本のヘヴィメ情報がわかる 主に日本からの多くのアクセスを期待

Slide 9

Slide 9 text

ページの現状 約300のヘヴィメタバンドの 約1900曲の youtube 映像がエンドレスで流れる(最近、使 用しているGoogle API が obsolete になり、ループしなくなった(現在修正中))。 業界の最新情報がイケてない翻訳で表示される。 バンド検索すると、検索結果が表示されクリックするとバンドの画像が流れる。 アーティストの詳細はほとんど入っていない。 コンサート情報や、日本のヘヴィメ情報は、数年前から入っていない。 誰も見に来ない。アクセスの9割以上は自分。

Slide 10

Slide 10 text

今日紹介できるこのページのテク ここです

Slide 11

Slide 11 text

今日紹介できるこのページのテク a を入れます。ボタンはないので、た だ入れるだけです。

Slide 12

Slide 12 text

今日紹介できるこのページのテク an を入れます。

Slide 13

Slide 13 text

このサーバは AWS t2.micro (Memory 1GB, HD 7.9 GB) 約月25$ 上に構築した、Fedora24 (SELinux 有効)をベースに 、以下のソフトを入れている(関係あるもの)。 httpd-2.4.23-4.fc24.x86_64 php-5.6.25-1.fc24.x86_64 postgresql-9.5.4-1.fc24.x86_64 DNSは、no-ip (無料)を利用。1ヵ月に1回、再設定が必要。

Slide 14

Slide 14 text

ここで出しているのは、単なるバンド名 a を入れます。ボタンはないので、た だ入れるだけです。

Slide 15

Slide 15 text

では、実際のコードはどうつくったのか。 2013年に私が作りました(すっかり忘れている)。 2016年の今日、思い出しながら解説します。

Slide 16

Slide 16 text

今日のお話ー私は以下の機能をどう作ったか 1 検索窓に入れるたびに結果が表示される 2 youtube data api の検索機能を使って、ビデオ をループさせる

Slide 17

Slide 17 text

1 検索窓に入れるたびに結果が表示される

Slide 18

Slide 18 text

ここでの MVC Model - ヘヴィメタバンドのデータ(PostgreSQL) View - HTML、Smarty2、jQuery Control - PHP、Ajax ちなみに、このサイトでは、Web フレームワークは 使っていない

Slide 19

Slide 19 text

http://heavymetalhardrock.no-ip.info/ にアクセスすると、AWS上のサーバの httpd.conf の設定により、/var/www/html/index.php を叩く。 display("index.tpl");

Slide 20

Slide 20 text

では、/var/www/Smarty/HeavymetalhardrockSmarty.class.php を見てみる。

Slide 21

Slide 21 text

では、/var/www/Smarty/heavymetalhardrock/templates/index.tpl を見てみる。

Slide 22

Slide 22 text

/var/www/Smarty/heavymetalhardrock/templates/index.tpl クリックすると、showBandNull(); が呼 び出される。

Slide 23

Slide 23 text

/var/www/Smarty/heavymetalhardrock/templates/index.tpl 何か文字を入力すると、loadListCount() と、loadList() が呼び出される。

Slide 24

Slide 24 text

/var/www/Smarty/heavymetalhardrock/templates/index.tpl loadListCount() は、入力文字を PHP スクリプトに引き渡し、#output に表示する。 loadList() は、同じく、入力文字を PHP スクリプトに引渡し、#bandList の子オブジェク トを消去して、#bandList に表示する。

Slide 25

Slide 25 text

/var/www/Smarty/heavymetalhardrock/templates/index.tpl 入力文字は、loadListCount() により PHP スクリプトに引き渡され、PHPスクリプトは結 果を #output に表示する。同じく、loadList() により 別のPHP スクリプトに引き渡され、 そのPHPスクリプトは、#bandList の子オブジェクトを消去して、結果を #bandList に表 示する。

Slide 26

Slide 26 text

/var/www/Smarty/heavymetalhardrock/templates/index.tpl では、PHPスクリプトを見てみます。 php/loadListCount.php php/loadList.php

Slide 27

Slide 27 text

/var/www/heavymetalhardrock/php/loadList.php PHPスクリプト自体は、大 したことをしていません。 データベースにアクセスし て、テーブルに流すだけで す。

Slide 28

Slide 28 text

2 youtube data api の検索機能を使って、ビデオ をループさせる

Slide 29

Slide 29 text

機能:検索文字を入れると、検索結果の video が50件ロードされ、ループ再生する。

Slide 30

Slide 30 text

使っているGoogle 機能(その1):YouTubePlayer

Slide 31

Slide 31 text

使っているGoogle 機能(その2):YouTube Data API

Slide 32

Slide 32 text

使っているGoogle 機能(その2):ここに snippet と入力する

Slide 33

Slide 33 text

使っているGoogle 機能(その2):ここに 検索文字を入力する(今回は、「 dokken」と入力した)

Slide 34

Slide 34 text

使っているGoogle 機能(その2):Auth しないで、検索してみる

Slide 35

Slide 35 text

使っているGoogle 機能(その2):検索結果が表示された ここを参考にして、PHPスクリプ トを作りました。

Slide 36

Slide 36 text

使っているGoogle 機能(その2):検索結果が表示された 必要な項目をピックアウトできま す。

Slide 37

Slide 37 text

使っているGoogle 機能(その2):http://heavymetalhardrock.no-ip.info/youtube.php の中身 PHPは、html と一緒に書けま す。 検索文字を受け取っています。

Slide 38

Slide 38 text

使っているGoogle 機能(その2):http://heavymetalhardrock.no-ip.info/youtube.php の中身 取得したキーを入れます。件 数は最大50件まで可能です。 YouTube Data API の検索結果 のページでやってみたものを元 にコード化しています。

Slide 39

Slide 39 text

使っているGoogle 機能(その2):http://heavymetalhardrock.no-ip.info/youtube.php の中身 配列に値を代入して、表示を させてみました。 json形式にすることで、 javascript の配列にコピーす ることが可能です。

Slide 40

Slide 40 text

使っているGoogle 機能(その2):http://heavymetalhardrock.no-ip.info/youtube.php の中身 YouTube Playerの部分で す。 javascript の配列にコピーし ています。

Slide 41

Slide 41 text

今日のまとめ: 動機:全ての要求の源であり、継続性を保つための原動力 継続:ポテンシャルを維持して改善していくために必要( 動機の源を断ち切らせない) PHPの利点:自由に書ける。ちょっと書くのも、フレームワーク使うのも自由。 教紹介したテク: 1. Ajax, jQuery と連携した検索機能 2. YouTube Data APIを活用した検索機能 紹介したサイト: heavymetalhardrock.no-ip.info 紹介したページ: heavymetalhardrock.no-ip.info/youtube.php 参考にしたページ:資料で上げているページの他、以下のページを主に参考にしました。有益な情報を提供し ていただいていることに感謝申し上げます。 http://www.tam-tam.co.jp/tipsnote/javascript/post6217.html https://syncer.jp/how-to-use-json ちなみに、ページは引き続き改修中です。youtube.php の機能をトップページに取り込む感じです。ではま た。。

Slide 42

Slide 42 text

終わり 山陰ペチパーズ 藤原慎太郎