2014-01-01から1年間の記事一覧
お題 下記のサイトの「トップサンテ」「大貫」「大洗」の直近の人数のシェア状況を 円グラフで表す https://www.i92surf.com/area/ibaraki.php ソース pointpie.html <html> <head> <meta charset="utf-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> </meta></meta></head></html>
お題 Ajaxで取得したjson形式のデータをjqPlotでグラフ化する ソース jqPlot_ajax_sample1.html <html> <head> <meta charset="utf-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> </meta></meta></head></html>
お題 jqPlotで円グラフを作る URL http://jqPlot_pie_sample1.html
お題 jqPlotで線フラグを作る URL jqPlot Sample1
お題 jqPlotで棒フラグを作る URL http://jqPlot_bar_sample1.html
お題 PhotoSwipeを使ってフォトビューワを作る プログラム概要 画像をタッチするとスライドショーが始まる。 スワイプもしくはボタンで画像をスライドさせることもできるが 自動再生ボタンで自動でスライドさせることもできる URL PhotoSwipe Sample1
お題 ペイントアプリを作る プログラム概要 touchmoveイベントが発生すると緑色でペイントを行う ソース HTML <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"> <title>ペイント</title> </meta></meta></head></html>
お題 脳トレアプリを作る プログラム概要 数字と演算子（足し算と引き算）を交互に表示させる。 最後に回答を入力させる。 表示間隔、桁数、演算回数はプルダウンで選択可。 URL 脳トレ
お題 自由にPOST用のフォームを生成するアプリを作成する アプリ概要 URLとname属性を自由に指定してformを生成し、 送信ボタンを押すとそのURLに対して指定したname属性と値で POSTリクエストを投げる。 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>POSTフォーム作成</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></meta></head></html>
お題 シェルソート可視化アプリを作る プログラム概要 「続けますか？」と聞かれるので、OKを押すと、 シェルソートによる並べ替えが行われる。 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>シェルソート</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <style> img { width: 100px; height: 100…</meta></head></html>
お題 8クイーン問題を解くアプリを開発する プログラム概要 ボタンを押すと8クイーン問題の解析が始まる。 最終的にクイーンを置いた箇所が赤になり、 盤上にクイーンを置いた回数を表示させる。 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>8クイーン体験アプリ</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <style> img…</meta></head></html>
お題 ORA-01555を体験するためのアプリ プログラム概要 UNDO領域内が0.5秒ごとに更新される。 0領域のデータに対してselectを投げ、（ボタンを押すだけ） それから1秒以内に0領域が更新されれば、ORA-01555が発生する。 （selectは1秒かかる前提） ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></meta></head></html>…
お題 jQuery UIのsortable関数を使って 簡単なパズルを作る プログラム概要 画像を並べ替えてパズルが完成していたら正解、 そうでなければ不正解と表示させる ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>パズル</title> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></meta></head></html>
お題 Proxyパターンを使った見積もりアプリ プログラム概要 見積もりを行うProxyクラスを複数つくり、Clientから呼び出す。 Proxyクラスは四つ（A~Dとする）ありA→B→C→Dの順に呼ばれる。 （ClientからはAとCとDを呼び出す。） AとCとDに依頼したばあいの見積…
お題 Singletonパターンを使う プログラム概要 Singletonクラスにmain.jspに最初にアクセスした時間を保持しておく。 その後、elapesedtime.jspにアクセスするとSingletonクラス内の時間と 現在の時間の差を計算し画面に表示させる ソース GetDate.java（Sin…
お題 Framesetのframe毎の印刷ボタンを作成する プログラム概要 各フレームの印刷ボタンを押すと、印刷ダイアログが出力される。 その時、そのフレームのみが印刷対象となるようにする。 ソース framemain.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
お題 SAXを使ってXMLの出現要素数を調べる プログラム概要 XMLの要素の出現件数をMAPに格納しておき、 最後に要素ごとの出現件数を表示する ソース SAXSampleMain import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IO…
お題 jQuery UIのresizableを使ってみる プログラム概要 画像をドラッグするとリサイズされる resizableサンプル
お題 ルーレットを作る プログラム概要 テキストボックスに何かを入力して登録ボタンを押すと リストに追加される。 ルーレットを押すとルーレットが開始される。 ルーレット
お題 お気に入りサイトを登録するアプリを作る アプリ概要 お気に入りを追加すると、初期画面にお気に入り一覧が表示される。 （デフォルトで表示されるサイトあり） 初期画面ではタイトルでフィルタすることも可能。 ※登録して戻るボタンで戻ると反映されて…
お題 jQuery Mobileで自分だけのお気に入りサイトを作る。 プログラム概要 登録されたサイトへのリンクをクリックするとそのサイトに移動する。 Filterボックスを用意しておき、そこに文字列を入力すると検索して、 対象のサイトだけを表示する。 ソース <html> <head> <title></title></head></html>…
お題 FancyInputを使ってみる。 プログラム概要 フォーム入力時におしゃれな文字入力ができる。 ついでに、FancyInputのデモも再現しています。 ソース <html> <head> <title>fancyinput sample</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes"/> …</meta></meta></head></html>
お題 ihoverを使ってみる。 プログラム概要 ihoverのcssを取り込んでihoverのリッチなhover効果を利用する ソース <html> <head> <title>ihover sample</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes"/> </meta></meta></head></html>
お題 下記のブログで作ったアプリのスマホ対応版。jQuery Moblieを利用。 http://mocomei.hateblo.jp/entry/2014/04/07/230956 ソース <html> <head> <title>二重の極みっっ!</title> <meta charset="utf-8"/> </meta></head></html>
お題 二重の極み練習アプリを作成する プログラム概要 佐之助をかなりの速さでダブルクリックすると二重の極み成功。 失敗したらただの二連打。 いずれにせよあんじに怒られます。 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>二重の極みっっ！！！</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> </meta></head></html>
お題 下記のブログで作った汎用計算機の完成版を作る。 http://mocomei.hateblo.jp/entry/2014/04/05/225658 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=350, minimum-scale=0.5, maximum-scale=3, user-scalable=yes"> <title>Calculator</meta></meta></head></html>
お題 汎用計算機を作る 下記のブログで作成したアプリをさらに改良。具体的にはスマホでボタンを押すとソフトウェアキーボードが出現していたので、一度readonlyにしてからtextareaに入力するようにした。 http://mocomei.hateblo.jp/entry/2014/04/05/11465…
お題 汎用計算機を作る。下記のブログで作成したアプリの改良版です。 矢印とBSを追加しています。 http://mocomei.hateblo.jp/entry/2014/04/01/224639 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=350, minimum-scale=0.5, maximum-scale=3, user-scalable=yes"> </meta></meta></head></html>
お題 はぐれメタルをどくばりで攻撃するアプリを作る アプリ概要 はぐれメタルにポインタをあてるとはぐれメタルがすぐに逃げる。 10回に1回くらいはポインタをあてることができ、あてることができれば カーソルがどくばりにかわる。 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>はぐれメタ</title></meta></head></html>…
お題 汎用計算機を作成する。下記のブログで作成したアプリの改良版です。 http://mocomei.hateblo.jp/entry/2014/04/01/224639 プログラム概要 テキストエリアに計算式を直接入力か、ボタンを教えて計算式をくみ上げていき 計算をするボタンをクリックする…
