calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Convenient_program

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

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

PR
IT/WEB業界への転職なら
Sponsored Link

一般

画像/PHP
1.画像リサイズ
2.画像に字を書く
3.画像の拡大・縮小・サムネイル出力
4.グラフの描画
5.画像エフェクト25個

URL/PHP
6.ページのURLを取得
7.URLの中身(HTML)を取得
8.URL自動リンク
9.ページを強制的にジャンプ
10.RSSやXMLを読み込む

時間、セキュリティ/PHP
11.タイムスタンプ
12.著作権表示の年を自動更新
13.予約表示/自動更新
14.スクリプトを自動実行
15.ショッピングカート
16.ユーザー認証

文字列/PHP
17.文字列の一部を取得
18.文字列の一部を置換

メール/PHP
19.メールを送る
20.メール自動返信
21.パスワード認証

ファイル/PHP
22.ファイルを作成
23.csvファイルを読み込み
24.Excelファイルを出力
25.PDF作成

その他/PHP
26.ページャー
27.カレンダー
28.QRバーコード
29.動画の1シーンを画像として保存

音/jQuery・JavaScript
30.マルチトラックの音楽を作成
31.動画、音楽プレイヤー
32.Youtubeプレイヤーを作成

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

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

グラフ/jQuery・JavaScript
39.フラットデザインぽいグラフ
40.折れ線グラフ

デザイン/jQuery・JavaScript
41.CSS html5に対応させる
42.スクロールにあわせて回転

画像/jQuery・JavaScript
43.イメージを拡大表示
44.背景グラデーション
45.モーダルダイアログ/ポップアップ

その他/jQuery・JavaScript
46.右クリックを禁止
47.もっと読む、を簡単に実装

時間/jQuery・JavaScript
48.日付カレンダー

画像/PHP

1.画像リサイズ

image_resize_php_pr

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

2.画像に字を書く

image_cutout_php_pr

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

3.画像の拡大・縮小・サムネイル出力

scaled_thumbnail_php_pr

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

4.グラフの描画

drawing_graph_php_pr

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

5.画像エフェクト25個

effects_php_pr

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

URL/PHP

6.ページのURLを取得

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

7.URLの中身(HTML)を取得

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

8.URL自動リンク

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

9.ページを強制的にジャンプ

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

10.RSSやXMLを読み込む

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

時間、セキュリティ/PHP

11.タイムスタンプ

time_stamp_php_pr

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

12.著作権表示の年を自動更新

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

13.予約表示/自動更新

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

14.スクリプトを自動実行

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

15.ショッピングカート

shopping_cart_php_pr

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

16.ユーザー認証

user_auth_php_pr

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

文字列/PHP

17.文字列の一部を取得

get_part_php_pr

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

18.文字列の一部を置換

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

メール/PHP

19.メールを送る

i_send_php_pr

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

20.メール自動返信

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

21.パスワード認証

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

ファイル/PHP

22.ファイルを作成

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

23.csvファイルを読み込み

csv_php_pr

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

24.Excelファイルを出力

excel_php_pr

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

25.PDF作成

PDF_php_pr

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

その他/PHP

26.ページャー

pager_php_pr

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

27.カレンダー

calendar_php_pr

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

28.QRバーコード

qr_php_pr

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

29.動画の1シーンを画像として保存

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

音/jQuery・JavaScript

30.マルチトラックの音楽を作成

create_jq_pr

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

31.動画、音楽プレイヤー

video_jq_pr

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

32.Youtubeプレイヤーを作成

youtube_jq_pr

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

文字/jQuery・JavaScript

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

number_jq_pr

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

34.テキストを均等割り

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

35.自動振仮名入力

phonetic_jq_pr

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

Google Analytics/jQuery・JavaScript

36.Googleアナリティクス/行動フロー記録

flow_jq_pr

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

37.Googleアナリティクス/スクロールイベントを取得

scrollevent_jq_pr

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

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

set_custom_jq_pr

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

グラフ/jQuery・JavaScript

39.フラットデザインぽいグラフ

graph_flat_jq_pr

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

40.折れ線グラフ

line_graph_jq_pr

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

デザイン/jQuery・JavaScript

41.CSS html5に対応させる

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

42.スクロールにあわせて回転

rotation_jq_pr

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

画像/jQuery・JavaScript

43.イメージを拡大表示

seelarger_jq_pr

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

44.背景グラデーション

gradient_jq_pr

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

popup_jq_pr

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

その他/jQuery・JavaScript

46.右クリックを禁止

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

47.もっと読む、を簡単に実装

implementation_jq_pr

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

時間/jQuery・JavaScript

48.日付カレンダー

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

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

  1. […] ここまで出来る!覚えとくと便利な「プログラム」サンプルまとめ | コムテブログ […]

Leave a Comment

コメントする