スキップしてメイン コンテンツに移動

投稿

7月, 2011の投稿を表示しています

jQueryのライブラリでIEでも動くアナログ時計を作成してみた

前回、Excelでゴリゴリ描いた文字盤（PNG画像）、 ・Excelの図形を組み合わせて文字盤を作る方法 | たかいわ屋 http://takaiwa.net/archives/661 をJavaScriptで動かしてみたいと思います。ちなみに、Excelで作成した図形は、全ての図形を選択してグループ化してコピーし、Firewoksを開いて、200px × 200pxで保存しました。文字盤以外にも、長針、短針、秒針も画像が必要なので、同様にExcelで作成し、これも200px × 200pxのサイズで、半径の位置に置いてPNG画像として保存しました。 図１：長針  図２：短針  図３：秒針 秒針は、何も表示されていないように見えますが、白色なので背景色を変えればわかります。 で、参考させていただいたサイト ・アナログ時計をJavaScriptで作ってみた http://www.onside.com/blog/archives/2010/11/01/2992.html を基に、ライブラリであるjQueryRotateの ・jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting http://code.google.com/p/jqueryrotate/ 安定バージョンv.1.7をダウンロードしてコーディングしました。 <html> <head> <script type="text/javascript" src="./jquery-1.6.2.js"></script> <script type="text/javascript" src="./jQueryRotate.1.7.js"></script> <style type="text/css"> .clock_face { width:
1 件のコメント
続きを読む

Excelの図形を組み合わせて文字盤を作る方法

