タグ：JavaScript

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

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

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

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

<script type="text/javascript">
<!--
var now = new Date();
var hour = now.getHours();
if(hour < 6 || hour >= 18){
document.write('<style type="text/css">body{background-color:#10171f;color:#8698a4;}a:link{color:#4c9eeb;}a:visited{color:#5e5ce6;}a:active{color:#fa325a;}</style>');
}
-->
</script>

<!--

var now = new Date();

var hour = now.getHours();

if(hour < 6 || hour >= 18){

document.write('<style type="text/css">body{background-color:#10171f;color:#8698a4;}a:link{color:#4c9eeb;}a:visited{color:#5e5ce6;}a:active{color:#fa325a;}</style>');

}

-->

</script>

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

たにぐちまこと

Enjoy!

▣ カテゴリー: ウェブサイト構築 ◇ タグ: CSS, JavaScript, ダークモード

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

📅 2014 年 2 月 24 日 ☏ コメントはありません

wtpmj.com

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

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

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

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

ダイナコムウェア DynaFont TypeMuseum 3728TrueType Win/Mac

posted with カエレバ

ダイナコムウェア 2014-02-28

Amazon

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

ただし、WindowsではWebフォントを使わない設定にしています。
なぜかと言いますと、Windowsではフォントを綺麗に表示するフォントレンダリングという機能が弱く、せっかくのフォントの表示がギザギザになってしまうからです。
本当にWindowsには何とかしてもらいたいのが、このフォント表示周りです。

仕方ない。WindowsではWebフォントもヒラギノも諦め、標準のメイリオを使うことにしました。
そこで書いたのが以下のスクリプトです。ヘッダーに書いたこのJavaScriptでOSを判別し、Windowsとそれ以外のCSSでのフォント指定を分けました。

<script type="text/javascript" src="http://typesquare.com/accessor/script/typesquare.js?XXXXXXXXXXXXXXX" charset="utf-8"></script>
<script type="text/javascript">
if(navigator.platform.indexOf("Win") != -1){
document.write('<style type="text/css">*{font-family:Meiryo;}</style>');
}else{
document.write('<style type="text/css">*{font-family:"ナウ-GM","NOW-GM";}</style>');
}
</script>

if(navigator.platform.indexOf("Win") != -1){

document.write('<style type="text/css">*{font-family:Meiryo;}</style>');

}else{

document.write('<style type="text/css">*{font-family:"ナウ-GM","NOW-GM";}</style>');

}

</script>

「XXXXXXXXXXXXXXX」の所や、「font-family:」の指定は、ご自身の設定に合わせて下さいね。

Enjoy!

▣ カテゴリー: ウェブサイト構築 ◇ タグ: JavaScript, Webフォント

緯度と経度から住所を取得する 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 Maps, JavaScript

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

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

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

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

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

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

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

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

1.JavaScriptで現在地を取得
現在地取得コードを書きます。

<script type="text/javascript">
//現在地情報を取得
function cont_get_current_gps(){
if(!navigator.geolocation){ alert('navigator.geolocation is not defined.'); return; }
navigator.geolocation.getCurrentPosition(
function(position){
var ido = position.coords.latitude;
var keido = position.coords.longitude;
document.idokeido.lati.value = ido;
document.idokeido.long.value = keido;
} ,
function(){
alert('Error!');
}
);
}
</script>

//現在地情報を取得

function cont_get_current_gps(){

if(!navigator.geolocation){ alert('navigator.geolocation is not defined.'); return; }

navigator.geolocation.getCurrentPosition(

function(position){

var ido = position.coords.latitude;

var keido = position.coords.longitude;

document.idokeido.lati.value = ido;

document.idokeido.long.value = keido;

} ,

function(){

alert('Error!');

}

);

}

</script>

<input type="button" value="現在地を自動で取得" onclick="cont_get_current_gps();">

1	<input type="button" value="現在地を自動で取得" onclick="cont_get_current_gps();">

2.フォームに現在値を渡す
取得した10進数の緯度と経度は、フォームに渡されます。
普通のフォームなので、手動でも位置情報が書けるようになっています。

