HTMLの動画設置、埋め込みはyoutubeでできる!flvはもうやめよう

2016-02-23 14:31:07
このサイトを参考に! http://www.fds.ac.jp/ htmlStart htmlEnd HTML5の「video」タグが今ひとつ。全ブラウザ対応かが問題だし、 安いレンタルサーバーの場合は負荷がかかるからmp4はできればアップしたくない。 まだ古いやり方のフラッシュ動画「flv」が現役なのかと思いきや、 Youtubeのiframe呼び出しでフレームを非表示にして、ループ再生にすれば簡単! ...続きを見る
カテゴリ: HTML

デザイン業が誰でもできると思ってる人マジでいるの?

2016-02-02 14:27:17
こんな広告が目についた、 初心者だった私が3ヶ月でWEBデザイナーに! by ヒューマ◯アカデミー WEBデザイナーは誰もがなれる職業です by be-webdesigner.com うん。これはデザインセンスがある場合のみなので、30人におよそ1人位の割合で当てはまるかな。 ゆえに、29人は学費を払わされただけで、時間とお金を大損するということになるよね。 WEBデザイナーの定義をドーンと低くすれば、センスがゼロの人でも自称デザイナーを名乗れるけど、 それはデザイナーじゃなくて、ただサイトが作れるだけの人。間違いなく、それで飯は食っていけない。 デザイナーの分か...続きを見る
カテゴリ: 個人的主張

リファラースパムのせいでgoogle解析のPV数に誤差が出る

2015-11-23 10:27:27
最近流行の技のようで、主にロシアからのリファラースパム行為が多いらしい。 google解析(グーグルアナリティクス)でリンク元の参照を見ると、 普通なgoogleやyahooなどの検索エンジンが上位のはずが、訳の分からないドメインが上位になっている。 例えば、こんな感じのURLが参照元に… htmlStart claim66629524.copyrightclaims.org site48246457.snip.to site69510790.snip.to get-your-social-buttons.info site46176572.snip.to htmlEnd...続きを見る

【フリー素材】スマホ用 汎用リンクマーク アイコン

2015-10-30 21:57:55
スマホサイトでボタンを作る時の汎用リンクマークを作成しました。1ピクセルのビットマップでのマークもおまけに。 1ピクセルのリンクマークはPC用サイトで、使いこなせる人は上級者かも。 個人的にはポータルサイトなどの細々したサイトで重宝してます。リストタグに背景指定で使って見て下さい。 ダウンロード[PNG] ダウンロード[PSD] ...続きを見る
カテゴリ: WEB素材

ツイッターのシェアボタンが数の取得APIの提供を修了

2015-10-30 18:06:54
最近、サイトを開くとずっと読込中のマークになることに気づき、 なんでかな?と調べてみると、ツイッターのシェアボタンが原因。 サイトを開いた際に、ツイッターのAPIがもう存在しないのに、 繋ぎに行こうとするからずっと読込中になってしまうということに。 とりあえず、ツイッターのシェアボタンは一旦削除。 10月から本格的に終了だったということで、現在10月末。気づくのが少し遅かった…。 ...続きを見る

実は実装がすごく簡単なトピックスの予約投稿機能

2015-10-28 13:19:16
トピックスの管理画面で日付を自由に設定できるようにして、 現在より未来の日付の場合は表示しないようにするだけなので、 呼び出しの際に、WHERE文にひとつ追加するだけで予約投稿が実現。 htmlStart WHERE `updated` < NOW() htmlEnd 非常に実装が簡単で、需要がある機能なので、管理画面ではなるべく予約投稿の機能を実装すべし! ...続きを見る
カテゴリ: PHP

phpMyAdminの初期設定ではセッション切れるのが早過ぎ!タイムアウトを長くしようぜ!

2015-10-28 12:58:39
ローカル環境でPHPでのシステム開発時にPHPMyAdminのセッションアウトが邪魔。 ローカルだからセキュリティーなんてどうでもいいということで、 セッションのタイムアウトを24時間にしてしまおう! PHPMyAdminのフォルダの直下にある「config.inc.php」に一行追加するだけ! ▼一般的な環境でのファイルの場所 htmlStart C:\xampp\phpMyAdmin\config.inc.php htmlEnd ▼追加する行 htmlStart $cfg['LoginCookieValidity'] = 86400; //24時間 htmlE...続きを見る

中小企業がポンコツシステム会社の餌食になってる件について

2015-10-22 18:37:17
PHPのシステムエラー復旧を承っちゃおうかな。ポンコツなシステム会社が多すぎるからさ。と思う今日このごろ。 34歳になってこの上から目線の発言は以下に自分がクソメンであるかを象徴してるねw 大手のポータルサイトではユーザー登録の際にエラーは全然起きないけど、 中小企業が運営するポータルサイトってエラーにちょくちょく出くわさない? 最近では、「セミナーズ」というサイトにセミナーの登録をしようとおもったら、 登録ボタンを押すと、ページが見つかりません…っておいおい。 せっかく苦労して入力したのにふざけんなっつーのと、怒り心頭。 「スクール検索サイト」でスクール情報を登録し...続きを見る
カテゴリ: PHP

パソコンを持たない世代の増加でWEB制作者の需要が年々アップ!

2015-04-23 16:27:36
WEB制作の業界で飯を食ってきて10年目になった。 10年前の2005年頃はインターネットの普及率がグングン伸びていて、 WEBの技術者もそれに伴い増加傾向にあったと思われる。 この頃はガラケーサイトを作るが面倒だった。 絵文字は必要だし、機種によって文字コードや文字サイズが違うので、 WEBエンジア(SE)は実機チェックに奔走せざるを得なかった。 その5年後の2010年にはガラケーサイトの需要が縮小し、スマホの時代に突入。 スマホのブラウザはJavascriptが使用でき、機種による差も多くなく、 SE的にはガラケーサイトを作るよりはかなり楽になった。 が、...続きを見る

