FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を紹介します。 ダウンロード https://fullcalendar.io/download/ こちらのサイトからファイルをダウンロードします。 ダウンロードしたファイルを解凍し、含まれている以下のファイルを使用し...
2017/01/19

jQuery UI ドラッグ&ドロップで並び替え　sortableの使用方法

sortable 概要 jQuery UIを使用して、ドラッグ&ドロップで並び替えを行います。 sortableを使用することで、一瞬で実装できちゃいます。 準備 まずは、 こちらからjQueryをダウンロードします。 次に、 こちらからjQueryUIをダウンロードします。 ダウンロードしたファイルをHTMLで読み込むよう以下のように指定します。 <li...
2016/02/24

jQuery UIでドラッグ＆ドロップ　draggableとdroppableの使用方法

draggableとdroppable 概要 jQuery UIを使用して、ドラッグ&ドロップを行います。 要素の移動やコピーをGUI操作で行うときなどに役立ちます。 準備 まずは、 こちらからjQueryをダウンロードします。 次に、 こちらからjQueryUIをダウンロードします。 ダウンロードしたファイルをHTMLで読み込むため、以下のように指定します。 ...
2016/02/24

Jquery ドラッグ＆ドロップで画像をアップロードできる Doropzone.js

Doropzone.js 概要 Dropzone.jsは、Ajaxを利用した非同期で画像をアップロードできるJqueryライブラリ。 当記事では、複数のドロップ領域が必要になることを想定したコードを紹介しています。 ダウンロード 以下のダウンロードサイトより、ライブラリをダウンロードします。 Doropzone.js サイト Doropzone.js ダウンロード(Git...
2016/01/27
プログラミング参考サイト

プログラミング参考サイトを集めました

プログラミング参考サイト 当記事では、プログラミングに関するサイトを言語別に紹介しています。 各言語の入門・サンプル・関数一覧などがメインとなります。 これから言語を学習したいとき、 開発時に使用したい関数を忘れてしまったときなどに便利です。 サイト一覧 PHP PHP PHPBook eWeb そふぃのphp入門 PHP で WEB 作成...
2014/01/09
CSS3,HTML5

IE8以下でCSS3とHTML5の対応 - respond.js、html5shiv.js

respond.js、html5shiv.jsについて IE8以下では動作しない CSS3、HTML5でコーディングを行った場合、IE8などの古いブラウザでは有効になりまん。 今回は、IE8以下でCSS3・HTML5を有効にすることができるプラグインを紹介します。 これでIE8以下のブラウザでもレスポンシブWebデザインが実現できます！ 設定も簡単で、JavaScriptのファイルを読込...
2014/01/09

jQueryでフォームの入力チェック - ValidationEngine

ValidationEngineとは 概要 ValidationEngineとは、Webページのフォームでバリデーション（入力チェック）を行うためのjQueryプラグインです。 バリデーションとは、入力された値が正しいかどうかチェックすることです。 例えば、電話番号入力欄に「足利尊氏」などと入っている場合はエラーにするなど、正しい形式か検証する処理です。 ことなる形式の値が入力された場合...
2013/11/21

Ajax の基礎知識

Ajax 入門 説明 Ajax とはAsynchronous JavaScript + XMLの略で、Ajaxライブラリを使用したJavaScriptのプログラミングです。 有名なライブラリは、prototype.jsやjQueryなどです。 Asynchronous とは「非同期」という意味です。 通常ブラウザとサーバーが同期してやり取りを行い処理されるのですが、このAjaxは非同期で...
2013/10/11

GoogleMapAPIで任意の地点間の距離を測る - JavaScriptサンプル

任意の地点間の距離を測る 内容 GoogleMapAPIを使用して、任意の地点間の距離を測るプログラムのサンプルを掲載します。 スタート地点から、複数の地点を経由して最終地点までのルートと距離を表示するという内容です。 仕様は以下の通りです。 予めスタート地点にマーカーを表示 地図内をクリックすると、そこまでのルートと距離を表示 クリックできる地点は最大8つ 完成イメージ ...
2013/10/08

JavaScriptでユーティリティクラスを作成

JavaScriptでユーティリティクラスの作成 アプリケーションが大きくなるとJavaScriptの保守性が悪くなってきます。。特に業務システムの場合、何万コードのJavaScriptが元気に絡み合いながら動いています。 開発初期から保守性や可読性を気にしていれば良かったのですが、どうしても開発当初はデスマになるのがSIの常でしょうか。。その場合「動けばOK」なノリでプログラミングしてし...
2013/09/04
トップへ戻る