サイズの大きなモーダルをスクロール可能にする方法


最近良く見かけるモーダルウィンドウですが、
モーダルのサイズが大きいと画面外にはみ出してしまい、全てを表示することが出来ません。
スクロールしたとしても、モーダルの背景であるメインコンテンツがスクロールされてしまいます。

そこで、モーダルが表示されている間のスクロール対象を、背景のメインコンテンツではなく、
モーダル自身に与えてあげることで、画面外に広がったモーダルコンテンツを全て表示することが可能です。

今回は、そんなスクロール可能なモーダルを手軽に構築する方法を解説します。

また、そんなモーダルをスクロール可能にする一連の処理を
jQueryのプラグインとして作成しましたので、宜しければお使い下さい。

  1. 一般的なモーダルの実装
  2. 一般的なモーダルの問題点
  3. 大きいモーダルを扱うサイト
  4. スクロール可能なモーダルの考え方
  5. jQueryモーダルプラグインの使い方
  6. jQueryモーダルプラグインのソース

『サイズの大きなモーダルをスクロール可能にする方法』を続きを読む »

[JavaScript]子クラスから親クラスを引数付きで初期化する方法


JavaScriptでは、親クラスを継承するのに下記のような方法をとります。

SubClass.prototype = new SuperClass();

しかし、この方法だとコンストラクタに引数を必要とする場合、
子クラスにはインスタンス化の際に指定することが出来ますが、
親クラスに指定する術がありません。

JavaScriptでは、子クラスをインスタンス化した際に指定した引数を
親クラスのコンストラクタにて使用したい場合は、
少し工夫が必要です。
今回は、そんな親クラスへ引数を渡す方法について解説します。

その前に、JavaScriptでのクラス定義方法を確認したい方は下記を参照してください。

JavaScriptのクラス定義方法を徹底解説!!

また、今回のテーマと同様に、継承関係にある親子クラスの扱い方として、親クラスの同名メソッドを呼ぶ方法についても
下記にて確認することが出来ます。

[JavaScript]子クラスから親クラスの同名メソッドを呼び出す方法


これらの事前知識を踏まえた上で読み進めて下さい。



  1. prototypeのプロパティに関数オブジェクトを登録する
  2. 子クラスから親クラスのコンストラクタへ引数を渡す具体的な実装例

『[JavaScript]子クラスから親クラスを引数付きで初期化する方法』を続きを読む »

[JavaScript]子クラスから親クラスの同名メソッドを呼び出す方法


JavaScriptでは他の言語と異なり、
正確には「クラス」というものは存在しません。あるのは「function」です。
しかし、この「function」はオブジェクト化することが出来ますので、
クラスの様に振る舞い、扱うことが出来ます。

JavaScriptの基本的なクラスとしての考え方は、下記を参照してください。

JavaScriptのクラス定義方法を徹底解説!!

そして、今回のテーマと同じように、継承関係にある親子クラスの取り扱いとして、
親クラスに対してパラメータ付きで初期化したい場合は下記の記事も参照してください。

[JavaScript]子クラスから親クラスを引数付きで初期化する方法


ただ、JavaScriptでのクラスは、正確には完璧なるクラスではありませんので、
ちょっとしたことで「どうやるんだっけ?」と、悩むことが多いかと思います。

今回は、JavaScriptでは単純に用意されていない機能を、自身で実装していきます。
テーマとして、子クラスから親クラスを参照し、親クラスの同名メソッドを呼び出す方法について解説します。


  1. JavaScriptには親クラスを参照する「super」が無い
  2. 子クラスから親クラスの同名メソッドを呼び出す

『[JavaScript]子クラスから親クラスの同名メソッドを呼び出す方法』を続きを読む »

とっても応用の効くラジオボタンを手軽に画像で表現する方法



HTMLのラジオボタンは、複数の選択肢の中から
特定のものを選ばせる時などに使用します。
利用シーンでは、男性・女性を選択するものであったり、
利用規約の同意・非同意、旅館の予約コースの選択であったりと様々です。

