チョモランマに登るには。

Androidアプリ開発の初心者が立派な開発者になるまで

ツールチップという吹き出しを導入してみた話。

こんにちは。

絶賛改装中だったyoutubeランキングサイトにbootstrapのtooltipをつけてみました。

本記事はその実装に至るまで汗と涙の記録です。

 

tooltipとは

マウスを置くとなんかひょこっと出てくる吹き出しです。

サイトの全ページに実装しているので試してみてください。

デイリー猫動画ランキング

 

動機

最初は再生数などの情報もサイトに載せていたのですが、あまりにも見にくいため、サムネとタイトルだけを一覧表示する形に落ち着いていました。

それがbootstrapを使ったことがきっかけで、tooltipという吹き出しが簡単に使えるということを知り、そこへ再生数など入れれば、動画選びに非常に役立つとひらめき、実装することに決めました。

 

実装に至るまでにしたこと

まず、ドットインストールにbootstrapの講義があり、その中にtooltipを実装しようというものがあったので、それを習ってコードを写しました。

#17 tooltip、popoverを使おう | Bootstrap 3.0入門 - プログラミングならドットインストール

で、実際コードも少ないので、いろいろいじったり、オプションを追加したりして、なんとかいけそうだなと理解しました。

ただ、私がやりたいことは、youtubeAPIからもらったfeedをツールチップの吹き出しの中に入れることだったので、この部分で色々と試行錯誤がありました。

 

試行錯誤というゲーム

デバッグというのは本当にいいものですね。

間違っている時は間違っているよと教えてくれる。

恋愛にもデバッグがあれば助かるのにと思ってしまいます。

 

コードをいじっては直し、いじっては直し、いじっては直し・・・。

でもプログラミングを初めて3か月、この繰り返しがゴールに繋がっていると思えるようになりました。

 

1、吹き出しの中の改行問題

吹き出しの中で<br />を使うときはオプションとしてdata-html="true"を使うとちゃんと改行できました。

2、コメントを認めていない動画がある問題

よくyoutubeの動画にコメントができない動画ありますよね。

コメント数を取得するときに、そういった動画があると止まってしまうバグがあるとわかりました。

結構悩みましたが、事前にif文でif(item.gd$comments !=null)として、そこのfeedがあれば変数に入れて、なければハイフンを入れてと命令しておくことで解決しました。

3、ダブルクォーテーション問題

簡単に吹き出しの中身をお見せすると、title="投稿日、チャンネル名、再生数、コメ数" って感じなんですが、チャンネル名に「"」こいつがいると勝手にtitleが閉じられていることが途中で発覚しました。

「エスケープ・・・」という言葉が頭の中で繰り返されていましたが、もう私の体力と集中力も限界で私自身がエスケープしたいぐらいでした。

色々書き換えたり、正規表現を使ったりしましたが、うまくいかず、結局私をこの問題からエスケープさせてくれたのはreplaceメソッドというものでした。

 

先にfeedを変数に入れておき、その中にあるダブルクォーテーションをreplaceメソッドによって書き換えることで、この問題も解決することができました。

 

終わり

という感じで色々問題もありましたが何とかそれらを乗り越えてツールチップを実装することができました。

勉強のアウトプットとして始めたyoutubeAPIを使ったあのサイトも、ちょくちょく色々いじってたら、それなりに経験値も貯まっていくんだなと実感しました。

 

是非暇なときはサイトの方も覗いてやってください。

今のとこ猫と世界とゲーム実況のページがあります。

ありがとうございます。

 

デイリー猫動画ランキング

世界のYouTube!-人気動画をランキングするサイト

ゲーム実況(1日)ランキング