画像アップロード型掲示板

dtn.jpは趣味でやってる個人サイトですが、本業?副業?でもWEB制作を依頼されてやっていたりします。

そちらの方で画像アップローダーを用意する必要がでてきたので、勉強がてらアップローダーを作り、そのプログラムコードを元にサイトとしてみたのが画像掲示板の泉(当時は画像掲示板dtn)でした。

画像掲示板の作り方

GDライブラリでサムネイル作成

画像アップロードだけであれば簡単にできますが、サムネイル画像を生成するとなると少々厄介になります。サムネイル生成についてはGDライブラリを使ってこのような流れで実現しています。

①getimagesize()でアップロードファイル情報を解析
②imagecreatefrom○○○()で画像ファイルを読み込み
③imagecreatetruecolor()で縮小画像の土台を作成
④imagecopyresampled()で取得画像をリサイズしてコピー
⑤image○○○で画像を出力

GDライブラリで画像のサムネイルを作成する

仕事で用意するアップローダーについては、画像アップとこのサムネイル生成、アップ画像の削除機能があればよかったのですが、画像掲示板サイトとするのであれば、これを投稿毎にまとめて表示したりととスレッド毎の投稿データ保存の部分を作りこむ必要があります。

スレッド毎にログファイルを制作

投稿情報はログファイルにこのような形式で保存をすることで実現してあります。

%s<>%s<>%s<>%s<>%s<>%s・・・<>%s<>%s<>%s<>\n

この改行までの1行を1スレッドとして保存していき、スレッドに投稿があった場合は<>で情報を追記し、該当行を1行目まで移動することで、更新スレッドを最初に表示するようにしてみました。

突貫で制作した割には、そこそこな作りにできたのではないでしょうか。

フレームレイアウトをやめる

メニューフレーム掲示板コンテンツ一覧ページ

最初は左フレームに掲示板ジャンルを並べて、右側に掲示板スレッドを並べる形でHTMLのフレームで分割したページにしていましたが、フレームサイトは検索エンジンと相性が悪いようで、フレームの右だけ、左だけが検索にヒットしてしまい、frameset定義を入れたindex.htmlがヒットしないという残念な状況になってしまっておりました。

このため、フレームサイトをやめ、普通の一枚htmlのサイトになるように全体を修正してみました。

おわりに

まだまだ投稿もない自己満足の画像掲示板となっておりますが、少しずつバージョンアップをしておこうと思います。よろしくお願いいたします。

PHPが学べるおすすめプログラミングスクール

この運営ブログをみて、もしdtn.jp管理人のようにサイトをゼロから作ってみたいという思いに駆られた方は、サイト開発やプログラミングをオンラインで受講できるプログラミングスクールの活用をしてみてはいかがでしょうか。サーバ/WordPress/HTML/CSS/JS/PHP/SQLなどの基本さえ分かれば、ゼロからサイト立ち上げもポンポンできるようになって、今なら仕事や転職にも役立つのでオススメです。

PHPも学べるオンラインスクール

  • CodeCampAWS Cloud9を使ったクラウド上のIDEが用意されているので、ネットにつながればスタート開始可能というゴージャスなスクールです。講師も選べて、Webマスターコースならプログラミング経験0でも一気にフロントエンドからバックエンドまでマスターできます。
  • ウェブカツJava言語やRuby言語なんぞ教えん!という、初心者にありがちな挫折ポイントがよく分かってるスクールです。フロントエンドエンジニアに必要なスキルセット&PHPがマスターできます。
  • フリークス HTML/CSSから始まり、MySQLやLinuxからPHPの変数や分岐やループ、クラスやPDOに最後はMVCまで教えてくれるので、そこまで分かればなんでもできそうです。メンターに質問もし放題がいいですね。
  • テックアカデミー法人のIT研修もやってる業界最大手・受講者数No.1のスクールです。メンターとの定期オンライン面談やチャットサポートなどもあり、大手ならではインフラ環境がウリです。PHPと合わせてjQueryもマスターできる、PHP/Laravelとフロントエンドコースがおすすめです。

オンラインスクールのデメリット

孤独になりがちなサイト制作も、優しいメンターがそばにいてくれれば凄い楽しそうですが、もちろんデメリットもあります。お金がかかるという点です。ひたすらググって、本を読んでよりは確実にコストがかかってしまいます。とはいえ、多少の余裕があるなら、こんなご時世なので時間と労力を買った方が良いと思います。