HTMLのラジオボタンの作成はとても簡単で、下記の様に作成する事が出来ます。




上記では、『radio-group』というラジオボタンのグループ内で
特定の選択をさせるというものです。
選択出来るのは必ず一つで、選択状態を変更すると他の選択状態は破棄されます。
formで送信する際は、選択されたラジオボタンの「value」の値のみ送信されます。

ラジオボタンはとても便利で、よく使うHTML要素かと思いますが、
そのまま使用するとブラウザ毎に表示が異なり、
デザインにこだわったサイトでは、他のデザインと協調せず、ういてしまいます。

そこで、今回はラジオボタンを手軽に画像にする方法を解説します。
ラジオボタンに使用する画像と、制御する為のjQueryさえ用意できれば、
簡単に素敵なラジオボタンを作成する事が出来ます。

  1. ラジオボタンとして使用する画像を用意しよう。
  2. HTMLにラジオボタン画像を配置しよう
  3. 選択された値を保持する為の要素を作成しよう
  4. ラジオボタンの動きをエミュレートしよう
『とっても応用の効くラジオボタンを手軽に画像で表現する方法』を続きを読む »

JavaScriptのクラス定義方法を徹底解説!!



JavaScriptでは、本来のオブジェクト指向言語とは少し異なり、
正確なクラスの定義は出来ません。
しかし、JavaScriptでは強力な関数定義方法が用意されていますので、関数をクラスとして
実装する事で対応するのが一般的です。
今回の記事では、そんなJavaScript流のクラス定義方法をソースコード付きで解説します。



  1. クラス定義とインスタンス生成時のコンストラクタについて
  2. クラス内のメンバ変数を定義しよう
  3. インスタンスメソッドを定義しよう
  4. クラス変数とクラスメソッドについて
  5. クラスを継承してみよう
  6. インスタンスメソッドのオーバーライド

『JavaScriptのクラス定義方法を徹底解説!!』を続きを読む »

【Ajax|非同期】ファイルアップロード対応!フォーム自動解析送信



今までは、Ajax(非同期)でのファイルアップロードは
iframeを使うなど、少しトリッキーな方法を用いる必要があり、
とても面倒でしたが、『XMLHttpRequest Level2』からは『FormData』というものへ
オブジェクト化すればファイルもサーバーへアップロード出来る様になりました。

しかし『Firefox 3.6』辺りでは上手く動作しない等の報告もあり、
使用に躊躇していましたが、最近の『Firefox』の強制アップデートにより、
古い『Firefox』は駆逐されたかと思いますので、
今回の記事にて、フォームを利用したAjax(非同期)でのファイルアップロード方法について
サンプルコード付きで解説します。

更に、サンプルコードは私が普段使用しているものを分かりやすく纏めたものです。
機能としては、単純なAjax(非同期)処理と、送信先や送信方式等は
送信対象のフォームを解析し、自動的にセット。

送信に対する結果通知は、コールバックを指定するという方式を取り、
汎用的に使いまわせる様にユーザ定義関数として再編しています。

主に、フォームの『submit』の代わりにお使い頂けます。

それでは早速解説に入りましょう。

  1. コピペでOK!ファイルアップロード対応付Ajax通信
  2. Ajax通信に必要な要素の初期化
  3. ファイルアップロード対応のAjax通信用データをフォームから自動取得して成型
  4. Ajax通信を実行し、返却値を受け取ろう!結果と共にコールバック起動
  5. フォームデータをAjax通信にて送信する方法
『【Ajax|非同期】ファイルアップロード対応!フォーム自動解析送信』を続きを読む »

フォームの枠や要素自体を滑らかに点滅!指定数繰り返し行う方法



要素自体の点滅を指定回数分繰り返しアニメーションを行う方法や、
フォーム等の要素において、枠の部分の影を滑らかに表示・非表示させるアニメーションの
実装方法をサンプルコードを交えて解説します。

