アーカイブ

‘JavaScript’ タグのついている投稿
スポンサーリンク
スポンサーリンク

【CSS】夜になったら自動でダークモードにする【JavaScript】

2019 年 11 月 24 日 コメントはありません

CSSとJavaScriptの組み合わせで夜になったら自動でダークモードにしてみます。流行ですもんね~
ちなみにこの記事でも18:00~翌06:00に適用されるようになっています。

下記を参考に、適当にヘッダーに入れるなり、該当のブロックにインラインで入れるなりしてみて下さい。

Enjoy!

高価なフォントが何と無料!! TypeSquareのWebフォントを使ってみた!!

2014 年 2 月 24 日 コメントはありません
wtpmj.com

Webフォントを使ったデザインにこだわったサイトが増えてきました。
たまに見かけると「おっ!」と思っちゃいます。
デザイナーたる者、フォントにはこだわりたいものです。

Webフォントを使えば、その端末に「入っていない」、クールなフォントを使ってサイトを表示させることができます。
簡単に言えば、ネット上に置かれたフォントをダウンロードさせて表示する仕組みです。

無料のWebフォントもあるようですが、人気のフォントは大抵有料です。
Webフォントを配信しているサイトは日本にも数社あります

そんな中、老舗フォントメーカーのモリサワが運営しているTypeSquareが熱い!!
何と、無料で使えるプランがあるのです!!
無料プランだと制限はありますが、好きなフォントを1種類、月に1万PVまで表示してくれます。
ほとんどの個人運営サイトやブログの場合、月に1万PVもいかないのでは?
なお、TypeSquareでは、Webフォントのことを「クラウドフォント」と呼んでいるようです。

ちなみに、これを書いている今現在も、TypeSquareのWebフォント「ナウ-GM」を使っています。
もしあなたの使っている端末のOSがWindows以外で(後述)、比較的新しいブラウザを使っているなら、ここに書かれている文字はナウ-GMで表示されていることでしょう。
iPhoneも対応していますよ!

でもね・・

緯度と経度から住所を取得する Powered by Google Maps

2013 年 11 月 24 日 コメントはありません

Google Maps APIを使って、緯度と経度から住所を取得してみます。
10進数の緯度と経度を入力して下さい。

緯度:
経度:

こんなに簡単だとは驚きです!

参考サイト:
https://sites.google.com/site/gmapsapi3/Home/services
http://www.nanchatte.com/map/getAddressByLatLng.html
http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/geocoding/0003
http://heartachereborn.blogspot.jp/2010/03/google-maps-api-v3.html

Enjoy!

追記(2019/02/16):
WordPressの記事自動整形のせいでスクリプトが無効になっていましたので修正しました

カテゴリー: ウェブサイト構築 タグ: ,

Google Latitudeの代わりを作ってみた

2013 年 11 月 16 日 コメントはありません

2013年8月9日をもって、Google Latitudeのサービスが終了しました

今までは、このサービスを使って、自分がどこにいるのかブログパーツで知らせていました
GPS内蔵の携帯やスマホを通じて(セキュリティ上から手動で)現在地を更新し、ブログパーツ化したGoogleマップの上にその現在地(最終更新地)が表示されるので、非常に便利でした。
しかし、利用者が少なかったのか、儲からないであろうこの事業からは手を引いたようです。

そこで、何とか代替品を作るべく、とりあえずiPhoneで動く(現在地更新ができる)ことを目標に、立ち上がりました。

まず現在地を取得する方法ですが、最近のブラウザは標準で現在地(つまり緯度・経度など)を取得できるようです。
これはHTML5のGeolocation APIという仕様によるものらしく、パソコンだとIPアドレスなどから取得するので不正確ですが、iPhoneなどではGPSからなので、かなり正確な現在地を取得してくれます。
つまり、iPhoneでブラウザからスクリプトにアクセスすることで、現在地が簡単に取得できます。

後は取得した緯度と経度をGoogleマップに渡してやれば現在地の表示は比較的簡単にできるはず。
表示させると同時に、自分のサーバーに位置情報を書き込む。
ブログパーツではその位置情報を読み込み、毎回Googleマップに渡して表示すれば・・と頭の中で仕様が大体出来上がりました。

それでは早速作ってみましょう。

作り方

しゃべるよ~Google Text-To-Speech

2013 年 6 月 22 日 コメントはありません

Googleの隠しAPIに、Google TTS(Text-To-Speech)というのがあります。
簡単に言うと、パソコンに入力した文字を喋ってくれる機能です。
通常だとこのアドレスに文字クエリを渡すのですが、この仕組みを使って好きなテキストを喋らせるJavaScriptがありましたので、少し改造して使い易くしてみました。なお、最大で100文字までのようです。

例えば耳が不自由で喋れない人が、こういった技術を通してコミュニケーションが取れるようになればいいな、などと思います。そんなのはすぐにでも実現するでしょう。
とは言え、現実的に何不自由なく喋れるようになると、ストレスがたまったりするようになるかも知れませんね(弱者に対して人は優しいものですが、障害を感じさせないとキツイことを言われることも増えるでしょう)。

Enjoy!

カテゴリー: その他 タグ: ,
スポンサーリンク