作成に使用した環境：Excel 2007 SP2 力業で誰得な方法です。 が、Excelなのでカラーバリエーションやサイズを変更しやすいかな・・？と思います。文字盤と言いながら、文字は入ってません。 Excelで文字盤の目盛の入れ方というのが正しいです(;^_^A 図1 完成図 JavaScriptを使って、アナログ時計を作りたかったのですが、文字盤は画像を使うというこで、ネットで文字盤の画像や文字盤を作成するフリーソフトを探しても良かったのですが、適当なのが無かったのと、背景色と合わせたかったので、自作することにしました。単純な構成の図でありながら、お絵かきソフトを使い慣れていない僕は、Excelの図形を組み合わせて作成してみたいと思います。 図2 基本の円 まず、挿入から図形を選択し、「円／楕円」という図形をシート上に描きます。楕円にならないよう、高さと幅を同じ値にしておきます。 １．文字盤と角度の関係 文字盤を描く前に、秒針の角度について触れておきます。当たり前の事ですが、０秒から６０秒進むのに、秒針は360°回転します。なので、１秒進むと、6°傾いているということが言えます。Excelで描く文字盤には、6°ずつ傾けて線を描きます。 表1-1 秒と角度の対応（30秒まで） また、図１にあるように、細かく目盛が振ってあるアナログ時計の文字盤の目盛の大きさは、 [大] ０秒、１５秒、３０秒、４５秒の位置 [中] ５秒、１０秒、２０秒、２５秒、３５秒、４０秒、５０秒、５５秒の位置 [小] それ以外の位置 となっていることが多いと思います。表1-1では、大：オレンジ、中：黄色、小：白色で色分けしてみました。それぞれの部分で違う目盛を描く必要があります。 これらを踏まえて、小サイズの目盛から描き始めていきます。 ２．小サイズの目盛を描く 挿入から図形を選択し、「直線」で、円を真っ二つにするように線を引きます。 図2-1 直径に線を引く Excel 2007だとちょうど直径になるように、線が引けます。この線を、書式リボンから、回転→
コメントを投稿
続きを読む

UMLについて

UML(Unified Modeling Language) ソフトウェア工学におけるオブジェクトモデリング用の標準化されたビジュアル言語。 僕的には、コーディングに入る前に、頭に描いてる設計をUMLの図を用いて見える化して、レビューワーと設計の認識を合わせたり、指摘受けたりしてました。 レビューワーが居なくても、全体像を確認する設計の地図のような役割で作成するもいいかもしれません。インプット／アアウトプットがどうなってるのか？ちゃんとカプセル化されてるのか？処理の順序は正しいか？とか・・・要は、メモ用紙に描いて実装方法を検討したりする図と変らないのですが、それが国際標準規格された図なので、インターネットにアップして、何の図なのか？というが共通認識できる図（モデリング言語）だと解釈しています。 UML以外でよく使われるもの ER(Entity Relation)図：データベースの設計 DFD(Data Flow Diagram)：構造化分析の設計 ER図はリレーショナルデータベースの設計に広く使用されています。 DFDはプログラムというよりは、経営に必要なビジネスプロセスを整理する、システム設計よりも上流の工程に利用され、処理手順と処理モジュールを一つの図にします。それに対して、UMLのアクティビティ図または、シーケンス図、クラス図、オブジェクト図など、目的に特化して図を定義します。その為、保守が煩雑になるデメリットを持っています。 上記でも述べたように、現在のソフトウェア開発において事実上の標準なので、最も普及しています。UML2.0以降では、１３種類も図が存在します。この中でよく使われる図を赤字にしています。 構造図 クラス図   複合構造図 コンポーネント図 配置図 オブジェクト図 パッケージ図 振る舞い図   アクティビティ図 ユースケース図 ステートチャート図（状態遷移図） 相互作用図 シーケンス図 コミュニケーション図
コメントを投稿
続きを読む

PHP上で扱う時間の覚え書き

文字列時間を連想配列として取得 $arry = strptime("2011-07-13 01:41:43", "%Y-%m-%d %H:%M:%S"); echo "<pre>"; print_r($arry); echo "</pre>"; 出力結果 Array ( [tm_sec] => 43 [tm_min] => 41 [tm_hour] => 1 [tm_mday] => 13 [tm_mon] => 6 [tm_year] => 111 [tm_wday] => 3 [tm_yday] => 193 [unparsed] => ) ただし、そのまま連想配列として表示しているのではなく、tm_monは-1ヶ月、tm_yearは-1900年されて表示されている。 指定した時間をUNIXタイムとして取得 //2011-07-13 01:41:43 $unixtime = mktime( 1, // 時間 41, // 分 43, // 秒 7, // 月 13, // 日 2011); // 年 echo $unixtime; もしくは、 $unixtime = strtotime("2011-07-13 01:41:43"); 出力結果 1310488903 UNIXタイムを指定の書式で取得 echo strftime("%Y/%m/%d", $unixtime)."<BR>"; echo strftime("%H:%M:%S", $unixtime); 出力結果 2011/07/13 01:41:43 UNIXタイムで現在時刻との差分 $dif = time() - $unixtime; // 基準は1970-01-01 00:00:00からの経過時刻 echo gmdate('Y年m月d日 H:i:s', $dif); echo "<
コメントを投稿
続きを読む

【Ajax】jQuery + PHP のJSON連携サンプルの覚え書き

動作確認の環境 サーバ：CentOS Apache/2.2.3 クライアント：Windos XP Opera 11.50 PHP：5.1.6 jQuery：1.6.2 Uncompressed Code JSON.php ：1.31 処理の流れは、 [クライアント] テキストエリアに文字列を入力 [クライアント] 送信ボタン押下でテキストをサーバへ送信 [サーバ] 取得したテキストと時刻でJSONデータを作成 [クライアント] サーバからのJSONデータを処理して、画面に表示 画面スクリーンショット クライアント側のサンプル jQueryのサイトへアクセスしてDonwloadボタンでjsファイルをダウンロードします。ソースを見やすいようにUncompressed版にしました。   http://jquery.com/ 現在最新は1.6.2でした。これをサーバへアップロード。上図の画面を表示すべくサンプルソースは、 <html> <head> <script type="text/javascript" src="./jquery-1.6.2.js"> </script> <script type="text/javascript"> $(function(){ // 初期化処理 $("#frmSend").submit(function(){ send($("#keyword").val()); return false; }); }); function send(keyword) { // 送信処理 $.ajax({ type:"POST", url:"http://takaiwa.net/"
コメントを投稿
続きを読む

【PHP】Postgresqlのselectやupdateメモ

ちょっと、PHPからPostgresqlのテーブルへアクセスしたいなって時に、使い回し出来そうなサンプルプログラム。 <?php /** * ConnnectDBクラス */ class ConnnectDB { // データベース設定 private $server = "localhost"; private $user = "username"; private $password = "password"; private $dbname = "database"; private $count = 0; /** * コンストラクタ * * @return void */ function ConnnectDB() { $cnstr="host=".$this->server ." port=5432 dbname=".$this->dbname ." user=".$this->user ." password=".$this->password; pg_connect($cnstr); } /** * テーブルからレコード取得 * * @return objects */ function getRecord() { if(!($result = pg_exec("select * from table")) ){ return "-1"; } $this->count = pg_numrows($result); return $this->_convertObject($result, $this->coun
コメントを投稿
続きを読む

PHPからGoogleカレンダー操作２：Event（予定）を投稿する

前回はPHPの環境を整えてカレンダーリストを取得するもの↓でしたが、 ・PHPからGoogleカレンダー操作１：Zend Framework(Zend Gdata)の環境を整える | たかいわ屋 http://takaiwa.net/archives/545 今回はカレンダーへ予定を追加してみたいと思います。前回同様、 ・Data API Developer's Guide: PHP - Google Calendar APIs and Tools - Google Code http://code.google.com/intl/ja/apis/calendar/data/1.0/developers_guide_php.html こちらを参考にします。 Event（予定）に設定する項目は、「Creating Events」辺りに説明があります。 Title：イベントの見出し When ：イベントの期間。省略するととりあえず現在時刻に追加されるようです Author：イベントを作成したユーザ Content：イベントの詳細（説明） EventStatus：そのイベントが確認済み (confirmed) なのか仮の予定 (tentative) なのか、 あるいは取り消された (canceled) を表す Hidden：カレンダー上で非公開にする Transparency：イベントをユーザの予定表に反映させるかどうかを指定 WebContent：イベント内で外部のコンテンツへのリンクを指定 Where：イベントの場所を指定し Visibility：イベントを公開リスト上で非表示   とりあえず、 赤字 の部分だけ設定してEventを投稿してみたいと思います。 サンプルコード <?php require_once 'Zend/Loader.php'; Zend_Loader::loadClass('Zend_Gdata'); Zend_Loader::loadClass('Zend_Gdata_ClientLogi
1 件のコメント
続きを読む

自宅サーバのWebページをお名前.comでドメインを取得

次回、ドメインを新たに取得した時用にメモがてら・・ 旧ドメイン：http://takaiwa.orz.hm/ 新ドメイン： http://takaiwa.net/ Operaブラウザでこのサイトをググって、旧ドメインを踏もうすると、むむ怪しいサイト・・？と警告が出てしまうので、 ←何かの勘違いだった・・ お名前.comで980円／年のnetドメインを取得しました。 ちなみに、旧ドメインの方は、 ・ドメイン名取得(ieServer.Net編) - CentOSで自宅サーバー構築 http://centossrv.com/domain-ieserver.shtml を参考に、無料で運営しておりました。 お名前.comでドメインが取得できたら、ログインして、レンタルDNSレコードの設定をいじります。   サイト中程にある、入力欄に ホスト名：（未入力） TYPE: A VALUE : （グローバルIPアドレス） を入力して、追加ボタンを押下します。ちなみに、グローバルIPアドレスは、 ・確認くん(VIA the UGTOP) http://www.ugtop.com/spill.shtml の「現在接続している場所（現ＩＰ）」で確認します。追加ボタンを押下すると、入力欄の下に追加されます。僕はこれで追加されてると思ったのですが、サイト下の方の「確認画面へ進む」へ行ってなかったので、なかなか反映されないなぁ・・とバカやってました。「確認画面へ進む」ボタンを押下して、追加した内容を反映させると、２４時間~７２時間でドメインに反映されるそうですが、実際はもっと早いです。時間は計ってませんが、半日もかかってないかと・・ ドメインにグローバルIPが反映されてるかどうかは、 ・IPひろば：メイン http://www.iphiroba.jp/index.php で、takaiwa.netと打ち込めばグローバルIPが割当たってるかどうかわかります。IPが割当たってれば、サイトを移行作業ですが、Apacheの設定等は割愛します。wordpressの移行に関しては、
コメントを投稿
続きを読む

PHPからGoogleカレンダー操作１：Zend Framework(Zend Gdata)の環境を整える

GoogleカレンダーをAPIで操作するには、 ・Google カレンダーの API とツール - Google Code http://code.google.com/intl/ja/apis/calendar/ Google データ プロトコルを活用すれば、Google カレンダーのすべての機能にアクセスできるアプリケーションを作成できます。 Google Maps APIのようにサービス個別にAPIがあるのではなくて、Google Data APIプロトコルでGoogleカレンダーとやりとりができるとのこと。もちろん、Googleカレンダーへログインできるアカウントがある前提です。で、プログラミングを行うにあたり、どの言語を使おうか迷いましたが、とりあえず激しい動きをさせる予定も無いのでPHPというこで話を進めたいと思います。 開発環境の導入 僕の現状の開発環境は、 OS：CentOS 5 PHP：5.1.6 Googleカレンダーの開発者ガイドによると、 ・Data API Developer's Guide: PHP - Google Calendar APIs and Tools - Google Code http://code.google.com/intl/ja/apis/calendar/data/1.0/developers_guide_php.html PHPからZend Frameworkのライブラリを利用してGoogle Data APIへアクセスする方法が解説されています。必要な環境は、 PHP 5.1.4以降 Zend Framework 1.0.0 RC2a以降 とりあえずPHPは現状のものを利用します。Zend Frameworkは入れてませんが、フレームワークその物でなくても、Google Data APIならZend Gdataを利用すれば良いとのことで、こちらだけをダウンロードしてみます。 ・Zend Framework: Downloads: Downloads http://framework.zend.com/download/gdata ※20
1 件のコメント
続きを読む