JavaScript部分の実装では、ネイティブなJavaScriptに加え、jQueryを使用した
記述もあります。

サンプルはユーザ定義関数として実装されていますので、
そのままコピペで使うか、ご自身のライブラリに組み込む等してお使い下さい。

  1. 要素自体を指定回数点滅させよう
  2. テキストフォーム等の枠(輪郭部分)を点滅させよう
『フォームの枠や要素自体を滑らかに点滅!指定数繰り返し行う方法』を続きを読む »

【jQuery】グレーアウトさせてポップアップを出す方法!



インジケータを回して何かを作業中に画面操作を防止する時や、
ポップアップを表示させる時などに使用するグレーアウト方法と、
グレーアウト上に表示するポップアップやインジケーター。
その他、作業領域等を表示させる方法をサンプルコードと共に解説します。

主に、JavaScript部分ではjQueryを使用し、HTMLCSSを操作して実現させます。
それでは早速、次章より具体的な実装方法について解説します。


  1. グレーアウト用の半透明パネルを予め用意しておこう
  2. グレーアウトを表示させよう
  3. グレーアウトを終了させよう
『【jQuery】グレーアウトさせてポップアップを出す方法!』を続きを読む »

【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法



表題の通り、タブ風のボタンを作成し、ボタンをクリックでコンテンツの内容を
表示・非表示と切り替える方法をサンプルコード付きで解説します。

今回のタブ風のボタンでは、選択状態となっているタブに色をつけ、
他のタブを未選択状態の状態とし、選択されたタブと対になっている
コンテンツを表示させます。

タブの種類は何個でも可能ですので、用途によってカスタマイズしてください。
基本的なレイアウトはCSSHTMLにて行い、コンテンツやタブの選択状態を切り替えるのに
簡単なjQueryを使用しています。

勿論、jQueryの部分はネイティブのJavaScriptを使用しても問題ありません。
ちょっとしたフェード効果をつけるのに、jQueryでは楽でしたので、
今回のデモにて使用させて頂きましたが、
基本的な処理ロジック、考え方は簡単ですので、使い慣れたクライアントプログラミングにて
実装して下さい。


  1. タブ風のボタンを作成しよう
  2. 未選択状態のタブのスタイルを定義しよう。
  3. 選択状態のタブを作成しよう。
  4. タブ選択で表示されるコンテンツを用意しよう。
  5. タブ選択イベントとコンテンツ切り替え処理を実装しよう。
『【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法』を続きを読む »

【jQuery】ファイル選択フォームデザインのカスタマイズ方法



基本的に、ファイルのアップロード等で使用するフォーム要素として
『input』要素の『type="file"』がありますが、
ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは
基本的にブラウザ依存で、中々デザインを当て込むのは困難です。
デフォルトで適用されるデザインは、
IEFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、
ChromeSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。
ファイル未選択字のデフォルトメッセージ(『ファイルが選択されていません』等)も
言葉が異なっていたり、そもそも表示が無い等まちまちです。
これだけブラウザによって異なれば、
そのままデフォルトで使用すると
他のデザインとのバランスが悪くなったりして、
どうしてもデザインを入れたいパターンが出てくる場合があります。

また、ブラウザ依存のデザインなので、ブラウザによってデザインが異なるため、
UI的に迷いが生じる等を危惧して、全端末同じ様な見た目にする為に
デザインを適用する場合もあります。

今回は、そんなブラウザ依存のデザインが入ってしまっている
『input』要素の『type="file"』をカスタマイズして、好きなデザインに変えてしまう方法を
サンプルコード付きで解説します。

イベント起動などでは、分かりやすいのでjQueryを使用していますが、
勿論ネイティブのJavaScriptでも同じ事が出来ますので、
適当に置き換えて読み進めて下さい。
実際、jQueryを使用しているイベント駆動の部分でも、
そこまで複雑な事はしていないので、セレクタをドキュメントから書く必要がある程度の違いです。

