今回のサイトでは、descriptionタグで自動的に該当の漢字の読み方を表示する仕様にしてあるため、例えばGoogleで『鬱』と検索した場合、ページタイトルの下に『鬱の読み方：うつ/utu』まで表示されるようになっています。要するに別に当サイトのページをクリックしなくても読み方自体は調べ終わるようになっています。ですのでクリックしてくださった方への付加価値の意味を込めてこれらのメニューを用意しています。

サイドメニュー

ニコニコ大百科（β） / weblio(類語辞典) / 人名漢字辞典 / Wikipedia / NAVEまとめ / OKWave / はてなキーワード / goo辞書 / Twitter 検索 / GoogleMAP /
流行のサービスからちょっとヲタなものまで。
この部分に関しては今後の評判を見て取捨選択していければと思います。

例えば当サイトで『破面』と検索しても『アランカル』とは表示されませんが、ニコニコ大百科さんやwikipediaさんならユーザーが満足のいく反応を返してくれるだろう、といったように、当サイトではどうしてもカバーしきれない単語の補完をしたいという目的があります。

GoogleMAPについては、例えば『竜胆（りんどう）』『小鳥遊（たかなし）』といった珍しい地名を検索する機会があった場合、せっかくだからどこにある地名なのかもすぐに見てもらえればと思って貼らせて頂いてます。

翻訳については完全に友人のアドバイスで、

友『アニメやマンガの流行りで海外の人も漢字の読み方や意味に興味を持ってる人が多いと思う。もちろん翻訳ソフトを使って確認とかもしてるとは思うけど、簡単に調べられるに越したことではない』

とのことだったのでそれは面白そうだと採用させて頂きました。

インスパイア元

・『人名漢字辞典 - 読み方検索』
　http://kanji.reader.bz/
・『読み方は？』
　http://yomikatawa.com/
・『漢字辞典オンライン』
　http://jiten.go-kanken.com/
・『漢字辞典』
　http://kanjitisiki.com/

『読み方』サイトの先輩サイト様方。今回の製作物では大きな違いは文字を大きめにしたことや、先述のとおりdescriptionタグに漢字の読み方を組み込んでネタバレ式にしたことなどが大きな違いになります。

先述とは別の友人からは『読み方系のサイトなんていくらでもあるから今更参入しても意味ないよwww』と笑われましたが、それでもまずとにかく作ってみる、やってみるというのが大事だと思います。

使用した技術

①ルビ振りWeb API

　公開URL：http://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html

　・解説：

　「漢字かな交じり文に、ひらがなとローマ字のふりがな（ルビ）を付けます。」（該当ページより引用）

　「そもそも漢字の読み方サイトなんてどうやって作るんだよ?」という問題を解決してくれるのがこのAPI。これがないと始まりません。知らない人に説明すると、APIというのは、

APIとは、アプリケーションプログラムインターフェイスの略語で、プログラミングの際に使用できる命令や規約、関数等の集合の事を指す。ソフトウェア開発の際、いちから全てを作ることは困難だが、APIを利用すればもともとあるプログラムをもとにして、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。

というもので、これで他所からサービスやデータの一部を借りることで新しいサービスの製作の助けになってくれます。いろんな所から出ているのでぜひ探してみてください。

　・参考サイト様
　　『Yahoo!デベロッパーネットワーク』： http://developer.yahoo.co.jp/sitemap/
　　→公式サイト

②twitter bootstrap

　・解説：前回も使用したもの。Twitter社が提供するCSS フレームワーク。サイトデザイン（外見）に使用。

　　自動でレスポンシブ、適当に組んでもそれなりの今風サイトになるので便利。

　・参考サイト様
　　『Twitter Bootstrap』 : http://twitter.github.com/bootstrap/
　　→公式サイト
　　『Bootstrap 3.0入門 (全18回)』: http://dotinstall.com/lessons/basic_twitter_bootstrap_v4
　　→超有名な初心者向けプログラミング学習サイトのドットインストール様。
　　　HTML,CSS,PHPの基礎習得もこちらで。PHPやhtmlド素人の自分でも何とか今回も乗り切りました。

③忍者ツールズ

　・解説：前回も使用させて頂いています。ソーシャル要素はやはり外せないので今回も採用しました。

　・参考サイト様
　　『忍者ツールズ』： http://www.ninja.co.jp/
　　→今回使用させていただいたサービスの他にも便利なツールが盛り沢山です。

⑤Favicon

　・解説：前回も使用させて（ry お気に入りとかの横に出る画像のあれですね。

　・参考サイト様
　　『Favicon Japan!!』：http://www.favicon.jp/favicon_auto_create/ :
　　→前回も（ry　任意の画像を自動でFaviconに変更してくれます。便利。

⑥その他

　・使用サーバー
　『エックスサーバー』： http://www.xserver.ne.jp/
　　→前回も（ry　やっぱり信頼出来るレンタルサーバー様です。

もし良かったら一度使ってみてくださると嬉しいです。ご意見ご感想頂ければなお幸いです。

読み方を複数表示したいのにどうしても1パターンしか出せませんでした。今後改善していければと思います。

自分はPHPはif文がギリギリ書ける程度の力量しかないので今回もヒーヒー言いながら作ってました。もし『WEBサービス作ってみたいけど敷居高そう』って人がいたらとにもかくにも作り始めてみてください！まずはじめるのが大切だと思います！

それではありがとうございました！

Permalink | 記事への反応(0) | 01:45