俺氏、本を読む

30歳になるまでに本を読んで勉強しようかと。主に啓発、お金についての本を読むつもり。一応プログラマーなのでその辺のことも。あと、せどり(転売)の仕入れ見込み商品をリサーチして仕入先と一緒に投稿します

【PHP】「おーぷん2ちゃんねる」の画像とかをヌク【準備編】

元々は、アダルト系のマッシュアップサイト的なものを作りたいと思っていたのだけど、お金がないのでアダルト可能なレンタルサーバー、もしくはVPSを借りるのも何となく尻込みしちゃう。
そもそも作り方をちゃんと把握してないので、行き当たりばったりで作ると時間を無駄にしそう!じゃあ練習しよう!
ってことで転載自由な「おーぷん2ちゃんねる」から画像とか抜いてみた。
スクレイピング」→「DB登録(MySql)」→「画面表示」
が出来ればとりあえずいいかな?という感じ。
先に言っておくと、スレッドの内容取得(datファイルから)が失敗しまくりでダメw
板(サーバー)によっては取得しやすかったりするのですけど、とりあえず原因は分からなかったので放置してます。

サイト

とりあえず練習で作ってみたサイト

おーぷん2chお絵かきログおーぷん2chお絵かきログ

準備したもの

簡潔にしか書かないよ!

サーバー

転送量がどれぐらい必要かとかよく分からなかったのですけど、
「エックスサーバー」の一番安い「X10プラン」で50GB/日まで大丈夫っぽいので「エックスサーバー」を選択。

レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

PHP

PHPのバージョンはデフォルトだと5.3だったかな?
なので5.4にバージョンアップしました。
5.3のままだと何かが使えなかったんですけど、何が使えなかったか忘れてしまったw

ドメイン

とりあえず「VALUE DOMAIN」で新規ドメインを2つ取得。
スクレイピング&DB登録用に1ドメイン
実際にサイトとして表示するように1ドメイン
意味あるか分かんないけどとりあえず2つに分けてみた。

VALUE DOMAIN:バリュードメインVALUE DOMAIN:バリュードメイン

DB

「エックスサーバー」では「phpmyadmin(MySQL5)」が標準であるので簡単に作成できる「MySql」を使用します。

CSS

レイアウトはスマホ対応とか色々時間掛けたくなかった&シンプル!にしたかったので「Simple Sidebar」を使用。

Simple Sidebar - Bootstrap Sidebar Template - Start BootstrapSimple Sidebar - Bootstrap Sidebar Template - Start Bootstrap
実際にはちょいちょいカスタマイズはしてます。

使用したjQueryプラグイン的なもの

Lazy Load

画像の遅延読込をしてくれるプラグイン
作成当初はページング機能とか面倒で作る気なかったので、とりあえず入れとこうかと思って入れたプラグイン
結局、今はajaxで追加読込するようにしてるので結局必要なかったかもw
というか後述の「Masonry」と関連するので使わない方が画面がグニャグニャ動かなくなって見やすくなると思うw
でも面倒&グニャグニャも面白い!ので放置

www.appelsiini.net | 522: Connection timed outwww.appelsiini.net | 522: Connection timed out
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」: 小粋空間画像を遅延ロードする定番jQueryプラグイン「Lazy Load」: 小粋空間

Masonry

Masonryは要素をレンガ造りみたいな感じで配置してくれるプラグインです。
画像の一覧を表示する際に、BootStrapのcssで定義されている「col-xs-」とかでパネルっぽい表示にしようと思ってたのですけど、画像の高さとかスレッド名の長さとかで隙間ができて綺麗にパネルっぽく並んでくれなかったので使用しました。

MasonryMasonry
ただ、Masonryは画像読込後に実行するようにしないと要素同士が重なったりして正確な配置ができなくなるので、imagesLoaded.jsを使用します。
あと、ajax等で動的に画像を追加するような場合は以下の記事が参考になります。
masonry + ajaxでpinterest風タイルビューを実現する - Qiitamasonry + ajaxでpinterest風タイルビューを実現する - Qiita

imagesLoaded.js

画像の読込が完了してから関数を実行させたい場合等に使用。
たぶんLazy Loadみたいに画像の遅延読込や、ajaxとかで動的に画像を追加したりアニメーションを多用するような場合は必要になると思う。

ImagesLoadedImagesLoaded
画像がちゃんと読み込まれたら実行 を実現する ImagesLoaded ! | あらかぜ手帖画像がちゃんと読み込まれたら実行 を実現する ImagesLoaded ! | あらかぜ手帖
 
とりあえず準備としてはこんだけ。

お次は実際にカテゴリを取得してDBに登録・更新する方法を紹介します。