要望があれば、ネイティブのJavaScriptへ書き直したものを追記しますので、
コメント頂ければ幸いです。


  1. まずは普通に『input』要素の『type="file"』を設置しよう。
  2. ファイル選択を起動させよう。
  3. ファイル選択状況表示エリアを実装しよう。
  4. 忘れがちなテキストボックス選択イベント
  5. Internet Explorer 対策
『【jQuery】ファイル選択フォームデザインのカスタマイズ方法』を続きを読む »

【Android】WebView内のJavaScriptやHTMLと相互連携する方法

JUnitについての書籍が遂に発売します!
Java開発時のユニットテストを加速する「JUnit速効レシピ」



今回は、WebView内に書かれたJavaScriptをアプリ側から起動したり、
HTML内のリンクタップをアプリ側で検知したり、
アプリ側からJavaScriptを介す事によって値をWebView内へ渡したり、
逆にWebView内の値をアプリへ渡す様な相互連携を行う方法について
サンプルコード付きで解説します。


まずは、アプリを外部のインターネットへ接続出来る様に権限を指定する必要がありますので、
権限の付加方法から解説しましょう。



  1. マニュフェストの設定でインターネット通信を許可しよう
  2. アプリ内のブラウザ。webViewを設置しよう
  3. WebViewに対してJavaScriptを実行しよう
  4. リンクタップ等、ロケーションの変更を検知する
『【Android】WebView内のJavaScriptやHTMLと相互連携する方法』を続きを読む »

【永久保存版】各プログラム言語のコメントアウト記法まとめ!



コメントアウトとは、プログラムソース内に処理ロジックとは別に
コメントとして残す事を言います。

今回は、様々なプログラム言語やフレームワークで使用する
コメントアウト記法を纏めました。

コメントアウトはプログラムを書く上で、とても頻繁に使い、
プログラム言語を覚える時にも一番初めに確認して起きたい記法です。

新しいプログラム言語を勉強する際は、是非とも下記より
該当のプログラム言語を選択し、コメントアウト記法を見につけて下さい。


【 今回掲載したコメントアウト記法 】
  1. HTMLのコメントアウト記法
  2. CSS(スタイルシート)のコメントアウト記法
  3. バッチ(bat)、バッチファイル内でのコメントアウト記法
  4. PHPのコメントアウト記法
  5. JavaScriptのコメントアウト記法
  6. VBAのコメントアウト記法
  7. Javaのコメントアウト記法
  8. MySQL等で使用するSQL文のコメントアウト記法
  9. C言語でのコメントアウト記法
  10. C++のコメントアウト記法
  11. Objective-Cのコメントアウト記法
  12. Texのコメントアウト記法
  13. Perlのコメントアウト記法
  14. XMLのコメントアウト記法
  15. Rubyのコメントアウト記法
  16. JSPのコメントアウト記法
  17. LinuxのBシェル(sh)でのコメントアウト記法
  18. Pythonのコメントアウト記法
  19. VBSのコメントアウト記法
  20. Smartyのコメントアウト記法
  21. ASPのコメントアウト記法
  22. Fortranのコメントアウト記法
  23. aspxでのコメントアウト記法
『【永久保存版】各プログラム言語のコメントアウト記法まとめ!』を続きを読む »

JavaScript開発のデバッグを加速するlog出力!




ブラウザのデベロッパツールのコンソールへlogを出力する方法と、
その際の注意点や解決策についてソースコード付きで解説します。
最終的にはlog出力の完成形として、
IEエラー回避、consoleオブジェクトの記述無し、デバッグ切り替え機能付きの
プラグインの作成まで順を追って解説致しますので、最後までお付き合い頂ければ幸いです。

JavaScript開発において、変数の中身の確認や、処理フローの状況を確認する為には、
今まではHTMLへ出力したり、alert()等で通知したりといった事が主流でした。

しかし、ブラウザの技術進歩により、かなりJavaScript開発の手助けとなる機能が充実して来ました。

