JavaScriptでテーブルをボタンが押されたら動的に1行増やしたかった。
それで書いてみたのが下のコード
これで増えるのだけれど、タイトルを各部分をthタグにしたかったのだが、tdタグになってしまう。
insertCell()はtdタグを追加してくれるだけなのかな。
しょうがないのでこんな感じにした。
これでthタグを追加できたけど、もっといいやり方がありそうな気がしてしょうがないなぁ。
JavaScriptは難しい。
以前紹介したのですが、このブログではgoogle-code-prettifyってのを使ってコードをハイライトしていました。
でも、微妙に使いにくかったんですよね。色づけの判断がちょっと微妙なのと、行数が出ないのが見た目的によろしくない。
なので、巷の技術系ブログでよく使われているのを見かけるSyntaxHighlighterってのを使ってみました。
まず、SyntaxHighlighter @ Open Sourced Brain からファイルをダウンロードしてきます。
解凍するとsyntaxというフォルダが出来るので、それをpluginsの中にそのまま入れます。
次に、プラグインを有効化してあげます。
次に、各種設定から使用するコードの種類を選択します。以下の言語が選択できます。
とりあえず使いそうな言語にチェックを入れます。他にも行数の表示などの設定が出来ます。
次にハイライトする為のCSSとJSを読み込みます。
プラグインを有効化した時点でCSSは自動的に読み込まれるみたいです。
ただ、JSファイルは自動的に読み込まれないみたいです。これが分からなくて、小一時間躓きました。どこのブログを読んでもJSの読み込みについては書かれていない・・・。もしかして、自分の環境だけなのだろうか・・・。
とりあえず</body>の直前で
こんな感じでJSを読み込んであげます。
これは、ダウンロードしたファイルの中にあるScriptフォルダの中にあるJSファイルを読み込んでいます。先ほどの各種設定から設定した言語のJSを読み込んであげます。てか、どう考えてもここは各種設定から設定してるんだから自動的に吐き出されるはずだよなぁ・・・。なんでなんだろう・・・。
あとは
[ source:css]ここにコードを書きます。[/source]
こんな感じで設定してあげると、ハイライトされて表示されます。cssの部分は、お好きな言語に指定してください。あと、”[”の後に半角スペースが入っていますが、実際には要りません。
ページにgoogleMapを表示させたかったので、GoogleMAPSAPIを使ってみた。
住所だけわかっていて、初期表示時に中心を合わせたい状況さったので、そんなScriptを作ってみた。
一応ちゃんと動いてた。
便利だなぁ、googleMapは。
参考にさせてもらったサイト→Geekなページ
前回の記事で、都道府県選択をさせる時の色々な方法を考えたんですが、やっぱり日本地図が背景としてあって、その上にテキストベースのリンクがあるってのが一番使いやすいかなーって思い、作ってみました。
こんな感じ。
でも、これってHTMLできれいにマークアップするの大変じゃね？テーブル使いまくりだよなぁ・・・って思ってたんですが、そんな事なかった。よくよく考えたら、CSSのpositionで指定してあげれば出来ますね。
HTMLの方はこんな感じ。
で、あとは各地域のID毎に
こうやって位置を設定してあげれば、オッケー。
これで綺麗に実装できました。
個人的に position:absolute; で何かをするのが嫌いだったのでほとんど使った事が無かったのでぱっと出てきませんでしたが、こういう使い方ならこれからもしていきたいと思いました。
結構わかりやすいとは思うのですが、やはり微妙なポジションの県が探しにくいですね。
東海４県、東海３県の定義や、関西、近畿といった表現など、その辺がバラバラなので、ぱっとみでわかりづらい県もありますね。
で、例えば日本地図を正確に表現して、実際の都道府県の位置をクリックするとそこに飛ぶっていう形をFLASHで作ろうかなとも思ったのですが、それだと面積の小さい県、例えば東京都や神奈川県なんかが押しづらくなっちゃうんですよね。
あと、それだと東北地方を選択っていうのも実装しにくい。
そういう理由もあって、結局上記のような形にとりあえずは落ち着きました。
1.2にしてviewをbakeしてみたら、拡張子がctpのファイルが生成された。
1.1はthtmlだったのに。
とりあえず、thtmlのviewを作っても普通に表示できちゃった。
よくわからなかったので、師匠に相談したところ、
どっちでもいいらしい。
拡張子を短くしたかったとかそんな理由だとおっしゃられた。
一応、同名のctpファイルとthtmlがあった場合は、ctpが優先されるという差があるとのこと。
せっかくだから、ctpで行って見ることにしよう。
あと 1.2はバリデーションが、このサイトを参考に便利らしいからいろいろ試してるところ。
現状ではuniqueがうまく動いてくれない。
謎だ・・・
