カテゴリ: 勉強会など

ページ: << 1 2 3 4 5 6 >>

第15回高蔵寺SE勉強会

パーマリンク 2008/10/19 23:59:30 著者: kumaold メール
カテゴリ: 仕事, 勉強会など

本日は第15回高蔵寺SE勉強会を開催しました。

 

1. 宿題

今回の宿題は、久々にJavaScriptです。多分2ヶ月ぶりくらい

◆上級者用

この場所の裏側はどこ?

[言語]JavaScript・PHP
[お題]
GoogleMaps上の任意の位置をクリックすると、その場所の地球の裏側の地図を表示するようにしてください。


実装の方法とか表示方法は自由なので、できるだけ画面遷移がないようにと考えた結果、1画面で2マップ表示させるということに落ち着きました。


できたものはこちら「地球の裏側を表示@GoogleMap

ソースを直接見てもらった方が早いんですが、一部を抜粋しときます。

//左マップの初期設定
var map1 = new GMap(document.getElementById("map1"));
map1.addControl(new GLargeMapControl());
map1.addControl(new GMapTypeControl());
map1.centerAndZoom(new GPoint(137.385, 35.694), 14);
document.getElementById("map1x").innerHTML = 137.385;
document.getElementById("map1y").innerHTML = 35.694;

//右マップの初期設定
var map2 = new GMap(document.getElementById("map2"));
map2.addControl(new GLargeMapControl());
map2.addControl(new GMapTypeControl());
map2.centerAndZoom(new GPoint(-42.615, -35.694), 14);
document.getElementById("map2x").innerHTML = -42.615;
document.getElementById("map2y").innerHTML = -35.694;

//左マップがクリックされたらgetPoint()を呼び出す
GEvent.addListener(map1, "click", getPoint);

function getPoint (overlay, point) {
    //左マップにマーカー作成
    map1.clearOverlays();
    var point1 = new GPoint(point.x, point.y);
    var marker = new GMarker(point1);
    map1.addOverlay(marker);
    
    //左マップの座標を小数点以下3桁で表示
    document.getElementById("map1y").innerHTML = point.y.toFixed(3);
    document.getElementById("map1x").innerHTML = point.x.toFixed(3);
    
    //地球裏側の座標取得
    reversePoint(point);
    
    //右マップを移動させ、新たにマーカーを作成
    map2.clearOverlays();
    map2.recenterOrPanToLatLng(new GPoint(point.x, point.y));
    var point2 = new GPoint(point.x, point.y);
    var marker = new GMarker(point2);
    map2.addOverlay(marker);
    
    //左マップの座標を小数点以下3桁で表示
    document.getElementById("map2y").innerHTML = point.y.toFixed(3);
    document.getElementById("map2x").innerHTML = (point.x).toFixed(3);
}

//地球裏側の座標計算
function reversePoint (point) {
    //東経0~180度
    if (point.x >= 0) {
        point.x = -(180 - point.x);
    //西経0~180度
    } else if (point.x < 0) {
        point.x = (180 + point.x)
    }
    
    //緯度は単に反転
    point.y = -point.y;
}


まあ小細工が色々してあるだけで特に解説不要かと思いますが。

他の方の発表とか見ていると、いろんな表示の仕方があるんだなぁと思いました。

2. 開発
BakeSaleを触ってみよう

CakePHP1.2で開発された BakeSale を実際にインストールして、ソースを触りながら、技術を学んでいこう。


前回ソースコードリーディングをした Bakesale を実際に導入しながら、動作を研究したりするはずだったのですが・・・

インストール作業に四苦八苦。時間をほとんど食い潰してしまいました。


そもそも動作環境がMySQLなのに、PostgreSQL環境で無理矢理動かそうと設定を変更したりSQL文を直したりしたのが間違いだったようで。

最初っからMySQLの自宅鯖上で動かしとけばよかったものを。

そんなわけで、ほとんど触れずじまいなわけでした。

第14回高蔵寺SE勉強会

パーマリンク 2008/10/05 23:00:00 著者: kumaold メール
カテゴリ: 仕事, 勉強会など

本日は第14回高蔵寺SE勉強会でした。

1. 宿題

前日、この宿題のために6時間近くもかけてActionScriptを習得しました。

その宿題とは・・・

◆上級者用

CakePHP+FLASH

