ここまで出来る！覚えとくと便利な「プログラム」サンプルまとめ

• 作成：2013/08/5
• 更新：2014/11/01
• Web制作 >

食材を扱っているお客さんから、「ECサイト」を作ってくれと頼まれたので作成しました（事情により、CMSは使えず）。さらにメンテンスが楽になるように更新やSEOを自動化しました。今回は、CMS（WordPressとかEC-CUBEなど）を使わず仕組みを作るときに参考にした「プログラムサンプル」のまとめです。

プログラムの勉強にもなり、「へぇ～こんなことも出来るんだ」と思ったもの。今回は（PHP／jQuery／js）です。

エンジニア速報は Twitter の@commteで配信しています。

一般

画像／PHP
１．画像リサイズ
２．画像に字を書く
３．画像の拡大・縮小・サムネイル出力
４．グラフの描画
５．画像エフェクト２５個

URL／PHP
６．ページのURLを取得
７．URLの中身（HTML）を取得
８．URL自動リンク
９．ページを強制的にジャンプ
１０．RSSやXMLを読み込む

時間、セキュリティ／PHP
１１．タイムスタンプ
１２．著作権表示の年を自動更新
１３．予約表示／自動更新
１４．スクリプトを自動実行
１５．ショッピングカート
１６．ユーザー認証

文字列／PHP
１７．文字列の一部を取得
１８．文字列の一部を置換

メール／PHP
１９．メールを送る
２０．メール自動返信
２１．パスワード認証

ファイル／PHP
２２．ファイルを作成
２３．csvファイルを読み込み
２４．Excelファイルを出力
２５．PDF作成

その他／PHP
２６．ページャー
２７．カレンダー
２８．QRバーコード
２９．動画の１シーンを画像として保存

音／jQuery・JavaScript
３０．マルチトラックの音楽を作成
３１．動画、音楽プレイヤー
３２．Youtubeプレイヤーを作成

文字／jQuery・JavaScript
３３．リアルタイムに文字数、段落、単語数を計算して表示
３４．テキストを均等割り
３５．自動振仮名入力

Google Analytics／jQuery・JavaScript
３６．Googleアナリティクス／行動フロー記録
３７．Googleアナリティクス／スクロールイベントを取得
３８．Googleアナリティクス／参照元/メディア」などををカスタム変数にセット

グラフ／jQuery・JavaScript
３９．フラットデザインぽいグラフ
４０．折れ線グラフ

デザイン／jQuery・JavaScript
４１．CSS html5に対応させる
４２．スクロールにあわせて回転

画像／jQuery・JavaScript
４３．イメージを拡大表示
４４．背景グラデーション
４５．モーダルダイアログ／ポップアップ

その他／jQuery・JavaScript
４６．右クリックを禁止
４７．もっと読む、を簡単に実装

時間／jQuery・JavaScript
４８．日付カレンダー

画像／PHP

１．画像リサイズ

PHPでの画像のリサイズ、切り抜きができる画像編集ライブラリ(class.image)。画像の編集が楽になります。PHP+GDによるプログラミングの基礎はこちら。

• PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」:phpspot開発日誌
• GDモジュールを有効にする - JpGraphのインストールと環境設定 - JpGraphを使ったグラフの描画

２．画像に字を書く

ImageTTFText関数を使う方法など。もう一つは２つの画像を合成したり、文字を書き込む方法。

• livedoor Techブログ : PHPのImagickを使って合成画像を作ってみる
• 画像に字を書く｜離れPHP島

３．画像の拡大・縮小・サムネイル出力

GDとは簡単に画像の作成や編集をするためのライブラリです。以下はPHP用グラフィックライブラリGDの使い方。

• Geekなぺーじ:PHP GDプログラミング

４．グラフの描画

グラフを作成できるJpGraphの導入や使い方。GDインストール方法も載せてあります。

• PHP でグラフを作る (gd/JpGraph編)

５．画像エフェクト２５個

ImageMagickのフィルタまとめ。レベル補正、ぼかし、合成、分割など。画像編集ソフトいらずです。

• PHPのImageMagickによる25個＋αのフィルタまとめ - NAVER まとめ

URL／PHP

６．ページのURLを取得

とても簡単で超基本的なURL取得方法。現在表示しているページのURLを取得する方法。

• PHPで現在アクセスされているページのURLを取得する - hoge256ブログ

７．URLの中身（HTML）を取得

指定したサイトの中身（HTML）をゴッソリ取得する方法。悪用しないように。

• PHPで指折りに便利なfile_get_contents関数を使いこなす （前編） - ホリデープログラミング入門 - Yahoo!ブログ

８．URL自動リンク

文中にURLがあるか、正規表現でチェックしてリンクに変換する方法。

• 文中にURLがあれば、それをリンク化したい - PHPプロ！Q&A掲示板

９．ページを強制的にジャンプ

強制URLジャンプさせる関数です。あるページから別のページに移るときなんかに置くと便利です。

• PHPのメモ帳強制URLジャンプさせる【header】

１０．RSSやXMLを読み込む

ライブラリを使う事なく、XMLを簡単に読み込む方法。RSS配信を組み込める一番簡単なコード。

• PHP5でRSSやXMLを簡単に読み込む方法 : 4GALAXYのメモ

時間、セキュリティ／PHP

１１．タイムスタンプ

ローカルの日付/時刻を書式化する、日付の使用オプション。

• PHP: date - Manual

１２．著作権表示の年を自動更新

フッターなんかにある、サイトの 著作権表示 (コピーライト) の年を自動で更新したいときはこれ。

• PHP で著作権表示の年を自動更新 – terkel.jp

１３．予約表示／自動更新

予約した日時になると自動的に更新させる方法。サイトリニューアル時にも活用できます。

• 指定した日時でサイトを自動更新する、WebデザイナーのためのPHP | TAS design

１４．スクリプトを自動実行

cronとは、スクリプトを自動実行するデーモンプロセス。設定はcron の設定ガイドを参考にします。

• PHP自動実行するには

１５．ショッピングカート

ショッピングカートの実装。PHPとは何ぞや？というところから書いてあります。

• ITmedia エンタープライズ：特集：第2回　ショッピングカートの作成で分かる「PHP」の力 (1/5)

１６．ユーザー認証

Authの使い方について。ファイルの読み込み、コンストラクタ、テストまで。

• ユーザー認証(PEAR::Auth) - PEAR入門

文字列／PHP

１７．文字列の一部を取得

指定した位置から指定した分だけ文字を取り出す方法。リファレンスはsubstr()関数/PHP関数リファレンスでどうぞ。

• 文字列の一部を取得(substr, mb_substr) - 文字列関数 - PHP関数

１８．文字列の一部を置換

文字列を、指定した文字列に置換する最も基本的な関数。

• str_replace()関数/PHP関数リファレンス

メール／PHP

１９．メールを送る

文字化けしないメール送信方法。php.iniでsendmail_pathの設定が必要。

• 離れPHP島

２０．メール自動返信

登録用URLが自動返信される設定。

• メール自動返信の設定とPHPスクリプト - (・∀・)イイ!!Memo

２１．パスワード認証

簡単なパスワード認証サンプル。Cookieを使う方法とSession両方あり。

• WebTecNote - パスワード認証ログインシステムのサンプル

ファイル／PHP

２２．ファイルを作成

空のファイル作成、ファイル更新時やアクセス日時を変更するには「touch関数」を使います。以下はPHPでファイルを作る方法。

• PHPでファイルを作成する [touch] - PHP memo

２３．csvファイルを読み込み

CSVファイルを読み込むには「fgetcsv関数」を使用します。以下は1回実行するたびに、CSVを１行ずつ読み込むサンプルです。

• PHPでCSVファイルを読み込む « Codaholic

２４．Excelファイルを出力

PHPでExcelファイルを生成できるライブラリ「PHPExcel」の使い方。

• 【ハウツー】PHPExcelを使ってPHPでExcelファイルを出力する (1) PHPExcelとは | 開発・SE | マイナビニュース

２５．PDF作成

PDFファイルを作成するための無料のライブラリ「FPDF」の使い方。業務系にも便利ですね。

• FPDFを使ったPDF作成

その他／PHP

２６．ページャー

ページャー（２ページ目以降のナビ）の作り方。CSSつきなのでありがたいです。

• PHPでシンプルなページャーつくってみた | webOpixel

２７．カレンダー

シンプルなカレンダー。JavaScript版とjQuery版とある。

• PHP簡単カレンダー関数 | Webサイト制作支援 | ShanaBrian Website

２８．QRバーコード

超基本的なQRコード生成方法。

• かんたん10分プログラミング - 第3回　PHPでQRバーコードを作成する（その1）：ITpro

２９．動画の１シーンを画像として保存

「getFrame()」を使います。ffmpeg-phpではGDと連携して動画の１シーンを画像に変換可能です。

• PHPプロ！TIPS+
• PHPから動画を扱うためのライブラリ

音／jQuery・JavaScript

３０．マルチトラックの音楽を作成

JavaScript製のソフトウェアPianoRoll.js。ピアノロールを使ってマルチトラックの音楽を作れます。

• ピアノロールを使ってWeb上で音楽を奏でよう「PianoRoll.js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

３１．動画、音楽プレイヤー

jQueryで可能な音楽や動画プレイヤーのまとめ１０。シンプルなものとお洒落なものアリ。