DVD及びブルーレイ(Blu-ray)をMP4に変換する方法

2014-11-03 20:39:01
DVDfabでDVD(及びブルーレイ)をMP4にする方法を紹介したいと思います。MP4にしてしまえば、youtubeにアップできるのでどこでも見れるようになるので便利。 今回の例は「海外ドラマで2話が入っている」ケースでの設定で字幕もMP4の映像に入れ込むようにしている。 まず、「リッピング」のメニューをクリックし、チェックボックスでMP4に変換したいところ選択。ドラマなので、同じオープニングが毎回しつこくなってしまうので、チャプターを2-7にしてますが、通常は変更する必要はありません。 次はエンコードの種類を選択。2014年の現在は「MP4」、「WMV」が主流で、今...続きを見る

【フリー素材】バナー、チラシ作成でよく使うギザギザのマーク

2014-11-01 14:52:29
ギザギザと個人的に呼んでいるマーク。「何パーセントオフと」か、「何々限定」とか、強調させたい時に使用するもので、Photoshopには最初からそれっぽいのが入っているものの、なんかちょっとイマイチってことで、イラレで作成しました。色はカラーオーバーレイやグラデーションで自分好みに調節して下さい。 ダウンロード[PNG] ダウンロード[EPS] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

動画作成デビューでユーチュバーの道へ一歩前進!

2014-08-27 01:06:32
プロレスの試合はカット編集をすると結構見飽きない動画になるので趣味として作ってみました。 オープニングでは自身のナレーションを入れていて、なかなか気合い入ってます。 90年代の全日本は本当に面白かった。 ...続きを見る
カテゴリ: その他

正規表現 値を数値のみにする