そんな中、ブラウザのデベロッパーツールのJavaScriptコンソールへ
logを出力する事が可能となりました。

今回の記事では、そんなlog出力の方法と、SafariChromeFirefox、各ブラウザでの互換吸収、IEへの対策方法等を
解説したいと思います。

alert()の様に、一回一回ボタンを押す必要も無く、HTML出力の様にレイアウト崩れを気にしたり、
ロギング環境を構築する手間も必要ありません。

今回解説するlog出力方法を身につければ、きっと今後のJavaScript開発が加速するはずです。


  1. JavaScriptコンソールへlogを出力してみよう!
  2. 他にもあるlog出力系便利メソッド!
  3. consoleが使えないブラウザでもエラーが発生しない様にしよう
  4. 長いオブジェクト名を短縮しよう
  5. コンソールへのlog出力の有効・無効を設定しよう
  6. log出力の完成形!IEエラー回避&console記述無し&デバッグ切り替え機能付き
『JavaScript開発のデバッグを加速するlog出力!』を続きを読む »

wysiwyg:画像添付可能なhtmlエディタを無料で導入




ブログの管理画面の様な、記事編集フォームを自分のサイトに取り込む方法です。
こういったフォームは、リッチテキストエディタやwysiwygエディタ、HTMLエディタなどと言われ、
wordpressの記事編集の様な操作を可能とします。
オフィスシリーズでいうと、ワードの様な操作感でしょうか。
簡単にコンテンツの編集、作成が可能なので、とてもユーザにとって便利かと思います。


今回は、そんなHTMLエディタの導入方法です。
画像添付関係は有料だというツールが多く出回っていますが、完全無料で最後まで解説いたします。


  1. 無料で高機能なHTMLエディタを入手しよう
  2. HTMLエディタを環境に合わせて調整する
  3. elRTEを日本語化しよう!
  4. HTMLエディタの値の取得、HTMLエディタへ値をセット
  5. elFinderを組み合わせて画像のアップロードを可能にする
  6. elRTEにelFinderを組み込もう
  7. 実際にオンラインファイルマネージャーを操作してみよう
  8. ファイルの保存先をカスタマイズしよう
『wysiwyg:画像添付可能なhtmlエディタを無料で導入』を続きを読む »

jQueryプラグイン開発までの最短4ステップを分かりやすく解説!!



JavaScriptの人気ライブラリ『jQuery』は豊富な機能とクロスブラウザな点がとても良く、私も頻繁に活用しています。
むしろJavaScript開発には欠かせないものとなっています。

そんなjQueryですが、プラグイン開発も盛んで、世界中のエンジニアが様々なプラグインを作成・公開しています。

それも、jQueryはプラグイン開発がとても簡単に出来る事に起因しているのではないでしょうか?

簡単だからこそ、独自にプラグインを追加する方達の理由としては、
新たな便利な機能を追加する方もいれば、ある程度纏まった処理を汎用的にする為にプラグイン化する方もいるでしょう。

プラグイン開発の理由は人それぞれですが、プラグインの作成方法を知らない事にははじまりません。

今回は、そんな『jQuery』の独自プラグインの作成方法を、分かりやすく4ステップに分けて解説したいと思います。


  1. 即時実行の無名関数でプラグイン領域を隔離する
  2. jQueryにプラグインメソッドを追加する
  3. 引数の値とデフォルト値
  4. メソッドチェインに対応しよう
『jQueryプラグイン開発までの最短4ステップを分かりやすく解説!!』を続きを読む »

実はJavaScriptのlengthプロパティは配列要素数ではありません



皆さんJavaScriptで配列の要素数を知りたい時はlengthプロパティを参照しているかと思います。

しかし、このlengthプロパティですが、実は配列の要素数の値では無いんです。

今回のエントリーでは、そんなlengthプロパティの動作をソースコード付きで解説したいと思います。
『実はJavaScriptのlengthプロパティは配列要素数ではありません』を続きを読む »

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)