• jQueryで実現する動画、音楽プレイヤー「10 Useful jQuery Video & Audio Players」 | DesignDevelop

３２．Youtubeプレイヤーを作成

Youtubeプレイヤーを作成できるjQueryプラグイン。CSSでカスタマイズ可。

• クールなプレイリスト付きのYoutubeプレイヤーを作成できるjQueryプラグイン「Youtube-TV」:phpspot開発日誌

文字／jQuery・JavaScript

３３．リアルタイムに文字数、段落、単語数を計算して表示

パラグラフ数、文字数、段落などを計算するJavaScriptライブラリ。

• リアルタイムに文字数、段落、単語数を計算して表示できる「Countable.js」:phpspot開発日誌

３４．テキストを均等割り

CSSでなく、「jQuery.justify.js」を使って綺麗に均等割り付けをする方法。

• テキストを均等割り付けしてくれるjQueryプラグイン「jQuery.justify.js」 | OZPAの表4

３５．自動振仮名入力

フリガナ入力補助ライブラリautokanaの紹介。ECサイトには必須。

• JavaScriptによる自動振仮名入力「autokana」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

Google Analytics／jQuery・JavaScript

３６．Googleアナリティクス／行動フロー記録

通常Google Analyticsでは、サイドバーからユーザーフローを確認できますが、こちらはページから、どのイベントがアクションされて、どのページに遷移したのか。行動フローの追い方。

• Googleアナリティクスに行動フローが追加、コードも書いたよ |カグア！Googleアナリティクス解説Blog

３７．Googleアナリティクス／スクロールイベントを取得

jQueryプラグイン（jquery-scrolldepth）を使います。イベントトラッキングを利用してページがどこまでスクロールされたのか、いわゆる精読率を調べる方法。

• googleAnalyticsを利用した10%単位でスクロールイベントを取得する方法 | ACTZERO - 株式会社アクトゼロ

３８．Googleアナリティクス／参照元/メディア」などををカスタム変数にセット

参照元や年月日をカスタム変数としてセットするJavaScript。

• 初回訪問ユーザーへ「参照元/メディア」と「初回訪問の年月日」をカスタム変数にセットする方法｜コラム アユダンテ株式会社

グラフ／jQuery・JavaScript

３９．フラットデザインぽいグラフ

シンプルで綺麗なフラットデザイン系のグラフ。見栄えがかなり良いので、使ってみたくなるはずです。

• 絶対まねしたい！Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp

４０．折れ線グラフ

こちらはHighcharts.jsを使った折れ線グラフの作り方。

• jQuery知識ゼロでも超簡単!!Highcharts.jsで折れ線グラフを描いてみました。 ｜ウェブシュフ

デザイン／jQuery・JavaScript

４１．CSS html5に対応させる

互換性の維持。未対応のブラウザでもHTML5タグを使用可能です。

• HTML5で組んでるならこの魔法のjsも入れておけっていう話 | [M] mbdb

４２．スクロールにあわせて回転

以下のブログに書いてあるサンプルTumblr Staffを見て感動。これくらい控えめだったら、使ってみたいと思うはずです。

• CSS と jQuery で作るスクロールにあわせて回転するロゴ | WWW WATCH

画像／jQuery・JavaScript

４３．イメージを拡大表示

一部のみを小窓をで拡大してくれるタイプのプラグインなど。ズームイン系まとめです。

• イメージを拡大表示してくれるプラグイン集「25+ jQuery Image Zoom Effect Plugins」 | DesignDevelop

４４．背景グラデーション

グラデーション系プラグインの中で、多分一番綺麗に表示してくれます。

• 美しいマルチレイヤーの背景グラデーションが作れるｊQueryプラグイン「SHARDS」:phpspot開発日誌

４５．モーダルダイアログ／ポップアップ

モーダルダイアログとは「元のウィンドウが操作不可能な状態」にする表示。以下は結構スタイリッシュに表示できます。

• 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」:phpspot開発日誌

その他／jQuery・JavaScript

４６．右クリックを禁止

「右クリック禁止にしてくれ！」は確かに、クライアントさんに言われたことが何回かあります。jQueryで右クリック禁止にする方法です。

• jQueryで右クリックを禁止させる方法 | BlackFlag

４７．もっと読む、を簡単に実装

クリックすると全文を表示する、もっと読む（read more）を実装する方法。

• もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」:phpspot開発日誌

時間／jQuery・JavaScript

４８．日付カレンダー

フラットデザイン調な比較的シンプルなカレンダーを表示するプラグイン。

• 【pickadate.js】シンプルだけど高機能な日付カレンダー編 ｜ Developers.IO

以上、覚えとくと便利な「プログラム」サンプルまとめでした。