2014-08-14 21:58:14
電話番号をデータベースに追加する時は、「-」(ハイフン)をなくしたほうが検索の際に使い勝手がよくなる。下記は変数を半角数値のみにするユーザー定義関数で、ついでに全角数字を半角にする処理もしている。 phpStart function numOnly($str){ if($str){ $str = mb_convert_kana(trim($str),'n','utf8'); //全角数字を半角数字に $num = preg_replace("/[^0-9]+/", "", $str); } return $num; } $str = '090-9999-99...続きを見る
カテゴリ: PHP

ドキュメントタイプについて

2014-08-14 21:42:04
HTMLの先頭で記載しなければいけないドキュメントタイプにはいくつか種類がある。ドキュメントタイプを指定しないと、古いIEではCSSが正しく反映しなかったりするので宣言は必須。例えば「margin:0 auto;」が効かない。 これまで現役で、今もなお主力なのがxhtmlのドキュメントタイプ。この指定をすると閉じタグのないタグには最後にスラッシュが必要になる。個人的には好きな指定法。 htmlStart htmlEnd そして、xhtmlより前に主流だったのが下記のドキュメントタイプ。テーブル組みの時代によく見られていたので、古いサイトは大半がこの形。 htmlSta...続きを見る
カテゴリ: HTML

管理画面などにて画像が切り替わらない場合の対処法

2014-08-14 21:18:59
管理画面で画像を変更する処理をした際に、変更後の画面で画像がキャッシュのせいで古い状態のままになることがある。その場合の一番簡単な方法は、画像にランダムなパラメータを付け、新しい画像だとプラウザに認識させるといい。 phpStart $rand = rand(0,999999); echo ''; phpEnd これは管理画面での基本的なテクニックなので、必ず覚えておかないといけない。 ...続きを見る
カテゴリ: PHP

完全な空チェック ~ 確実な0(ゼロ)判定、null判定をする方法

2014-08-14 21:10:28
phpStart $num = 0; if($num){ 処理されない... } phpEnd 上記の分岐分は処理されないコードの一例。「0」はfalseと判定されるのがPHPの仕様である。 しかし、「0」はtureと判定し、変数が空の場合のみfalseと判定したい時が多々出てくる。 そこで、よく出てくるなら関数化をしておくのがオススメ。 phpStart function karaChk($str){ if(!is_null($str) && $str !== ""){ $flag = true; }else{ $flag = false; ...続きを見る

「windows8 シャットダウン」は今やトレンドの人気検索ワード。駄作GUIは増える一方

2014-05-17 12:18:03
そもそも「マウス操作」に慣れたものが「フリック」とかいうアクションをすると、はっきり言って効率が悪い。 Windows8ではタッチパネル用の初期画面に怒りを覚えたユーザーは多いとか。 クレームの嵐でWindows8.1ではその辺を改良したそうだが。当然の結果である。 指を大きく動かして画面を操作するのと、マウスでササッと操作するのでは効率が違いすぎる。 エクセルやワードをフリックで効率よく作業するのは不可能だろう。 それほど「マウス」は名作なのだから、パソコンから切り離せるわけがない。 Windows8はタッチパネルを導入したいのは分かるが、順序が逆だった。 あくまで...続きを見る

安楽死の樹立により高齢化の問題が解消されて日本は多少救われる

2014-02-16 01:53:26
皆さんは癌(ガン)の苦しみ、痛みを知ってますか? 私の祖父はガンで15年程前に亡くなりましたが、それはもう見るに耐えない苦しみようだった。テレビでは絶対に放送できない苦しみ方。だから実際に見たことがある人以外は知らない世界。 家族全員「はやく楽に逝かせてあげたい」と願い、本人も「もう苦しみたくない、あの窓から早く飛び降りたい」と願ったが、病院は痛みを弱める薬で対処するだけ。あくまで痛みを弱めるだけなので、ずっと苦しそうだった。「安楽死」の法律が樹立されていないこの日本にいる限り、病魔に侵され、余命が決まっていても痛みもがきながら生き続けるしかない。 安楽死の法律に反対をする人...続きを見る

thickboxでパラメータ付き(GET送信)のPHPを読み込む方法

2013-09-26 00:01:54
いわゆるlightBox系のライブラリである「thickbox」。ファイルの少なさと設置の簡単さでそこそこ人気がありそうなライブラリ。 thickboxのインラインフレーム表示でパラメータ付きのフォームを表示しなければいけないケースに出くわし、普通に下記の通りにやってみると、 htmlStart 予約フォーム htmlEnd あれれGET値のidがPHPに渡らない… 「thickbox パラメータ」でググって調べてみると2つの解決法が出てて、何やらthickbox.jsを改造するコードが紹介されていたが、効果なし! 諦めずに「jquery parameter」でググっ...続きを見る
カテゴリ: Javascript

ワードプレスのハッキングでサイトの改ざん相次ぐ【WPは狙われるから使用禁止】

2013-09-10 21:40:20
2013年9月にロリポップサーバーで、なんと8,438件ものサイトがハッキングされ、サイトが改ざんされた様子。前に、GMOクラウドのサーバーからもワードプレスのハッキングについてのメールが届いていた。ワードプレスは利用者が多いので、信頼してしまいがちだが、利用者が多ければ多いほど強者のハッカーに狙われてしまう。だからもうワードプレスは使用しない方が得策だろう。 サイトの改ざんだけで済めばいいが、データベースを初期化されたりしたらもうおしまい。ワードプレスに依存している会社は倒産するかもしれない。そんな会社は急いでワードプレスを普通のHTMLに戻さないといけない。かなり面倒臭いけどね。ワー...続きを見る

javascriptの足し算の演算は変数を数値型にしてから

2013-09-05 02:03:03
javascriptの演算子はPHPと扱いが違うようで、変数と変数を以下のように足し算すると、 htmlStart var a = 100 var b = 200 total = a + b; alert(total); //結果 100200 htmlEnd 結果は演算の値ではなく、変数と変数の結合の値が出てしまう。 PHPの変数の結合は「.」ピリオドだが、javascriptは「+」だからこうなってしまうのである。 なので、javascriptで演算する場合は、変数をparseInt関数で数値型にしなければいけない。 htmlStart var a = 100 va...続きを見る
カテゴリ: Javascript

sleipnir(スレイプニル)のお気に入りインポート・エクスポートはこうしろ!改定版

2013-09-01 03:06:10
※2014/11/06改定 この記事はスレイプニルのバージョンが4.3.10のケースなので、万能な情報ではないかもしれません スレイプニル(以下、プニル)のブックマークのインポートで悩んでるアナタ!自分も悩んだことあるけど、なんとかで解決できました! とりあえずIEにエクスポートをすることが肝要。IEにエクスポートしてしまえば、他のどんなブラウザでもIEのお気に入りをインポートできるはず!なんてったってIEはwindowsデフォルトのブラウザなのだから。 ①まずはプニルのメニューバーを表示(近年のブラウザはメニューが初期状態では非表示になっているが、これは表示しておかないと色...続きを見る

本物のタブブラウザはスレイプニル!高速ネットサーフィンで仕事で差をつけろ!

2013-09-01 02:21:54
インターネットとブラウザは切っても切れない関係。 果たして、あなたが使っているブラウザは本当に自分に合っているブラウザなのか? 「IE」「google chrome(以下、クローム)」「firefox(以下、狐)」「safari」 ブラウザのシェア率は、この辺が高いというのは知っている。 が、個人的には日本人が開発している「sleipnir(スレイプニル)」(以下、プニル)がイチオシである。 国産のわりには読みづらい名前で浸透性がなく、シェア率は0.2%ほどの超絶マニアックブラウザ。 しかし、慣れてしまうと他のブラウザにはもう移行できない感が一番強いのはプニルではないかと思...続きを見る

ファイルやディレクトリのパーミッションを一括で変更する方法

2013-07-28 16:57:37
レンタルしていたサーバー屋が廃業するということで、サイトのお引越しをせざるを得なくなってしまった。 ポータルサイトの引越しの際、ユーザーが管理画面からアップロードしたデータを新しいサーバーに移動した際に、パーミッションが初期状態になってしまった。パーミッションを変更しなければ、管理画面から変更ができなくなってしまう。 ディレクトリは【755】から【777】へ ログファイルは【644】から【666】へ変更しなくてはいけない。 普通ならFTPソフトで変更すれば終わりの話なのだが、ディレクトリが1000ファイル以上あり、各ディレクトリには無数の画像ファイルが存在し、FTPでの手作...続きを見る
カテゴリ: その他

外部サイト(他ドメイン)のファイル存在確認

2013-05-05 00:42:00
画像ファイルがあるかないかを判断して、必要に応じてノーイメージ(now printing)を表示する時などに使用するファイル存在確認の代表的関数file_exists()。 phpStart $path = './log/item/12345.jpg'; if(file_exists($path)){ $img = $path; }else{ $img = '/img/noimage.jpg'; } phpEnd しかし、自サーバーならfile_exists関数でファイルがあるかないかを判断できるが、他ドメイン&他サーバーでは使用できないので、その場合はget_hea...続きを見る

ボタンを押したらローディング画面を表示する

2013-04-30 01:36:10
管理画面で時間のかかる処理(例えば画像や動画などをアップロードする際)をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹介しよう。 まずは、jQuery本体とcssを読み込む。#loadingは画面いっぱいにちょっと暗くするための箱。 htmlStart htmlEnd ...続きを見る

jqueryでtable・liなどをドラッグ&ドロップで並び替え(ソート)する

2013-04-27 20:29:37
ドラッグ&ドロップで並び替える機能はほんの数行で実現できる。まずはjqueryとjquery-uiを下記にアクセスしてダウンロードする。jqueryは自サーバに置いたほうが読み速度が早いから直リンクはオススメしない。 htmlStart http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js http://code.jquery.com/ui/1.10.2/jquery-ui.js htmlEnd 次は、下記のようにjqueryを読み込んで、一行コードを書いてやります。#sortにドラッグ&ドロップソートを適応さ...続きを見る

SSIで上位ディレクトリを呼び出す場合にはちょっと注意

2012-12-26 19:55:50
さくらインターネットの共有サーバーではhtaccessのルールが特殊で、結構悩まされる。安いサーバーに難があるのは仕方がないけど…。 既に拡張子が「html」で作成されたサイトで、後からSSIやPHPを使いたいという状況。これWEBの仕事してるとそこそこ出てくるよね? URLを変えるのはSEO的にイヤだということで、拡張子はhtmlのままSSIやPHPを使用したいという時は、htaccessにちょいと書いてやるだけで実現します。 htmlStart ▼phpの場合 AddType application/x-httpd-php .htm .html ▼SSIの場合 Add...続きを見る

「余計な進化に振り回されない」という個人的方針

2012-12-20 17:21:31
年々進化続けるパソコンなどのメカニックな技術。 しかし、それ必要か?それ面白いか?と思ってしまうどうでもいい進化が多すぎではないだろうか? まず、ゲーム機の3DS。3Dモードを切ってプレイする人がやたら多いとか…。アバター以来3D画面の話題はさっぱり。全然需要がない技術のようである。ゲームはスーファミやゲームボーイのように2Dの時が一番面白かったような気がする…。 エクセル2010なんかは特にひどい使いにくさ。エクセルは2003で完成しちゃってるからそれ以降は余計な機能しか追加されてない。そんな余計な機能は必要ナッシング! アイコンを増やして、直感的に分かりやすくしている工...続きを見る
カテゴリ: 個人的主張

div全体をリンクにする方法

2012-11-28 19:24:47
divの中全体をリンクにしたい場合は下記のコードがおすすめ。リンクにしたいタグにクラス指定をすれば、そのタグ内にあるリンクのリンク範囲をボックス全体にしてくれます。 <javascript> htmlStart $(".boxlink").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); htmlEnd HTMLは下記のような感じで使用する。親ボックスは特にdivじゃないとダメということはない。block要素であればなんでもOK。 <HTML> ...続きを見る
カテゴリ: Javascript

関数の引数(ひきすう)・戻り値(もどりち)について

2012-11-19 22:37:04
引数とは…戻り値とは…と言葉で書いてもパッとしなさそうなので、半角のカタカナを全角のカタカナに変換するmb_convert_kana関数を例として見てみよう。 phpStart $zenkaku = mb_convert_kana($hankaku, "KV"); //$hankaku が第一引数 //KV が第二引数 //$zenkaku が戻り値 phpEnd これで用語の意味は分かるかと思います。自分で関数を作る(ユーザー定義関数)時はこの引数と戻り値のことを理解しておかないと便利なものは作れない。 個人的にフレームワークの使い方を覚えるのが面倒なので、自作関数の...続きを見る

QRコードを手っ取り早く作る方法

2012-11-02 10:06:42
Google Chart APIを利用すればたった一行でQRコードが作れます。 htmlStart http://chart.apis.google.com/chart?chs=《サイズ》&cht=qr&chl=《URLやメールアドレスなど》 htmlEnd 画像タグに上記のコードを記載するだけ。 htmlStart htmlEnd パラメータの「chl」には日本語を使うこともできます。mailtoタグと同様で日本語を使う場合は文字化けの対処をしないといけないので、文字コードをパラメータの「choe」で指定しないといけない。 QRコードは携帯やスマホで読み取られるの...続きを見る
カテゴリ: PHP

【フリー素材】スマホ版ヘッダー用素材

2012-10-25 07:44:52
今回はスマホ版サイトのヘッダーの部分でよく見かけるアイコンの素材。今回配布しているPSDファイルでは、ホームやメールなど全てがベクターなので拡大縮小が自由です。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 スマホ版サイトをデザインする時の強い味方となる参考サイトをついでにご紹介。 ■絶対見ておきたい有名企業のスマホサイトまとめ http://ascii.jp/elem/000/000/590/590502/ ■優れたiPhoneサイトデザイン集 - iPhoneデザインボックス h...続きを見る
カテゴリ: WEB素材

現在のURLやファイル名の取得とリファラーの取得方法

2012-10-24 04:41:53
システムを構築中に今現在のURL(自身のURL)やファイル名を取得したいというケースがちょくちょく出てきます。サーバ環境変数に格納されているので取得は簡単です。 phpStart /* 現在のURLが以下だった場合 http://blog.pinkmonky.net/test.php?id=47&cate=5 */ echo $_SERVER['SERVER_NAME']; echo $_SERVER['REQUEST_URI']; echo $_SERVER['PHP_SELF']; echo $_SERVER["SCRIPT_NAME"]; //表示結果 bl...続きを見る
カテゴリ: PHP

無線LANからコンセントLAN(PLC)に変えてみた

2012-10-23 21:06:14
ネットでの買い物といえば必ずといっていいほど楽天を利用していたが、最近はAmazon(アマゾン)で買い物をすることが多い。楽天より安いケースが多いし、最大の長所は注文から発送がかなり早く、大抵翌日に到着します。 レビューで評判の良かったパナソニック製のPLCを購入 今回も翌日で無事に到着したコンセントLAN(PLC)。無線LANは速度が遅かったので、PLCに変えてみることに。 結論、スピードは格段にアップし思惑通りにいった。しかも設定などはほぼ皆無で、設置も簡単。 ついでに「無線LAN」と「PLC」の違いについて、軽く説明しておこう。 無線LANは壁に弱いので...続きを見る

メールアドレスの書式が正しいかチェックする正規表現

2012-10-18 09:59:04
メールアドレスの書式チェックの方法をネットで調べると、preg_match関数を使用した正規表現チェックのコードがいくつか出てくるのだが、どれも同じコードではない為、どれが一番正確なのかはよく分からない。そこで、信用できそうなコードをご紹介。 どうやら、docomoは「da.me..@docomo.ne.jp」といったRF2822非準拠の携帯メールアドレスが取得できるらしいので、docomoのせいでちょっとややこしいようだ。 ↓ドコモのメールアドレスの取得は以下が可能↓ ■ドットで始まる ■ドットが連続する ■@の前がドット あと、こんなメールアドレスも存在するらしい・...続きを見る

内容に日本語が含まれているかを調べる方法

2012-10-18 07:28:35
メールフォームならメールアドレスは見えないのでスパムは届きにくくなるが、最近内容が英語だけのスパムメールが届くようになった。簡単な処置として、内容に日本語が含まれているかを調べて、英語だけの場合は送信しないという分岐を追加することに。 どうやって全角の文字があるかどうか調べるかというと、文字数を数える『strlen関数』と『mb_strlen関数』を使用して、マルチバイトが含まれているかどうかを調べます。 phpStart if(strlen($body) == mb_strlen($body,'utf8')) { //全部英語(全てシングルバイト) }else{ //日本...続きを見る

phpMyAdminでインデックスの削除をする方法

2012-10-12 01:54:01
ローカルのxampp環境でphpMyAdmin3.1.3.1を使用しているのだが、プライマリー・ユニーク・インデックスのキー操作をしようとしたが、全然操作するメニューが見当たらなかった。 と、どうやらブラウザの問題だったようで、IEではそもそもメニューが表示されていなかった。mootools.jsを使用している画面なのでIEが対応していないみたいである。...続きを見る
カテゴリ: PHP

submitボタンの連続押し・同時押し防止

2012-10-07 01:47:54
ボタンの連続押しにより、エラーが発生することがあるので、管理画面や問い合わせフォームでは常時使っておいた方がよさそうな必須コードです。submitしたらページ内全てのsubmitをグレイアウトにして無効状態にします。 htmlStart $(function(){ $('form').submit(function(){ $('form').find(':submit').attr('disabled','disabled'); }); }); htmlEnd 使用する場合はjQueryの読み込みを忘れずに!...続きを見る

Javascriptで数値の先頭のゼロを削除する方法

2012-10-07 01:08:18
例えば「01」や「02」など、先頭にゼロがついている数値を「1」という数値に直す場合は、Number関数を使用します。 htmlStart var str = "05"; var num = Number(str); //結果 num == 5 htmlEnd 逆に決まった桁数で先頭にゼロをつけなければいけないケース(ゼロパディング)もよく出くわします。その場合は下記の方法がおそらく最短コード。 htmlStart var num = 5; var str = ('0' + num).slice(-2); //結果 str == '05' htmlEnd s...続きを見る
カテゴリ: Javascript

SQL(データベース)で数値の先頭のゼロを消さない方法

2012-09-28 07:08:48
データベースに整数(数値)データを格納する際に先頭に0(ゼロ)が付いていると勝手に消されてしまいます。郵便番号はゼロから始まることがよくあるので、ゼロは必ず残さないといけません。 では早速ゼロを残す方法を記載します。下記の画像を見てください。 種別をINT型(整数型)にして、属性を「UNSIGNED ZEROFILL」にし、あとは長さを記入するだけです。 もう一つの邪道な方法としてはデータ型を整数ではなく文字列型の「varchar」にするというやり方もありますが、文字列型より整数型のほうが検索速度が速いのでオススメできません。なので、郵便番号はハイフンなしで整数型にしてデ...続きを見る
カテゴリ: PHP

郵便番号・住所と沿線・駅のデータベース配信

2012-09-28 06:41:38
ポータルサイトの利便性を高める為に必要となってくる日本全国の「郵便番号・住所」、「沿線・駅」のデータベース情報。細かく地域を区切って情報登録させることにより、より詳細な検索機能を実現できます。 全国の情報が入ったデータ(CSVファイル)が下記で無料ダウンロードが可能です。 【郵便番号データダウンロード - 日本郵便】 http://www.post.japanpost.jp/zipcode/download.html 【駅データ.jp】 http://www.ekidata.jp/download/index.html あらかじめCSVファイルをSQL文に書き換えた...続きを見る
  • 関連タグ:
  • sql
カテゴリ: PHP

xampp環境でメールを送信できるようにする設定

2012-09-23 09:11:12
xampp環境の初期状態ではsendmail関数を使用してもメールが送信できません。ということで、メールを送れるように設定してみたものを見てもらいましょう。今回、送信用に使用するメールアドレスはフリーメールではないメアド(master@pinkmonky.net)で設定しました。フリーメールでも大丈夫だと思います。ちなみにこのメアドはさくらインターネットのサーバーで設定しているものです。 ↓このファイルを編集します。失敗してもいいようにコピーをしてバックアップしておきましょう。 C:\xampp\sendmail\sendmail.ini htmlStart //14行目辺り s...続きを見る
カテゴリ: PHP

携帯・スマホ版サイトの振り分けコード

2012-09-22 23:33:10
あくまで簡易的な携帯・スマホ版サイトの振り分けコードです。携帯版のページを絶対にPCで見せたくないという場合は、下記の方法では実現しません。PC版のインデックスファイルの先頭に下記のコードを追加すれば導入完了です。 phpStart // ユーザーエージェントの取得 $ua = $_SERVER["HTTP_USER_AGENT"]; if(preg_match("(UP\.Browser|KDDI|DoCoMo|J-PHONE|Vodafone|SoftBank|MOT-|L-mode|DDIPOCKET|WILLCOM|PDXGW|ASTEL)", $ua)){ ...続きを見る
カテゴリ: PHP

要素が空の場合はそのタグを削除する

2012-09-21 19:24:21
管理画面で入力がされていない空の項目がある場合、表のページで内容が空だったら非表示にしたいケースがちょくちょくあります。PHPで全ての項目に分岐文を加えるのは面倒だなと思い、他の方法を考えるてみると…。なんと、jqueryを使えば一行で実現できてしまいました。 htmlStart //リストの場合 $("ul#detail li:empty").remove(); //テーブルの場合 $("table#detail td:empty").parent('tr').remove(); htmlEnd このコードでのポイントはemptyでの空要素チェックとparentで親要素の指...続きを見る
カテゴリ: Javascript

cookie(クッキー)操作の便利なユーザー定義関数

2012-09-18 15:10:28
フォームやカートなどで重宝するcookie(クッキー)の操作を簡単にする定義関数。クッキーを配列で使用することでシンプルな組み方が実現されてます。この関数があればクッキー操作が格段にラクになるのでオススメです。 phpStart define(_TIME_OUT_,time() + 30 * 86400); //一ヶ月保持 function makeCookie($array,$cookie_name) { foreach ($array as $text => $value) { setcookie($cookie_name."[$text]",$value,_TIME_...続きを見る
カテゴリ: PHP

6行程でアコーディオンメニューを導入

2012-09-08 15:50:55
jQueryを使用してたった6行程でアコーディオンメニューを完成させているコードがあったのでご紹介。 htmlStart $(function(){ $("dd:not(:first-child)").css("display","none") $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $(this).siblings("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); })...続きを見る
カテゴリ: Javascript

紙媒体広告のデザイン参考サイト

2012-08-30 20:12:58
デザインに迷ったときの強い味方となる参考サイトを見つけたのでご紹介。様々なジャンルの紙媒体広告の制作実績がたくさん見れて、しかもデザイナーのコンセプトまで書いてあるという丁寧なサイト。どれもクオリティーが高く、素材の使い方やレイアウトなどの勉強になります。デザインを志す人ならお気に入り必須のサイトでしょう! チラシデザイン作成PRO(チラシ実績を要チェック) http://www.pro-chirashi.com/...続きを見る
カテゴリ: WEB関連ニュース

頻繁に使うシーンがある文字列操作群の関数

2012-08-23 12:29:08
文字列の一部分を取り出すsubstr関数は使用するシーンが多いです。長い文章の最初だけを表示する時や、URLから一部分を切り出す時などなど。 <substr()関数 - 最後の2文字を取り出す> phpStart $str = 'http://sample.jp/cate.php?id=06'; echo substr($str, -2); //結果「06」が出力されます。 phpEnd 第2引数にマイナス値を入れれば最後からの文字が取得できます。先頭から2文字を取得する場合は正数を書けばOK。文字列が日本語の場合はmb_substr()を使用しないとバグが起きます。 ...続きを見る
カテゴリ: PHP

Opacityをほとんどのブラウザで使えるようにする

2012-08-22 07:20:06
ロールオーバー用の画像を作るのが面倒な場合に活躍するオパシティー。 htmlStart a:hover img{ filter:alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; } htmlEnd 数値は「0~100」「0~1」までの間で、数値が低いほど透明度が強くなります。なので、0にすると画像は見えなくなります。...続きを見る
  • 関連タグ:
カテゴリ: CSS

文字列の出力

2012-08-20 04:02:27
「echo」(エコー)はブラウザにHTMLを出力します。文字列を出力する際に「”」「’」ダブルクォーテーションかシングルクォーテーションで文字列を囲まないといけません。そのルールを説明したいと思います。 <単純な文字列の出力> phpStart echo 123456; echo '123456'; echo "123456"; echo hello!; //←エラーがでます echo 'hello!'; echo "hello!"; echo あいうえお; //←エラーがでます echo 'あいうえお'; echo "あいうえお"; phpEnd 文字列はクォー...続きを見る
カテゴリ: PHP

セレクトフォームをPHPで自動生成する

2012-08-18 19:56:38
セレクトフォームはユーザー定義関数を作って要領よく生成しましょう。編集画面の際は$now_dataに現在のデータを代入しておけば、選択された状態になります。 phpStart //47都道府県の配列 $AREA = array('北海道','青森','岩手','宮城','秋田','山形','福島','茨城','栃木','群馬','埼玉','千葉','東京','神奈川','新潟','富山','石川','福井','山梨','長野','岐阜','静岡','愛知','三重','滋賀','京都','大阪','兵庫','奈良','和歌山','鳥取','島根','岡山','広島','山口','徳島',...続きを見る
カテゴリ: PHP

色使いはキレイなサイトから盗めば簡単

2012-08-18 08:04:42
デザインで重要な要素は「素材の選定」「色使い」「レイアウト」の3つ。これが全てうまくいけば違和感のない美しいデザインに仕上がります。 3つの要素ともにどれも重要で、一つ欠ければダサいものになってしまいます。またほんの少し間違うだけでもダサくなってしまうことがあるので、デザインは本当に繊細なものです。美しいデザインは感覚で作られたものではなく、全てデザイナーの計算の上に成り立っているのです。 素材の選定は最初の方に行う工程で、これによってデザインのイメージが確定します。「広告は素材ありき」なので、いい素材がないといいものができません。素材収集→素材選定の工程だけで数日かかってしま...続きを見る
カテゴリ: photoshop

画像の保存形式について

2012-08-16 20:58:34
現在、WEBの画像ファイルはJPG(ジェイペグ)・GIF(ジフ)・PNG(ピング)の3つが標準規格で一般的に使用されている保存形式です。 それぞれ違う特徴があるので、ちゃんと知っておけばサイトの高速化を計ることが出来ます。画像はなるべく綺麗にできるだけ軽い容量で保存することが大切で、画像の容量が軽ければWEBページの表示速度が上がりますし、重ければ表示に時間がかかってしまいます。PCサイトでは気にならないかもしれませんが、通信速度の遅いモバイルやスマホ版のサイトでは表示速度が大きく違ってきます。 サンプル画像の上段は写真画像のケースの出力結果です。3つともほぼ見た目が変わりませ...続きを見る
カテゴリ: WEBの知識

md5関数でパスワードなどを暗号化する

2012-08-16 17:43:57
md5関数に文字列を与えると、その文字に準じた32文字の英数字の文字列(ハッシュ値)を返してくれます。一文字でも違う値を与えれば、全く違う文字列になり、同じ文字列なら毎回同じ文字列が返ります。 <関数の使用例> phpStart echo md5('abcd'); phpEnd <結果> htmlStart e2fc714c4727ee9395f324cd2e7f331f htmlEnd 上記の文字列から元の文字列に戻す方法はありません。一度暗号化してしまうと、暗号化した本人しか答えが分からないのです。セキュリティーを重視するサイトではデータデースにそのままパスワ...続きを見る
カテゴリ: PHP

生年月日から年齢取得

2012-08-16 07:53:01
プロフィールを登録させる際に年齢の項目を設ける場合は、年齢を入力させるのではなく、生年月日を入力してもらうのが基本です。年齢を入力させてしまうと、データ上その人はずーっと同じ年齢のままになってしまうからです。 生年月日から年齢を求めるの方法はいくつかあるみたいですが、一番短いのが以下の計算方式です。 <計算方式> phpStart $birth = 19811007; $age = floor((date('Ymd') - $birth) / 10000); phpEnd 計算方式は「(今日の日付 - 生年月日) ÷ 10000」で求められるみたいです。floor()...続きを見る
カテゴリ: PHP

サーバーとは

2012-08-14 15:25:36
パソコン界の池上彰を目指すべく、パソコンの知識ゼロな人でもなんとなく分かってもらえるようにサーバーを説明したいと思います。 サーバーというと、「空中に浮かんでいる得体の知れないもの」のようなイメージを持っている人が多いのではないでしょうか?少なくとも自分は最初の頃はそう思っていました。しかし、そんな漠然としたイメージではよくないので、具体化しましょう。 実は、サーバーは単なるパソコンなのです。 パソコンにサーバーのソフト(一番有名なのはアパッチというソフト)をインストールするとサーバーにすることができます。なので、あなたが今使っているパソコンもサーバーにすることができるわけで...続きを見る
カテゴリ: WEBの知識

動的ページのカラクリ

2012-08-13 16:48:05
PHPをゼロから始める人はfor文やif文などの構文を一通り見たけど、「で、何をすればいいの?」と足ふみをしてしまう人が多いのではないでしょうか? そんな人にまず知ってほしいのは動的ページのカラクリ。これが分かればドドドっと次から次へと課題が出てくるので、勉強が進みます。 では早速簡単な動的ページを作ってみましょう。まずは商品データが入ったログファイルを作ります。下記の例ではカンマ区切りで「ID」「商品名」「値段」という構成で一商品一列でまとめています。 <ログファイル data.log> htmlStart 1,アップル,200, 2,オレンジ,100, 3,メロン...続きを見る
カテゴリ: PHP

【フリー素材】スマホ用ボタン素材

2012-08-12 19:38:59
スマホ用素材をネットで探しましたが、なかなか大きいサイズのものがなかったので、結局自分で作っちゃいました。スマホは解像度がPCより2倍大きいので、例えば300pxのボタンを設置する場合は600pxの画像を使わないと画質がにじんでしまいます。指でボタンを押すのでボタンを大きく作るのがスマホサイトの基本ですね。 <スマホで画像を綺麗に表示する> htmlStart htmlEnd <スマホで背景を綺麗に表示する> htmlStart sample htmlEnd ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配...続きを見る
カテゴリ: WEB素材

【フリー素材】送信ボタン

2012-08-11 19:49:30
送信ボタンを作成しました。今回はアメリカのサイトでよく見られる配色のグラデーションを使用。PSDファイルもダウンロードできるので自由に文字が編集できます。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

写真をイラスト風に加工する

2012-08-10 09:32:32
今一番売れてるバラドルの大島麻衣の写真を元にPhotoShopでイラスト風に加工しました。やり方は下記の参考サイトをご覧下さい。写真付きですごく分かりやすく説明されています。 ザッと言葉だけで説明すると、元画像を3枚ほど複製して、それぞれにカットアウト・鉛筆・輪郭検出のフィルター加工をし、加工したレイヤーを乗算やスクリーンなどのレイヤースタイルにして元画像になじませるというものです。 写真素材に困ったときはイラスト風に化けさせれば、タレントの画像を使っちゃっていいかも!?元がばれなければね。ただ、写真をイラスト調にするとサイト全体をイラスト調のデザインにしないと統一感がとれなく...続きを見る
カテゴリ: photoshop

【フリー素材】お問い合わせ用のボタン

2012-08-10 01:05:04
商用サイトでは必要になることが多いお問い合わせ関連の素材。シンプルでどんなサイトにも合いやすいものを作りました。お問い合わせの部分にこだわるのも大切なことです。今回はPSDにグラデーションパターンを付け足しましたので、是非ご活用ください。使用しているフォントはWindows標準のメイリオとArialです。日本語フォントならモリサワの新ゴが一番好きなのですが、最近はメイリオもなかなか気に入っています。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

クロスブラウザ対応CSSハックの一覧

2012-08-09 14:55:40
コーダー泣かせのIEはハックで強引に直しちゃいましょう。IEはjavascriptの動作が重いし、CSS3とHTML5の対応は進んでいませんし、FireFoxもCSS3とHTML5が完全対応ではありません。safariとGoogleChromeはその辺はかなり対応していて優秀です。IEの次のバージョンはどうなのでしょうかね? マイクロソフトはOS部門のWindows以外で大した成功がないような気がします。メッセンジャーはスカイプに負けてるし、ブラウザもイケてないし、スマホでも勝ち目なさそうだし。クラウドサービスもグーグルの方が技術的に強そうなイメージがある。どれも使いやすさには定評がある...続きを見る
カテゴリ: CSS

【フリー素材】フォーム用のボタン

2012-08-09 03:04:20
個人的に好きな色のボタンを3パターン作りました。CSS3で表現できるものですが、IEが対応していないので、グラデーションや角丸はまだまだ画像を使っていった方が無難ですよね。ボタンの文字を編集したい方もいると思うのでPSDファイルもアップしてあります。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

アフィリエイトコードを隠す際にはjump.phpを使おう

2012-08-08 17:42:45
アフィリエイトのリンクがサイト内にたくさんある場合は、隠した方がSEO的に良しとされています。では、簡単なので早速コードを見てください。 <jump.php> phpStart $link[1] = 'http://sample1.jp?afid=9999'; $link[2] = 'http://sample2.jp?afid=9999'; $link[3] = 'http://sample3.jp?afid=9999'; $link[4] = 'http://sample4.jp?afid=9999'; $link[5] = 'http://sample5.jp?afid...続きを見る
カテゴリ: PHP

ページを開いたらすぐに指定のページ内リンクにスクロールさせる

2012-08-08 13:34:13
ページを開いた直後に指定のページ内リンクまでスムーズにスクロールさせるという技。jqueryを使用しています。下記のコードは#sampleの部分まで移動させるという場合のものです。任意で変更してください。 htmlStart $(function() { var p = $("#sample").offset().top; $('html,body').animate({ scrollTop: p }, 'slow'); return false; }); htmlEnd ※var p = ~~とありますが、このpはHTMLタグのpとは関係ありません。ただの変数名...続きを見る

thickboxでダイアログを表示する

2012-08-08 13:00:08
Jqueryのプラグインであるthickboxを使ってダイアログを表示してみよう。まずはheadタグ内でjqueryを読み込んだ後にthickbox.jsを読み込む。順番が逆だと動きません。 htmlStart htmlEnd あとはテキストリンクにclass指定でthickboxを宣言し、リンクを貼るだけで設置完了です。リンクのパラメータにはheightとwidthを必ず指定しなければいけません。リンク先はHTMLや画像、PHPでさらに独自のパラーメーターを付け足すことも可能です。 <テキストリンク~ダイアログ表示> htmlStart サンプル htm...続きを見る
カテゴリ: Javascript

文字コードの変換

2012-08-04 17:01:42
UTF-8の文字をshift_jisに変換するコードです。携帯サイトを作る場合はdocomoとauがshift_jisで作らないといけないので、文字コードを変更することがあります。EUC-JPはperl時代の時によく使用されていましが、今はUTF-8とshift_jisのどちらかしか使わないですね。 phpStart //mb_convert_encoding(文字列,変換後,変換前); mb_convert_encoding($str,'SJIS','UTF8'); phpEnd あとPCサイトでもメーラーを立ち上げるmailtoのリンクで件名と内容も付属するときはshif...続きを見る
カテゴリ: PHP

floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04 16:51:12
ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。 <CSS> htmlStart div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;} div.pager ul{ float:left; position:relative; left:50%;} div.pager ul li { float:left; position...続きを見る
カテゴリ: CSS

マイページや管理画面のログイン機能はセッションで導入する

2012-08-04 12:13:02
PHPでログイン機能を導入する場合はsession(セッション)というものを使います。cookie(クッキー)と似ていますが少し違います。単純に説明すると、cookieはブラウザに保存、sessionはサーバーに保存といったところでしょうか。sessionはcookieよりもセキュリティーが固いのでログイン機能ではcookieは使いません。では早速、コードを見てみてください。 <login.php> phpStart session_start(); //*1 下記説明 if($_POST['pass'] == $PASS){ $_SESSION['user'] = sessi...続きを見る
カテゴリ: PHP

サイト内のキーワード検索で複合(AND)検索を導入する為のコード

2012-08-04 11:39:29
複合検索は半角スペース区切りのワードに変換して、explode関数で半角スペース区切りで配列に格納し、foreach文でWHEREのSQL文を生成します。foreach文でエラーを出さない為に、ループの前にis_array関数で配列であるかの確認しておきましょう。 htmlStart $q = str_replace(' ',' ',trim($_GET['q'])); //*1 下記説明 $array = explode(' ',$q); if(is_array($array)){ foreach($array as $val){ $str = ($sql)?' AND...続きを見る
カテゴリ: PHP

ファイル名から拡張子を取得する

2012-08-04 08:32:47
拡張子を取得する場合はpathinfo関数を使うのが最短のコードだと思われます。 htmlStart $filename = 'sample.jpg'; $ext = pathinfo($filename, PATHINFO_EXTENSION); htmlEnd ファイルアップ時の際に必要になることが多い技になりますね。 htmlStart $filename = $_FILES['upfile']['name']; $ext = pathinfo($filename, PATHINFO_EXTENSION); htmlEnd ...続きを見る
カテゴリ: PHP

あると便利なリスト用アイコン

2012-08-04 04:13:26
画像をダウンロードして、フォトショップで切り抜き加工をして使ってください。CSSの宣言方法も記載しておきます。 <HTML> htmlStart サンプル1 サンプル2 htmlEnd <CSS> htmlStart ul.listMark li{ background:url(/img/list.gif) 0 2px no-repeat; padding-left:15px; } htmlEnd 背景ポジション(0 2px)←この部分はline-heightの設定値により数値の調節が必要になります。ポジションの数値はマイナスの値も使えます。 ...続きを見る
カテゴリ: WEB素材

floatの回り込み解除にclearfixを使う

2012-08-04 02:47:58
<サンプル> ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。 <CSS> htmlStart .cf:after{ content: "."; display:block; clear:both; he...続きを見る
カテゴリ: CSS