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

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

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

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

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

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にドラッグ&ドロップソートを適応さ...続きを見る

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

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

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

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

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

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-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