くちぶえ音楽院がバージョンアップ!

この度、大規模なサーバメンテナンスを行い、くちぶえ音楽院をバージョンアップ致しました!

ユニバーサル対応の進化、中長期的な視点に立ったレガシーコードの排除が今回の主な目的で、内部的には様々な改善がなされていますが、デザインや操作性は極力元の環境を維持するよう配慮しています。

今回のバージョンアップに伴う変更は以下のとおりです。

1.URL構造の大幅変更

これまでは以下のような日本語のURL表記を用いていましたが、今回の変更により、すべてアルファベットベースのURLへ変更しました。

oldurl

この影響によって、外部サイトに設置された既存の個別記事へのリンクが機能せずすべてリンク切れとなり、また、一時的に検索エンジンのインデックスから外れてしまうことに伴う検索性の低下などのデメリットが多々発生しますが、以下に挙げるメリットのほうが長い目で見れば大きいと判断しました。

・中長期的にくちぶえ音楽院をグローバルに展開したい

技術的には同一URLでアクセス元に応じて日本語、英語、中国語など、最適な言語をサーバから出力し個々の環境に応じた画面を表示させることは可能ですが、日本語URLはこの将来の展望の大きな足かせになっていました。

・IEユーザにとって見づらい

Google Chromeなど多くのモダンブラウザ環境において日本語URL表示(自動変換)がサポートされていますが、なぜかIEではいまだにそれがサポートされておらず、以下のように表示されてしまっていました。

oldURL-IE

・掲示板、ソーシャルメディアへの記事レベルでのシェアが困難

掲示板などで「このURLが参考になります!」といった投稿を多く見かけますが、日本語URL構造のままではリンクアドレスとして自動変換されない場合が多く、実際にはアドレスバーからコピーペーストした非常に長いアドレスを利用する必要がありました。

longURL

文字数が限られた投稿スペースにおいてこのアドレスを張るのは困難な場合が多く、利便性を大きく損なっていました。上記URLは今回の変更によって以下のとおりシンプルになります。

http://torinaki.com/how-to/recording/ipad

これまでは「リンクはトップページへ。各記事への直リンクはご遠慮ください」という案内を掲載していましたが、今後は掲示板等で必要に応じて各記事への直リンクを貼っていただいて構いません(リンクの永続性を保障するわけではありません)。

2.サイトの高速化

レガシーコードの排除、キャッシュ化、アルゴリズムの見直し等により、従来よりも2~10倍程度の高速化を実現しました(サーバ間の計測値として)。接続デバイスの環境に応じて動的にページを作成し配信する形式を採用しているためこれまで「重い」と感じていた方も多いかと思いますが、従来よりは「軽く」なっていることが実感できるかと思います。

3.Adobe Flashの排除

くちぶえ音楽院では一部のコンテンツにAdobe社のFlashというテクノロジーを採用していましたが、最近著しくシェアを伸ばしているiOSはFlashにネイティブ対応していないため、iPhoneやiPadで表示すると以下のようなメッセージが表示されてしまう不具合がありました(下図)。

flash

Flash対応アプリを別途インストールすることで閲覧自体は可能になりますが、より多くの方に手間をかけず閲覧頂けるようFlashを使わない「よりモダンな方法」を採用することにしました。これによってPCはもちろん、iPad、iPhoneでも別途アプリをインストールすることなくすべてのコンテンツが閲覧できるようになりました。

メンテナンス後:iPadで先ほどの音声コンテンツを表示したときの画面

正常に表示されていればこのように見えているはずです↓

newaudio

最新のHTMLを活用しているため古いブラウザでは逆に閲覧することが出来なくなりましたが、最新版に無料アップデートしていただくことで幅広いデバイスでご利用いただけるようになっています。

4.ソーシャルメディアとの連携強化

各記事にFacebookなどのソーシャルメディアボタンを設置することにより、シェアしたいと思った記事を気軽にソーシャルメディアへ投稿し共有することが可能になりました。

social

*動作が重いため廃止しました(2014/4/12)

5.一部環境でのナビゲーションメニュー不具合改善

ナビゲーションメニューは常に最前面に表示されるように意図していますが、一部の環境において動画などの裏にメニューの内容が入り込んでしまう不具合が発生していました。

(不具合の例)画面下の動画の裏にメニューが埋もれてしまい一部のメニューがクリック出来ない・・・。

bad

またそれとは別に、一部のスマートフォンでYouTube動画のサムネイルが適切に表示されず、以下のように黒塗りになってしまうといった不具合報告も頂いていました。

kuronuri

今回のサイトメンテナンスにより、幅広い環境においてこれらの不具合を改善することが出来ました。

(これまで不具合が発生していたIEやSafari環境でも問題のない表示を確認)

good2

(スマートフォンでも動画のサムネイル表示が可能になりました)

smagood

最後にお願い

このような細かな記事にまで目を通していただき本当にありがとうございました。

現在、PC、Mac、iPhone、ゲーム端末など、極めて多くのデバイスからWebにアクセスが可能な状況になっています。すべての環境で最適なパフォーマンスが得られるようにサーバを設定することは現実的に不可能ですが、可能な限り対応し、このサイトを通して多くの方に口笛の素晴らしさを伝えていきたいと切望しています。

表示、動作、リンクの不具合等がありましたら、是非遠慮なくご連絡ください。提供頂いた情報は次回のバージョンアップの材料として鋭意解決の方法を検討させていただきます。

また、時折頂くコメントやメール、「いいね!」などはこのサイトを維持する励みとなり、大変大きな原動力になっています。気軽に書いたつもりの簡単な一言メッセージであっても運営している側としては非常にありがたいものですので、是非お気軽にコンタクトいただければ嬉しいです。

至らない点もまだ多いとは存じますが、今後ともくちぶえ音楽院を宜しくお願い致します。

2014年1月29日
口笛情報サイト くちぶえ音楽院
鳥鳴響