2013-05-01から1ヶ月間の記事一覧
サクウェブＴＶはコチラ↓↓↓ WEB開発を行っているサーバサイドではなく、クライアントサイドのJavaScriptでフォームの入力値をエスケープしたい場合が意外に多くあります。 PHPではhtmlspecialchars()というメソッドでタグなどをエスケープしてタグを無効化で…
サクウェブＴＶはコチラ↓↓↓ 例えば、マウスオーバーで少し変わったことをしたいと思ったらこんなのもありかもです。 今回は指定した要素をマウスオーバーでプルプル揺れさせてみます。 必須ではないですが、プラグイン化してからやりましょう。 以下をyure.j…
サクウェブＴＶはコチラ↓↓↓ jQueryでデジタル時計を表示させるプラグインを簡単に作成しておきます。 以下のスクリプトをclock.jsとして保存してください。 clock.js (function($) { $.extend({ clock: function clock(target){ var d = new Date(); var h =…
サクウェブＴＶはコチラ↓↓↓ PHPで使用するprint_r()やvar_dump()は非常に便利です。 配列や変数の中身を視覚的に見られるのでPHPでの開発中には頻繁に利用すると思います。 ただ、それがJavaScriptではできないので作りました。 以下のコードをprint_r.jsと…
サクウェブＴＶはコチラ↓↓↓ 例えば、stringify.jsという名前で以下のスクリプトを保存します。 (function($) { $.extend({ stringify: function stringify(obj) { var t = typeof (obj); if (t != "object" || obj === null) { // simple data type if (t ==…
サクウェブＴＶはコチラ↓↓↓ (function($) { $.extend({ メソッド名１: function メソッド名１(){ //処理を記述 }, メソッド名２: function メソッド名２(){ //処理を記述 } }); })(jQuery); これを「任意の名前.js」で保存して、jQueryの読み込みの後に <script src="○○" type="text/javascript"><script> で…
サクウェブＴＶはコチラ↓↓↓ jQueryでPHPのprint_r()やvar_dump()するプラグインを発見したのでメモです。 JavaScriptでも配列やJSONの中身をパッと見たいときは本当によくあります。 これは非常に便利です。 開発中のみ使用し、開発が完了したら、取り除いて…
サクウェブＴＶはコチラ↓↓↓ 画像を使ったデジタル時計の実行結果を確認してみましょう。 はい。こんな感じです。 「：」の部分がなんとなく気に入らない方は、 var time_str = h + ":" + m + ":" + s; の部分をお好きな画像に変えるか、CSSで height line-he…
サクウェブＴＶはコチラ↓↓↓ では、時計の実行結果です。 はい。時計としてちゃんと動いています。 まあ、このアプリを何に使うのかはよくわかりませんが・・・ でも、clock()は通常のWEB開発でも使用できますので、何かの時に使って頂ければ幸いです。 さて…
サクウェブＴＶはコチラ↓↓↓ 今回は簡単なデジタル時計を作ります。 サクっといきますので、すぐ終わりますが。 開発環境の準備 jsWaffleのインストール jsWaffleでAndroidアプリを作ろう！インド式九九編① を参考にして、jsWaffleでの開発環境を作ってくださ…
サクウェブＴＶはコチラ↓↓↓ ドラッグ機能はとても簡単に実装できます。 色々説明するより、デモを作ってしまった方が早いので作りましょう。 index.html <html> <head> <meta charset="utf-8"> <script src="./jquery.js" type="text/javascript"></script> <script src="./jquery-ui-1.10.3.custom.js" type="text/javascript"></script> </meta></head></html>
サクウェブＴＶはコチラ↓↓↓ まず、JavaScriptでは一つの変数に多数のデータを格納する場合、 配列を使用する場合、 オブジェクトを使用する場合 があります。 配列を使用する場合 var arr = new Array();arr[0] = "A";arr[1] = "B";arr[2] = "C";arr[3] = "D…
サクウェブＴＶはコチラ↓↓↓ PHPで指定したファイルのアップロードのみを許可してアップロードする関数は以下のように実現できます。 /*************************************************** * 特定ファイルのみアップロードする * 引数： * １．<input type="file"/>でアップロー…
サクウェブＴＶはコチラ↓↓↓ PHPでどんなファイルも全てアップロードできる関数は以下のように実現できます。 /*************************************************** * ファイルを拡張子を変えずにアップロードする * 引数： * １．<input type="file"/>でアップロードしたデータ…
サクウェブＴＶはコチラ↓↓↓ PHPでFLVをアップロードするための関数は以下のように実現できます。 /*************************************************** * FLVファイルのみアップロードする * 引数： * １．<input type="file"/>でアップロードしたデータ * ２．アップロード後…
サクウェブＴＶはコチラ↓↓↓ PHPでPDFをアップロードする関数は以下のように実現できます。 /*************************************************** * PDFファイルのみアップロードする * 引数： * １．<input type="file"/>でアップロードしたデータ * ２．アップロード後のファ…
PHPで画像をアップロードするための関数は以下のように実現できます。 /*************************************************** * 画像ファイルのみアップロードする * 引数： * １．<input type="file"/>でアップロードしたデータ * ２．アップロード後のファイルにつける名前 * …
サクウェブＴＶはコチラ↓↓↓ 今回はPHPでHTMLを簡単にPDF化する方法を説明します。 PHPではPDFを作成するメソッドがいくつか用意されていますが、それで思った通りのPDFを作成するのは結構面倒です。 そこで、mPDFを使用することでHTMLとCSSで作成したＷＥＢ…
サクウェブＴＶはコチラ↓↓↓ さて、operate関数の定義です。 function operate(xml){ var list = new Array();//クイズデータ配列をここに格納する var para = 0; $(xml).find("quiz").each(function(){ var question = $(this).find("question").text(); var…
サクウェブＴＶはコチラ↓↓↓ ではまず、クイズデータを記録したＸＭＬを作りましょう。 wwwフォルダ内にxmlフォルダを作り、その中にdata.xmlを作成してください。 data.xmlには以下を記述します。 <data> <quiz> <question>日本一高い山は？</question> <selection> <option>父山</option> <option>富士山</option> <option>高山</option> <option>下山</option> </selection> </quiz></data>
サクウェブＴＶはコチラ↓↓↓ ではjQueryでのAjaxについてまとめましょう。 簡単な方法はload()メソッドを使う方法です。 例えば以下のソースをindex.htmlとして保存したとします。 jQueryは以下のように読み込んでおいてください。 <html><head><meta charset="utf-8"><script src="jquery.js"></script><script src="script.js"></script><title>Ａｊａｘテスト</title><body><div id="box"></div></body></head><…</html>
サクウェブＴＶはコチラ↓↓↓ では、まずAjaxについて説明します。 Ajaxの説明には、サーバサイド・スクリプトとクライアントサイド・スクリプトについて説明しておいた方が良いかも知れません。 ＷＥＢで使用されるプログラミング言語は大きく分けて サーバサ…
サクウェブＴＶはコチラ↓↓↓ さて、実行結果です。 はい。これで正答数と正解率が表示されるようになりました。 次は正答数と正解率の表示をダイアログを使用せずに行いましょう。 最後に画面に結果が直接表示されて終わるほうが、なんだかすっきりしますので…
サクウェブＴＶはコチラ↓↓↓ では実行結果を確認しましょう。 うん。採点機能も加わり、ますますクイズアプリらしくなってきました。 では次に、採点結果や正答率が最後に表示されるようにしてみましょう。 for文の後に以下を追加して下さい。 var temp_par =…
サクウェブＴＶはコチラ↓↓↓ では実行してみます。Youtube動画を貼り付けますのでご覧ください。 これで、回答のキャンセルが何度でもできるようになりました。 少しずつクイズアプリらしくなってきましたでしょうか？ でも、クイズアプリなら自動採点機能も…
サクウェブＴＶはコチラ↓↓↓ while文の中身を記述していきます。 droid.dialogList()でクイズを出題した後、droid.dialogYesNo()で選択した選択肢がそれでよいかを聞き直します。 var a = droid.dialogList(title,quiz["selection"]);ok = droid.dialogYesNo(…
サクウェブＴＶはコチラ↓↓↓ では、回答キャンセル機能を組み込んでいきます。 回答のキャンセル機能は以下のような感じで実装します。 droid.dialogList()でクイズを出題し、選択した回答でＯＫかやり直すかを選択するダイアログをdroid.dialogYesNo()を使用…
サクウェブＴＶはコチラ↓↓↓ では、シャッフルします。 list配列の定義の後に、以下を追加してください。 list = shaffle(list); shaffle関数を呼び出してシャッフルしたあと元のlistに代入して変更を確定します。 これで出題されるクイズはランダムで出てく…
サクウェブＴＶはコチラ↓↓↓ では、前回までに作ったクイズアプリをランダム出題形式に変更してみます。 どうやってランダム出題形式にするかというと、今回はクイズデータの格納されている変数listの中身をシャッフルしてしまう方法をとることにしましょう。…
サクウェブＴＶはコチラ↓↓↓ 前回の記事でクイズが出題できるようになりました。 しかし、正誤判定がなければクイズとして成り立ちませんね。 合ってるのか間違っているのかわからん・・・ってなことになりますので。 では、正誤判定を追加してみましょう。 f…
