ゼミの来た道: 10月 2014

2014年10月28日火曜日

ゼミ8回目 - Google マップのマーカー変更など

前回、欠席していた荒木くんに6,7回目のゼミでやった内容を教えて復讐した。

fusion tableで編集した岡山の病院のマップで、
病床数に応じて200床未満は○色、200床以上500床未満は○色のようにマーカーの色を変更した。
Culumnにマーカーを追加し、そこに病床数に応じたマーカーの色(large green,small yellow等)を記入して、Change feature styleからマーカーに作った"マーカー"のCulumnを指定してマップに表示した。
しかし、Bucketsで病床数の値の範囲を指定して、一度に変更する方が効率が良かったです。

notepad++でスタイルの変更をしました。

s.shinpei

Fution Tableを作成の続き（ゼミ8回目）

今日やったこと
1、病床数の範囲毎にマーカーの変更
2、情報ウィンドウのテキストを右寄せに変更

病床数の範囲毎にマーカーを変更した際、岡山県には大規模病院が少ないということがわかった。また、小規模病院がほとんどであることがわかった。

マーカーを変更しました

今日の内容
・病床数によってマーカーを変更（～１９９：緑、～４９９：黄、500～赤）
・情報ウィンドウのテキストを右寄せに変更

右寄せにするのはスタイルシートにth {text-align: right;}を追加しました。
前より見やすくなりました。

岡山県の病院マップ
http://w3412042.php.xdomain.jp/okayama.html

ゼミ　８回目

今日の内容
６回目の内容からゆっくり進んだ。
フューチャーテーブルからQRコードを作った。
７回目の内容でフューチャーマップを少し編集した。
最後にフューチャーマップのマーカーを病床数ごとに色分けをした。
あと、右寄せもした。

反省
愛媛のお土産渡せた。
携帯変えて使い方わからない…

2014年10月25日土曜日

第8回目

前回にひき続いて，フュージョンテーブルで作成した岡山県の病院に次の修正を行う．

マーカーの形状を以下のようにする。

　　　病床数が500床以上の大規模病院：大きな赤（large_red）
　　　病床数が200床以上500床未満の中規模病院：大きな黄（large_yellow）
　　　病床数が200床未満の小規模病院：大きな緑（large_green）

情報ウィンドウのtrタグのテキストを右寄せにする

スタイルシート

th {text-align: right;}

2014年10月24日金曜日

Fution Tableを作成の続き（ゼミ7回目）

今日やったこと
1、情報ウィンドウに一般病床、DPC算定病床数、療養病床数、精神病床数、結核病床数、感染病床数を表示する。
2、クリックイベントハンドラを作って情報ウィンドウを編集，表示する

前回やったことの復習をしたが、教えてもらっただけではほとんど覚えられないと感じた。

情報ウィンドウを編集しました

情報ウィンドウの編集をしてわかりやすくなった。
リンクですぐ病院を検索できるようになった。

岡山県の病院マップ
http://w3412042.php.xdomain.jp/okayama.html

ゼミ7回目 - Fusion Tables

前回のゼミを欠席していたので、前回やった内容を教えてもらいながら作業しました。

岡山県の病院マップです。
http://w3412042.php.xdomain.jp/okayama.html

s.shinpei

2014年10月22日水曜日

第7回ゼミ

フュージョンテーブルで作成した「岡山県の病院」に以下のバージョンアップを加えて「岡山県の病院(2)」を作る。

情報ウィンドウに一般病床数，DPC算定病床数，療養病床数，精神病床数，結核病床数，感染病床数を表示する。
クリックイベントハンドラを作って情報ウィンドウを編集，表示する

    // クリックイベントハンドラ
    google.maps.event.addListener(layer, 'click', function(ftMouseEvt) {
      var row = ftMouseEvt.row;
      var html = [];
      html.push("<div class='googft-info-window'>");
      html.push("<table id='info-window'>");
      html.push("<tr><th>病院名:</th><td><a href='http://www.google.co.jp/search?q=" + encodeURIComponent(row["正式名称／二次医療圏"].value) + "' target='_blank'>" + row["正式名称／二次医療圏"].value + "</a></td></tr>");
      html.push("<tr><th>病床数:</th><td>" + row["病床数"].value + "</td></tr>");
      html.push("<tr><th>一般病床数:</th><td>" + row["一般病床数"].value + "</td></tr>");
      html.push("<tr><th>DPC算定病床数:</th><td>" + row["DPC算定病床数"].value + "</td></tr>");
      html.push("<tr><th>療養病床数:</th><td>" + row["療養病床数"].value + "</td></tr>");
      html.push("<tr><th>精神病床数:</th><td>" + row["精神病床数"].value + "</td></tr>");
      html.push("<tr><th>結核病床数:</th><td>" + row["結核病床数"].value + "</td></tr>");
      html.push("<tr><th>感染病床数:</th><td>" + row["感染病床数"].value + "</td></tr>");
      html.push("</table>");
      html.push("</div>");
      ftMouseEvt.infoWindowHtml = html.join("");
    });