[言語]CakePHP
[お題]
CakePHP と FLASH(ActionScript)を絡めたプログラムを作ってみよう。

今回はパンダちゃんが一緒に勉強会に来れる最終回だったので、非常に思い切った宿題にしてしまったわけです。

もちろんFlashなんぞはまともに使ってみたことがあるはずもなく、ほとんど初心者状態からの制作だったので苦労しました。


できたものはこちら。

メールのない状態
他の窓の下に隠れます。
↓メールが来ると ↑メールがなくなると

メールのある状態
最前面にでてきます。

透明部分は、その下に操作が透過されます。


またついカッとなって馬鹿なものをつくってしまったw

要は新着メール通知ソフトなのかな?


長くなりそうなので続きはこちら

続きを読む »

type="text/javascript">
type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

第13回高蔵寺SE勉強会

パーマリンク 2008/09/21 23:00:00 著者: kumaold メール
カテゴリ: 仕事, 勉強会など

本日は第13回高蔵寺SE勉強会を行いました。

今回から日程とやることを相談してしっかり決めてから行うことになりました。


で、まずは宿題の方から。今回はこちらです。

◆上級者用

CakePHPの新しい機能を発見しよう

[言語]CakePHP
[お題]
CakePHPの機能で自分が使ったことのない機能を使ってみよう。


ということで、解説本で見たことしかなかったbakeを使ってみました。


ちょうど完全日本語化も完了していたので、比較的使いやすい感じです。

オプションで読み込むことのできるテンプレートのコントローラやビューも、手直しをすれば十分に使えるレベルにあるようです。

新規でコントローラなどのファイルを作成する際にでも使っていこうかと思います。



午後からの開発&発表の時間では、先日の合宿のアクセス統計の部分を何か分かりやすいグラフで表現できないかと探してみたところ、

amCharts』なるFLASHできれいなグラフを作成してくれるツールがありました。


これ、色々なグラフに対応しており、サンプルを見ると多機能さに驚きます。


今回は、その1つである「Pie & Donut chart」(通称、ampie。要は円グラフ)を使わせてもらいました。

あまりに多機能すぎて紹介できないので、こちらの解説ページなどを参考に。

//カウント用変数
$etc = 0;

//XMLファイルのヘッダ
$text  = '<?xml version="1.0" encoding="UTF-8"?>' . "\n";
$text .= '<pie>' . "\n";

//XMLファイルにデータを出力
foreach ($data as $key => $total) {
    //上位10件を表示
    if ($key < 10) {
        //アクセス元不明は除く
        if ($data['org'] != '') {
            $text .= '    <slice title="' . $data['org'] . '">' . $data['count_org'] . '</slice>' . "\n";
        }
    //その他を集計
    } else {
        $etc += $data['count_org'];
    }
}
$text .= '    <slice title="その他">' . $etc . '</slice>' . "\n";

//XMLファイルのフッタ
$text .= '</pie>' . "\n";

//XMLファイルを保存 (webroot/logs/access_host.xml)
if($text){  
    $fp = fopen('logs/access_host.xml', 'w') or die("Error!!\n");  
    fputs($fp, $text);  
    fclose($fp);  
}


先日書いた、アクセス元ホスト統計のデータをXML型式のファイルを介して渡してやります。

全件グラフにすると最後は細かい項目で埋め尽くされてしまうので、上位10件は個別、残りはその他としました。


で、その結果の出力が↓こちら。

注: 実際はFLASHなのでいろいろと動きます。


割と簡単に見やすい円グラフが作成できました。

まだオプションの項目がたくさんあるので、色々触ってみたいと思います。



グラフ活用の技術 データの分析からプレゼンテーションまでグラフ活用の技術 データの分析からプレゼンテーションまで
内田 治

PHP研究所 2005-03-16
売り上げランキング : 270587
おすすめ平均

Amazonで詳しく見る
type="text/javascript">
type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

<< 1 2 3 4 5 6 >>

一六社で働くITエンジニアのブログ。

普段はWeb系システム開発と地元のPCサポートをやってます。いつの間にやら会社に8年目。
技術ネタ中心に日々の仕事と生活と趣味やらを気が向いたら書いてます。

2017年3月
 << <   > >>
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

検索

XMLフィード

16ブログ     powered by b2evolution free blog software