<form method="post" action="" name="idokeido">
緯度<input type="text" name="lati" size="10"><br>
経度<input type="text" name="long" size="10"><br>
<input type="submit" value="送信">
</form>

緯度<input type="text" name="lati" size="10"><br>

経度<input type="text" name="long" size="10"><br>

</form>

3.データを保存する
フォームに入った緯度と経度は、PHPによりサーバーに保存されます。
今回は簡単なテキストにしましたが、KML形式で出力するとより良いでしょう。

<?php
$lati = $_POST['lati'];
$long = $_POST['long'];
if ($lati &amp;&amp; $long) {
$fp = fopen('here.txt', 'w');
fwrite($fp, "{$lati},{$long}");
fclose($fp);
echo  <<< EOM
<iframe id="disp" src="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z=13&output=embed" width="100%"></iframe>
EOM;
}
?>

<?php

$lati = $_POST['lati'];

$long = $_POST['long'];

if ($lati && $long) {

$fp = fopen('here.txt', 'w');

fwrite($fp, "{$lati},{$long}");

fclose($fp);

echo <<< EOM

EOM;

}

4.データを読み込んで現在地を表示する
表示用PHPが位置情報のテキストを読み込み、マップを開きます。
あとはiframeなどでブログに貼りつければブログパーツとしても使えます。

<?php
$width = $_GET["width"];
if(!$width){
$width = "100%";
}
$height = $_GET["height"];
if(!$height){
$height = "100%";
}
$z = $_GET["z"];
if(!$z){
$z = "13";
}
$fp = fopen('here.txt', 'r');
$lines = fgets($fp);
$arr = explode(",",$lines);
$lati = $arr[0];
$long = $arr[1];
fclose($fp);
echo  <<< EOM
<iframe src="http://maps.google.co.jp/maps?ll={$lati},{$long}&z={$z}&output=embed" width="{$width}" height="{$height}" frameborder="0"></iframe><br>
<a href="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z={$z}">大きな地図で見る</a>
EOM;
?>

<?php

$width = $_GET["width"];

if(!$width){

$width = "100%";

}

$height = $_GET["height"];

if(!$height){

$height = "100%";

}

$z = $_GET["z"];

if(!$z){

$z = "13";

}

$fp = fopen('here.txt', 'r');

$lines = fgets($fp);

$arr = explode(",",$lines);

$lati = $arr[0];

$long = $arr[1];

fclose($fp);

echo <<< EOM

<a href="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z={$z}">大きな地図で見る</a>

EOM;

上記のまとめはこちらです。
これらのファイルをサーバーの同じ場所に置いてアクセスして下さい。

参考サイト:
http://www.pxt.jp/ja/diary/article/254/index.html
http://ascii.jp/elem/000/000/433/433470/index-3.html
http://blog.fonland.net/2010/06/javascript-iphone-gps.html
http://d.hatena.ne.jp/yatt/20130208/1360316179
http://www.shurey.com/html/googlemaps.html
http://www.phpbook.jp/func/file/index4.html
http://ponk.jp/php/file/write
http://www.php-ref.com/b2api/04_fgets.html
http://phpspot.net/php/man/php/function.explode.html
http://libro.tuyano.com/index3?id=410001&page=3
http://www.geocities.jp/eijispace/2012/0220.html
http://d.hatena.ne.jp/takaxi/20111211/1323575933

Enjoy!

追記：
改造したWebアプリ版をひっそり公開。
iPhoneなどで自分の場所を取得し、その情報を短縮URL化します。
これを使えば、iMessageなどで自分の場所を友達と共有できます。
iframe対応のブラウザでご覧ください。

▣ カテゴリー: ウェブサイト構築 ◇ タグ: Google Latitude, Google Maps, GPS, iPhone, JavaScript, PHP, 地図

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

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

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

iframe対応のブラウザでご覧ください。

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

Enjoy!

▣ カテゴリー: その他 ◇ タグ: Google Text-To-Speech, JavaScript