javascriptでurlEncodeするには，encodeURI(), encodeURIComponent()を使う
フュージョンテーブルはxlsmファイルは読み込めない
フュージョンテーブルはExcelファイルに複数のシートがあったら最初のシートを読み込む

2014年10月21日火曜日

ゼミ６回目

今日の内容

フューチャーテーブルの使用

QRコードにしてアクセスできるようにする。

反省

いるもの全部忘れました。

すいません

フューチャーテーブルを使って何ができるか考える。

欠席・清水

次回は休みます。。。

Fution Tableを作りました

Fution Table
https://www.google.com/fusiontables/DataSource?docid=1Z7P5MU7r_Q91EHP1Z5u5XvQXb9FGfhZA1535-PJd

岡山県の病院マップ
http://w3412042.php.xdomain.jp/okayama.html

今日はFution Tableを使って岡山県の病院マップを作った。Googleマップと違ってHTMLをいじれば自由に変えることができる。

次回は自分の作ったマップをFution Tableを使って編集する！

Fution Tableを作成しました（ゼミ6回目）

フュージョンテーブル：https://www.google.com/fusiontables/DataSource?docid=1NfuuyltNsKifqUd2aS1bHD_Fqo7FNHb6y4Hxht9B

岡山県の病院マップ：http://w3412047.php.xdomain.jp/okayama.html

今日はnotepad++へxdomainを登録した。htmlをアップロードしたとき文字化けしていたが、その原因はUTF-8に設定していなかったことだとわかった。

第6回ゼミ

前回やったこと

前回，無料レンタルサーバであるXdomainにアカウントを登録した。今後はこの無料レンタルサーバを利用して様々なWebアプリケーションの開発を行う。

今日の作業内容

ntp++にxdomainを登録

https://www.xdomain.ne.jp/login/member.php
ユーザ名はFTPアカウント名（hinfokumw.php.xdomain.jpといった感じ）になることに注意

Fusion Tables

目的は，情報ウィンドウのカスタマイズとhtmlの編集
Googleマイマップで作成したマップをフュージョンテーブルを使って作成する
作成したhtmlをnotepad++で読み込んでサーバへアップロード

材料：岡山県の病院.xlsx (Google ドライブのゼミ2014\Google Map データ)

情報ウィンドウのカスタマイズ

2014年10月17日金曜日

ゼミ5回目

今日やったこと
①サーバの登録
②ffftpの設定
③htmlの作成
htmlは1年ぶりにやったためほとんど覚えていなかったので、htmlを復習する必要があると感じた。

レンタルサーバなど

今日はサーバの登録、HTMLなどを行った。

設定など難しかった。

HTMLはやったことがあったけど忘れていた。

管理士の勉強がんばります。

ゼミ　５回目

今日の内容
学内サーバへの接続
ｈｔｍｌのプログラミング
レンタルサーバーのレンタル

メモ帳貰ったーーーー。

ゼミ5回目 - サーバーへのアップロード

学内サーバーに自分のアカウントで接続し、パスワードを変更しました。
FFFTPで、そのサーバーを指定し、phpのサンプルをアップロードしました！
notepad++でNppFTPの設定をして、自分で作ったhtmlファイルをアップロードしました！
Xdomainのレンタルサーバーを借りた！
せっかくレンタルサーバーを借りたのだから個人的に他でも活用したいと思います！

ゼミ5回目

サーバ

学内用サーバと学外用サーバ（無料レンタルサーバ）を用意する。今後作成するWebアプリケーションはこれらのサーバ上で開発する。

学内サーバ

orca01.labo.mw.kawasaki-m.ac.jp

