2014-12-18

元週6フリーターWEBサービス作ってみました。

こんにちは。2年前に『はてブ1000users超え記事アンテナ(´・ω・)』というWEBサービスを作って記事を書いたものです。

当時はWEB業界で働くことを目標にしていましたが、いろいろあって今はまったく関係ない業界会社でお世話になっています

※カーちゃんには温泉じゃないけど一応孝行出来ました。

 2年前に応援してくださった方々、ありがとうございました!

以前作ったサイトと説明記事がこちらになります

当時1000ブクマ取って感激していた記憶があります

サイト:『はてブ1000users超え記事アンテナ(´・ω・)』

 http://hatebu-1000users-over.com/

・説明記事:『週6フリーターWEBサービス作ってみました。 』

 http://anond.hatelabo.jp/20120914214121

おかげさまで少し時間が空くようになったので久々になにかWEBサービス作ってみたいなあと思って今回新しくWEBサービスを作ることにしました。

以前今回ははてなユーザーに絞って作ったサービスでしたので、今回は反対に万人受けするものを目指して作ってみましたので、ひっそりとご報告したく思います

といっても相変わらずif文を書くのがやっとのPHP初心者なので大したことは出来ないですが。。。

下記が今回の製作物になります

今回の製作

 『@漢字の読み方(β)』

 http://kanjinoyomikata.com/

 ・このサイトについて

 タイトルのまんまです。難読・人名地名熟語などの読み方を提供するサービスになります情報の取得元については、後述しますがYahoo!さんから頂いております。また、それとは別に下記二つのページへの直リンクを貼らせて頂いております

①他サイト様で同キーワード検索した場合の結果

検索したワード翻訳サイトでの翻訳結果

今回のサイトでは、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

 公開URLhttp://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html

 ・解説:

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

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

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

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

 ・参考サイト

  『Yahoo!デベロッパーネットワーク』 : http://developer.yahoo.co.jp/sitemap/

  →公式サイト

twitterbootstrap

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

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

 ・参考サイト

  『Twitter Bootstrap』 : http://twitter.github.com/bootstrap/

  →公式サイト

  『Bootstrap 3.0入門 (全18回)』: http://dotinstall.com/lessons/basic_twitter_bootstrap_v4

  →超有名な初心者向けプログラミング学習サイトドットインストール様。

   HTML,CSS,PHPの基礎習得もこちらで。PHPhtml素人自分でも何とか今回も乗り切りました。

忍者ツール

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

 ・参考サイト

  『忍者ツールズ』 : 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サービス作ってみたいけど敷居高そう』って人がいたらとにもかくにも作り始めてみてください!まずはじめるのが大切だと思います

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

トラックバック - http://anond.hatelabo.jp/20141218014535

記事への反応(ブックマークコメント)

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん