mixiユーザー(id:96718)

2016年09月28日21:49

152 view

テスト版制作(地図・列車一覧)

地図
http://yamatetsu.sakura.ne.jp/listpages/chizulink_test.cgi

列車一覧
http://yamatetsu.sakura.ne.jp/listpages/ressha_test.cgi

jQueryというJavascriptというプログラム言語のライブラリを取り入れて、テスト版をつくってみました。自前で書くとものすごい行数を書かないといけないものが、ライブラリを取り入れると自分が書くのは短い行で済んだりします。

まあ人によっては「えっ?今ごろjQuery?」かも知れませんが、すべて一人で作ろうとすればこんなもんです…。

以下の2件を試してみました。
・Google Mapのようにマウスのドラッグで画像が動く(列車詳細は横方向限定・慣性動作なし)
・クリックすると暗くなってサブの画面が表示される(モーダルウインドウ)

列車・車両データはいまアップされている本番データを使っているので、一覧のどの列車をクリックしても同様の動きをします。

詳細地図画像は、新しいものを用意したかったのですが、とても時間がかかるため、現在の地図を拡大縮小していたりして、本当にテストのテスト版です。

廃止線(運行実績あり)や未成線(運行実績なし)も加えた地図を作り変えたいのですが、文字の配置や路線の密度を考えながらやるとなかなか進まないものです…。

PC上ではOKな感じです。iPhoneは持ってないのでまだ見れていませんが、実際自分のスマホ(Android)で見てみたら、モーダルウインドウは動いたのですが、ドラッグで画像が動きませんでした…。

なにが原因か調べないとならないのですが、そういえばスマホの場合は「ドラッグ」と言わなかったような気がするので、そのあたり調べてみます…というか、スマホサイト自体まだ作っていませんでしたね…。

まだまだ先は長いです…。

つづく。
0 0

コメント

mixiユーザー

ログインしてコメントを投稿する

<2016年09月>
    123
45678910
11121314151617
18192021222324
252627282930