無料レンタルサーバ

Xdomain無料レンタルサーバ

「お申込み」→「無料レンタルサーバのご利用お申込み」を選択
メールアドレスを入力
受け取ったメールのURLをクリック
指示に従って申込を行う

2014年10月15日水曜日

学内サーバを使う

レンタルサーバ@PAGESが利用できないので，学内サーバ（orca01.labo.mw.kawasaki-m.ac.jp）を利用する。

学番でアカウントを登録したので，初期パスワードでログインし，passwdコマンドで各自のパスワードに変更する
ホームディレクトリにmkdirコマンドを使ってpublic_htmlという名称のディレクトリを作る（"mkdir public_html"）
FFFTPにホストを登録して接続テストを行う

2014年10月14日火曜日

@PAGESが登録できない

レンタルサーバ@PAGESが新規にアカウントを登録できなくなっている。そこで、やむなくorca01を代理サーバとして利用しようとユーザ登録を行った。その際 useradd コマンドを使って登録すると、なんとホームディレクトリが作成されないことが判明。その代わりに adduser コマンドを使うとホームディレクトリは作成される。これは気を付けないと・・・。
@PAGESが利用できないとなると、無料レンタルサーバを探さなくちゃ・・・。

ゼミ4回目

今日やったこと
①ExcelでurlEncodeを行って、GoogleマップにマイマップにURLを追加
②notepad++をインストール
③FFFTPをインストール

USBメモリに開発環境をインストールした。

マイマップにURLを追加

今日の内容
・マイマップにURLを追加
・notepad++インストール
・FFFTPインストール

今日はいろいろインストールしてUSBに入れた。
マイマップはURLを追加したのですぐ検索できるようになった。

ゼミ　４回目

今日の内容・反省

ExcelでURLEncodeの変換をした。
USBメモリ貰った‼
USBにファイルをダウンロード
zipファイルを解凍して入れた。

部活の試合まで頑張りますｗｗｗ

ゼミ4回目 - urlEncode 等

Excelを用いて、Googleでの検索ワード(8番らーめん ○○店)をurlEncodeして、そのURLをマイマップ上に表示しました。

レンタルサーバーのアカウントを取得しようとしましたが、現在、新規登録ができない状態だったので断念しました。
臨時で学内のサーバーを使うことになりましたが、ディレクトリを作る許可？が必要とエラーが出たので中止になりました。
Notepad++とFFFTP(zip版)をダウンロードし、USBメモリに入れました。

Notepad++もFFFTPも中学生の頃から趣味のホームページ作成で利用しているので、
操作が分かりやすくて良かったです。

2014年10月12日日曜日

第4回ゼミ

第4回ゼミでは次のことをやる。

ExcelでurlEncodeを行って，GoogleマップのマイマップにURLを追加する

ExcelでurlEncodeを行う方法については，「日本語URLをExcelで手軽にURLエンコードする方法」を参照
URLは”http://www.google.co.jp/search/q=[urlEncodeした文字列]”の形式にする

環境の構築（詳細）

@PAGESのアカウントを取得
notepad++をインストール
FFFTPをインストール
"http://book.mynavi.jp/support/pc/php/"からサンプルをダウンロードして展開（フォルダ：PHP_sample）
FFFTPを使って次のフォルダを作成

PHP_sample
その中にpart3_sample
その中にFFFTPを使ってimagesフォルダとstyle.cssをコピー

notepad++でsample01.phpを開いて，サーバへアップロード，実行

Fusion Tables

目的は，情報ウィンドウのカスタマイズとhtmlの編集
Googleマイマップで作成したマップをフュージョンテーブルを使って作成する
作成したhtmlをnotepad++で読み込んでサーバへアップロード

2014年10月3日金曜日

ゼミ3回目

前回からGoogleマップでマイマップを作成していた。

今日やったこと
①新たなマイマップを作成しそれを削除する。
②データの行・列の追加
③マーカーにラベルを追加
④ルート検索・画像の追加などの情報ウィンドウの編集
⑤URLエンコード
⑥レイヤの追加
⑦マイマップの共有 https://www.google.com/maps/d/edit?mid=zQ8Z8VYqa9iI.k3beyyEbs3eY

Googleマップへ画像を追加するには公開されている画像でなければならないことがわかった。また、自動リンクは英数字・記号でなければならないことがわかった。