[code][魚拓] JavaScriptでURLのフルパス/絶対パスを取得

[code][魚拓] JavaScriptでURLのフルパス/絶対パスを取得

JavaScript URLパスの一部を取得する

2021年08月22日

やりたいこと

JavaScriptでURLのパスの一部を取得する

実装

実装の流れは以下のものになります。

①URLのパスを取得する

②パスの1つ1つを配列に分割する

③作成した配列から指定の部分を取得する

以下実装例を紹介していきます。

今回は、https://○○/user/1の1（ユーザーID）を取得していきたいと思います。

①URLのパスを取得する

URLのパスはlocation.pathnameで取得することが出来ます。

console.log(location.pathname);

// /○○/user/1

②パスの1つ1つを配列に分割する

取得したパスを配列に分割するには、splitを使用します。

ちなみに①と②は同時に実装できます。

console.log(location.pathname.split('/'));

// (4) ["", "○○", "user", "1"]

③作成した配列から指定の部分を取得する

配列にすることが出来たので、あとはindexを指定するだけで任意の部分を取得することが出来ます。

const path = location.pathname.split('/');

console.log(path[3]);

// 1

以上!!!!!!!!!!!!!!

てくてく

https://tech-tech.blog/javascript/path/

JavaScriptでURLを取得するには？locationの使い方を徹底解説

2024年5月6日

侍エンジニア編集部

URLの情報ってどうやって取得するの？

URLが持っているパラメータなどを活用したい

locationオブジェクトを使いこなしたいWebサイトのURLはJavaScriptから取得して、プログラムで制御することが可能です。また、URLにはパラメータが付与されていることもあり、これらのデータを活用することでサイトのコンテンツを意図的に変えるような制御もできます。しかし、これらのプログラミング手法について一体どのように学習を進めていけば良いのか悩む人も少なくないでしょう。

この記事では、初心者でも今日からlocationオブジェクトを活用してURLを取得できるようになる手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

■locationとは？

locationとは、現在表示されているウェブページのURLを抽出したり、別のページへ遷移する場合などに便利なオブジェクトです。基本的な機能としてはURLや、ホスト名・パス・プロトコルなどの情報を得ることが出来ます。また、locationにはさまざまなプロパティが提供されています。試しに、任意のwebページを開いてブラウザのデベロッパーツールを起動し、コンソールへlocationと入力して実行させてみましょう。

javascript-location-console

consoleオブジェクトの一覧を表示

locationに提供されているプロパティがずらっと並びますね。これらのプロパティが示しているURL情報は、現在開いているWebページに基づいたものになっています。このプロパティをlocationの記述の後ろにつけることで、ピンポイントで欲しい値をゲットできるのです。

■locationのプロパティとメソッド一覧

では早速、locationの使い方を確認していきましょう。locationは基本的に、下記のように後ろにプロパティを組み合わせて使用します。

location.href

この例の場合は、現在開いているページのURLを取得するという記述になります。これを変数に入れたりして操作を行なっていきます。では、どんなプロパティが提供されているのか一覧表で確認してみましょう。

プロパティ名 内容

location.href 指定したURLに画面遷移する

location.protocol 現在のプロトコル情報(http:など)を取得する

location.host プロトコル情報を除外したURLを取得する(port情報あり)

location.hostname プロトコル情報を除外したURLを取得する(port情報なし)

location.port ポート番号を取得・設定する

location.pathname URLでパスの部分を取得・設定する

location.search URL内のクエリ情報を抽出して取得する

location.hash URL内のハッシュ情報を抽出して取得する

location.origin プロトコルやポートを含めたURLを取得する

さらに、提供されているメソッドについては以下の通りです。

メソッド名 内容

location.assign 指定したURLに画面遷移します（閲覧履歴への追記あり）

location.replace 指定したURLに画面遷移します（閲覧履歴への追記なし）

location.reload 現在のURLを再読込します（true指定だとサーバーから読み込み）

location.tostring 現在のURLを文字列で取得します

■hostとhostnameの違いとは？

一覧を見ていると、hostとhostnameという似ているプロパティがあることにお気づきでしょうか？hostとhostnameは、現在開いているWebページのホスト名を取得することができるプロパティです。ホスト名とは、例えばhttps://www.sejuku.net/blogのようなURLがあったとするとwww.sejuku.netの部分のことです。大抵の場合は、プロトコル情報を排除したトップページのURLが該当します。では、この2つの違いは何なのか、サンプルコードを見ながら確認してみましょう。

console.log( location.host );

console.log( location.hostname );

実行結果

www.sejuku.net

www.sejuku.net

locationに対してhostとhostnameを記述すると、ホスト名を取得できましたね。どちらも同じ動作をしていますが、決定的に違うのはポート番号を取得するかどうかという点です。実は、WebページにアクセスするにはURL以外にポート番号というものも必要になります。http:で始まるWebページはポート番号が80で、https:の場合はポート番号が443のように決まっています。（【例】https://www.sejuku.net:443/blog）hostの場合はポート番号を含んだホスト名、hostnameの場合はポート番号を含まないホスト名を取得すると覚えておきましょう。

locationプロパティの使い方

locationの基本的な仕組みを確認できたところで、もっと具体的な活用方法について確認していきましょう！主に、URL・パス・プロトコル・ポート番号の取得方法について学んでいきます。

location.hrefでURLを取得しよう

まずはもっとも基本となるlocation.hrefを使ってURLを取得・表示してみます。

var page_url = location.href;

console.log(page_url);

実行結果

http://www.sejuku.net/blog

この例では当ブログのトップページを表示しているので、実行結果にブログURLが表示されています。単純にlocation.hrefを記述するだけでURLを取得できるので便利ですね。

■pathnameでパスを取得する

pathnameはURLのパス部分を取得することができる機能を持っており、別のパスに差し替えることも可能です。

例えばhttps://www.sejuku.net/blog/35791のようなURLがあったとします。このURLのパスは/blog/35791の部分となります。

これを取得したい場合は、下記のようなコードを記述しましょう。

//①ディレクトリを取得

console.log( location.pathname );

//②別のパスに置き換える

location.pathname = '/company.html';

①のようにlocationに対してpathnameを記述するだけで取得することが可能です。また②のように、別のパスを代入することで画面遷移させることもできます。

一般的なWebサイトであれば、同一のホスト名で遷移することが多いはずなので、そのようなケースではpathnameを使うと良いでしょう。

protocolでプロトコルを取得する

protocolは、現在開いているWebページのプロトコル情報を取得することができます。つまり、URLの最初の部分である「http:」や「https:」を取得できるということです。

次の例を見てください！

var proto = location.protocol;

console.log( proto );

実行結果

https:

この例のように、locationに対してprotocolを記述するだけで取得することができます。

最近ではセキュリティの高いSSL対応の「https:」が使われるようになってきました。しかし、まだまだ「http:」から始まる以前のプロトコルが使われているサイトは多いので、条件分岐する際などに使うことができそうですね。

portでポート番号を取得する

portを使えば、ポート番号のみを取得することができます。

//①ポート番号を取得する

console.log( location.port );

//②ポート番号を再設定する

location.port = 80;

①はlocationに対してportを記述するだけでポート番号を取得しています。

また、特徴的なのは②のように、別のポート番号を新しく設定することができるところです。もちろんサーバーが対応している必要がありますが、途中で動的にポート番号を変更する際にはportプロパティを使いましょう。

location.hrefの活用

この章では、もっともよく使うlocation.hrefの応用的な使い方について見ていきましょう！主に、任意のURLを設定することで画面遷移を行う方法について学んでいきます。

location.hrefを使って画面遷移する

location.hrefは、ブラウザの画面遷移にも使うことができます。

次の例を見てください！

location.href = 'https://www.sejuku.net/blog/';

この例では、当ブログのURLをhrefへ代入していますね。これによりlocation.hrefの値が代入した値に置き換えられるので、画面の遷移が行なわれます。

これはURLが代入された時点ですぐに遷移処理が実行されるので注意しておきましょう。

hrefでtarget属性の代わりにwindow.openを使う

HTMLのaタグなどでよく使われる属性としてtargetがあります。これは画面遷移する時に、ブラウザの別タブを起動して表示するようなケースでよく使われる属性です。

これと同じ動作をhrefプロパティを使って実現することはできるのでしょうか？

結論から言ってしまうと、hrefにtarget属性は用意されていないので実現できません。ただし、同じ動作を実現するための手法としてwindow.openを利用する方法があります。

次の例を見てください！

//①の方法

window.open('http://www.sejuku.net', '_blank');

//②の方法

window.open().location.href = 'http://www.sejuku.net';

①の方法は、window.openの引数に遷移させたいURLとtarget属性を記述する方法です。JavaScriptから動的に画面遷移させるには、これが最も一般的な方法と言えるでしょう。

また、②の方法を使えば少し強引ですがhrefプロパティを活用して別タブで遷移させることが可能です。

どちらも同じような動作はしますが、よほどの理由がない限りは本来の用途で扱える①の方法がベストでしょう。

locationのメソッド活用法

次に、locationオブジェクトが持つメソッドの活用方法を確認していきましょう！こちらもプロパティと同じく、簡単にURLを取得・操作することが可能です。

replaceでブラウザ画面を遷移する

replaceメソッドを使うことで、自分の好きなWebページへ動的に画面遷移を行なうことが可能です。下記のように、replaceメソッドの引数に遷移させたいURLを指定するだけです。

location.replace(WebページのURL)

具体的な例を見てみましょう。

画面遷移

この例では、ボタン要素を配置してJavaScriptからクリックイベントを取得できるようにしていますね。そして、ボタンをクリックするとreplaceメソッドが実行されて、引数に指定したURLへ遷移するというわけです。

もちろん、引数のURL部分は変数に置き換えても問題ありません。

replaceとhrefの違いについて

さて、ここまでの解説でreplaceとhrefが同じような用途で使えると思った方もいると思います。

それではreplaceとhrefは一体どこが違うのでしょうか？

最も大きな相違点は、URL情報がブラウザの履歴に残るかどうかという点です。ここで、もう一度replacehrefの記述を見てみましょう。

//①replaceの場合

location.replace('http://www.sejuku.net');

//②hrefの場合

location.href = 'http://www.sejuku.net';

この例では、①②どちらも指定したURLに画面遷移することができますね。

しかし、①のreplaceメソッドを使った場合にはブラウザ履歴に残らないため、前のWebページに「戻る」ことができません。反対に②のhrefメソッドを使った場合はブラウザ履歴が残るので、前のページに戻ることができます。

この違いはJavaScriptでWebアプリなどを開発する際に重要になってくるので、よく覚えておきましょう！

reloadでブラウザを更新する

reloadメソッドは、現在表示されているWebページを更新（再読み込み）することができます。

reloadメソッドは、デフォルト設定で引数は必要ありません。引数を設定しない場合、ブラウザのキャッシュからページの再読み込みが行なわれます。直接サーバーから読み込みたい場合は、reloadメソッドの引数としてtrueと設定する必要があります。

以下のコードをご覧ください。

今は今は47秒です

       

侍エンジニア

https://www.sejuku.net/blog/26999

上記の例は、コードを実行させた時の時刻の秒数部分のみを表示させ、ボタンをクリックするとブラウザが更新するという仕組みになっています。それでは以下の画像をご覧ください。

Reloadボタンを押す前は11秒と表示されて止まっていますね。

2017-07-11

画面に11秒と表示

14秒経過後にreloadボタンを押すと、画面が更新されて表示が25秒になっているのが分かります。

2017-07-11 (1)

更新されて画面表示が25秒に変更

つまり、正常に画面が更新されてJavaScriptがもう一度読み込まれて実行されたわけです。このように、reloadメソッドを使うことでブラウザが更新されるのです。

URLのパラメータ取得について

URLの「#」から始まる部分は「ハッシュ（フラグメント識別子）」と呼ばれています。hashプロパティを設定することによって、例えばページ内の任意の位置への移動を行なうことなどが出来ます。

また、URLの「?」から始まる部分が一般的に「パラメータ（クエリ）」と呼ばれているものです。クエリの基本的な構造としては「変数名＝変数値」という形になります。

例えばデータベース内からあるユーザを抽出したい場合、ユーザ名＝nameというクエリを作成したりするわけです。

では、どんな風に活用していくのか確認してみましょう。

hashプロパティでURLのハッシュ情報を取得

URLのハッシュ情報を取得するには「hashプロパティ」を使用します。基本的にはlocationオブジェクトにhashを実行するだけで利用できます。

console.log(location.hash);

上記の例だと、現在表示されているwebページのURLにあるハッシュ部分をコンソールログに表示させる事が出来ます。以下の画像のような結果が得られます。

2017-07-05 (11)_LI

URLのハッシュ部分を表示

上記の例は、「http://www.sejuku.net/corp/?cid=blog#section4」というURLで実行してみたので、ハッシュ部分は「#section4」と表示されました。

searchプロパティでURLのパラメータ（クエリ）を取得

URLのパラメータ情報を取得するには「searchプロパティ」を使用します。こちらもlocationオブジェクトに対してsearchを実行することで利用できます。

console.log(location.search);

こうして、現在表示されているwebページのURLのパラメータ情報をコンソールログに表示させる事が出来ます。

以下の画像のような結果が得られます。

2017-07-05 (10)

URLのパラメータ（クエリ）を表示

今回は、「http://www.sejuku.net/blog/?s=JavaScript」というURLで実行してみたので、パラメータ情報は「?s=JavaScript」と表示されました。

正規表現やsplit()でURLを取得

この章では、JavaScriptでURLを操作するための応用技について見ていきましょう！

主に、正規表現を使ったURL取得とディレクトリ階層を取得する方法について学んでいきます。

正規表現でURLを取得する方法

これまでURLの取得にはlocationオブジェクトのプロパティを使ってきました。

しかし、場合によってはテキストファイルなど外部からURLを取得することもあるでしょう。このようなケースでは、locationオブジェクトではなく正規表現でURL部分だけを取得する方法が使われます。

例えば、以下のように当社のサイトURLを見てみましょう。

https://www.sejuku.net

このような一般的なURLを抽出するための正規表現をそのまま書くと次のようになります。

https?://(www)?.[a-zA-Z0-9]*.net

しかし、このままではごく一部のURLしか対応できませんよね？

例えば、ハッシュやクエリなどが付与されていたり、「.com」や「.co.jp」などの表記になれば対応できなくなります。そこで、考え方としては「https://」以降に続く英数字の文字列でURLに使われるキャラクタを正規表現で全部指定するわけです。

すると、一般的には以下のようになります。

http(s)?://[a-zA-Z0-9-.!'()*;/?:@&=+$,%#]+

これで、「http / https://」に続くURLがどのような表記になっても、一般的なWebサイトであれば対応できるわけです。

ちなみに、正規表現についてまだ不安な方は以下の記事で基本から応用までをまとめているのでぜひ参考にしてみてください！

【JavaScript入門】4つのパターンで理解する正規表現の使い方まとめ！

更新日：2024年5月6日

split()でURLのディレクトリ階層を取得する方法

今度は、URLのディレクトリ階層を取得する方法について見ていきましょう！

例えば、以下のようなURLをイメージしてみてください。

https://www.sejuku.net/one/two/three/index.html

この場合「index.html」のファイルが配置されているディレクトリは「three」になりますよね。

例えば、このディレクトリの階層を取得したい場合はどうすれば良いでしょうか？実は、これまで利用してきた「location.href」を使って取得することができます。次のサンプル例を見てください！

var result = location.href.split('/');

console.log(result);

実行結果

["https:", "", "www.sejuku.net", "one", "two", "three", "index.html"]

この例では、「location.href」に続けて「split()」を使うことで「/」を区切り文字にしてすべてのディレクトリ階層を配列に格納しているわけです。このようにすることで、JavaScriptから階層を操作しやすくなりますね。

そこで、index.htmlが配置されているディレクトリを取得するには次のように記述します。

var result = location.href.split('/');

console.log(result[result.length - 2]);

実行結果

three

配列に格納されたディレクトリ階層のうち、配列要素の後ろから2番目にあるのがindex.htmlが配置されたディレクトリです。そのため、「result[result.length ? 2]」と記述することで見事に「three」というディレクトリを取得できているのが分かりますね。

まとめ

今回は、locationオブジェクトを活用したURLの取得方法について学習しました！

様々なプロパティやメソッドを含むlocationオブジェクトの使い方をマスターすることによって、ウェブページの色々な情報を取得する事が出来ます。

別ページへの移動やクエリの設定など、ワンランク上のJavaScriptプログラムを書くのに役立つテクニックなので、覚えておいて損はないですね。ぜひ、locationオブジェクトをマスターして使いこなしてください！

アドレス（url）からファイル名の取得

2010年5月11日 16:41 

うさこ 

Javascriptで、アドレスからファイル名を取得する方法。

var sampleaddress = "http://www.sample.com/img/sample.jpg";

var arr = sampleaddress.split("/");

var filename = arr[arr.length-1];

「/」で分割して配列にして、最後の要素を取得、です。

フォルダ名などで場合分けして、ごちゃごちゃする時にとても便利。

      

うさこ

https://www.two-ways.com/mt/usakorog/2010/05/url-1.html

[Code] NTPで取得した時刻をRTCへセットする

[Code] NTPで取得した時刻をRTCへセットする

NTPで取得した時刻をRTCへセットする（ESP32）

2021/6/28

投稿者:管理人

ESP-WROOM-32でやってみました。調査結果により書き直したので、記事タイトルと内容に

ズレがあります。

調べてわかったこと

起動時のNTP時刻取得後は、１時間毎のgetLocalTime()時に

NTP時刻同期していました。よって、提供される時刻の精度は問題ないと思われます。つまり、NTP又はネットワーク内タイムサーバに接続できる環境なら、RTCモジュール追加の必要はない？かもしれません。タイムサーバ接続不可能な環境で使うならRTCは有ったほうが良いと思います。

getLocalTime()

ローカル時刻を取得する。

失敗時10ms毎に取得繰返し5000mS(ﾃﾞﾌｫﾙﾄ)でタイムアウト

取得成功でtrue返す。失敗でfalse返す。

例　getLocalTime(&timeinfo, 5000)

getLocalTime()後のsntp_get_sync_statusをシリアルモニタ表示してみた。

前半　10分間隔　後半　11分間隔でgetLocalTime()してます。

約60分毎に sntp_get_sync_status = COMPLETED とあります。

スケッチ例 ｢SimpleTime｣で実験中

(ESP32 Dev Module用のスケッチ例 ESP32→TIME→SimpleTime)

コメントとテストを追記したスケッチ(手直し中)

WiFi.disconnect(true);とWiFi.mode(WIFI_OFF);の2行は

接続を継続するため無効にしました。

include行は ＜ から < へ修正して下さい。

hiro yamamoto works

https://sky.ap.teacup.com/melondaikonhou/252.html

#include ＜WiFi.h＞

#include "time.h"

const char* ssid = "my-ssid";

const char* password = "my-password";

const char* ntpServer = "pool.ntp.org"; // NTPサーバ,IP Address指定できるか?

const long gmtOffset_sec = 9 * 3600; // 時差を秒で設定･･･9時間

const int daylightOffset_sec = 0; // サマータイム設定･･･0

void printLocalTime() {

struct tm timeinfo;

if (!getLocalTime(&timeinfo, 5000)) {

// コメント追記 タイムアウトデフォルト5000mS

Serial.println("Failed to obtain time");

return;

}

//追記 NTP同期確認のため ･･･COMPLETEDで同期完了と思う

if (sntp_get_sync_status() == SNTP_SYNC_STATUS_COMPLETED) {

Serial.println("sntp_get_sync_status = COMPLETED");

Serial.println(&timeinfo, "%A, %B %m %d %Y %H:%M:%S");

// コメント追記 A 曜日英語表記,B 月英語表記,m 月の数字,d 日,Y 年,H時:M分:S秒

}

}

void setup() {

Serial.begin(115200);

//connect to WiFi

Serial.printf("Connecting to %s ", ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

Serial.println(" CONNECTED");

//init and get the time

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

printLocalTime();

//disconnect WiFi as it's no longer needed

//WiFi.disconnect(true); //無効にしました

//WiFi.mode(WIFI_OFF); // 無効にしました

}

void loop() {

//delay(1000); // 無効にしました

printLocalTime();

delay(660000); // 追記しました

}

(スケッチ例を公開している方々に感謝します。）

RTC時刻合わせするスケッチもよかったらどうぞ

#include ＜WiFi.h＞

#include "time.h"

#include ＜Wire.h＞

#include ＜RTClib.h＞

const char* ssid = "my-ssid";

const char* password = "my-password";

const char* ntpServer = "pool.ntp.org"; // pool.ntp.org

const long gmtOffset_sec = 9 * 3600; // 時差を秒で設定･･･9時間

const int daylightOffset_sec = 0; // サマータイム設定･･･0

unsigned long interval_t = 60000 * 61 * 1; // 60000(mS)*60*1=1h 60000(1min)

unsigned long previousMillis_t = 0;

unsigned long previous_t = 0;

char date_ymdhms[21]; // yyyy/mm/dd,hh:mm:ssn0

RTC_DS3231 rtc;//select use RTC DS3231

void printLocalTime() {

//sntp_get_sync_status()は時間同期のステータスを取得します。

//更新が完了すると、ステータスはSNTP_SYNC_STATUS_COMPLETEDとして返されます。

struct tm timeinfo;

if (!getLocalTime(&timeinfo)) {

Serial.println("Failed to obtain time");

return;

}

if (sntp_get_sync_status() == SNTP_SYNC_STATUS_COMPLETED) {

Serial.println("sntp_get_sync_status = COMPLETED");

Serial.println(&timeinfo, "%A, %B %m %d %Y %H:%M:%S");

}

}

void setup() {

Serial.begin(115200);

Wire.begin();

//connect to WiFi

Serial.printf("Connecting to %s ", ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

Serial.println(" CONNECTED");

//init and get the time

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

printLocalTime(); // NTP時刻取得、同期ステータス表示、システム時刻表示

if (! rtc.begin()) {

Serial.println("Couldn't find RTC");

}

// RTCが電源を失った時(電池切れ)getLocalTime()して取得成功の場合取得時刻をRTCにセットし、

// 失敗の場合ｺﾝﾊﾟｲﾙ時刻をRTCにセットする。

if (rtc.lostPower()) {

Serial.println("RTC lost power, let's set the time!");

struct tm timeInfo;

if (!getLocalTime(&timeInfo)) {

/* 失敗でメッセージを表示しコンパイル時刻をRTCへセット 取得成功で取得時刻をRTCへセット */

Serial.println("Failed to obtain time Set to compile time"); // 時間の取得に失敗しましたコンパイル時刻をセットします

rtc.adjust(DateTime(F(__DATE__), F(__TIME__))); // コンパイル日時を仮設定

DateTime now = rtc.now();

sprintf(date_ymdhms, "%04d/%02d/%02d,%02d:%02d:%02d", now.year(), now.month(), now.day(), now.hour(), now.minute(), now.second());

Serial.println(date_ymdhms);

} else {

rtc.adjust(DateTime(timeInfo.tm_year + 1900, timeInfo.tm_mon + 1, timeInfo.tm_mday,

timeInfo.tm_hour, timeInfo.tm_min, timeInfo.tm_sec));

//tm_year:1900年からの年数 tm_mon:1月からの月数

Serial.println("adjust RTC !!");

DateTime now = rtc.now();

sprintf(date_ymdhms, "%04d/%02d/%02d,%02d:%02d:%02d", now.year(), now.month(), now.day(), now.hour(), now.minute(), now.second());

Serial.println(date_ymdhms);

}

}

//disconnect WiFi as it's no longer needed

//WiFi.disconnect(true);

//WiFi.mode(WIFI_OFF);

}

void loop() {

// 定期的にgetLocalTime()して同期できたらRTCをセットする

unsigned long currentMillis_t = millis();

if (currentMillis_t - previousMillis_t >= interval_t) { //interval_t 61分はOK60分はNG

previousMillis_t = currentMillis_t;

struct tm timeInfo;

if (getLocalTime(&timeInfo)) {

if (sntp_get_sync_status() == SNTP_SYNC_STATUS_COMPLETED) {

rtc.adjust(DateTime(timeInfo.tm_year + 1900, timeInfo.tm_mon + 1, timeInfo.tm_mday,

timeInfo.tm_hour, timeInfo.tm_min, timeInfo.tm_sec));

//tm_year:1900年からの年数 tm_mon:1月からの月数

Serial.println("adjust RTC !!");

} // else { Serial.println("NOT COMPLET"); }

} else {

Serial.println("Failed to obtain time");

}

}

//delay(1000);

// 10分毎にRTC時刻を取得して表示する。

unsigned long interval = 60000 * 10 *1; // 60000(1min)

unsigned long current_t = millis();

if (current_t - previous_t >= interval) {

previous_t = current_t;

//printLocalTime(); // このスケッチオリジナルの関数

DateTime now = rtc.now();

sprintf(date_ymdhms, "%04d/%02d/%02d,%02d:%02d:%02d", now.year(), now.month(), now.day(), now.hour(), now.minute(), now.second());

Serial.println(date_ymdhms);

}

}

[分割] エックスドメイン無料レンタルサーバー>>>XFREE（エックスフリー）

[分割] エックスドメイン無料レンタルサーバー>>>XFREE（エックスフリー）
XFREE（エックスフリー）
エックスドメイン無料レンタルサーバーをご利用いただいていた方について
この度、エックスドメインでは、『無料レンタルサーバー』をエックスドメインから分割し、
新サービス『XFREE（エックスフリー）』としてリニューアルしました。
伴って、サイトURLが変わりましたので、恐れ入りますが下記よりログインを行ってください。
エックスフリー公式サイト  エックスフリーログインフォーム

XFREE（エックスフリー）
https://www.xfree.ne.jp/

エックスドメイン
https://www.xdomain.ne.jp/news_detail.php?view_id=5023

HTMLフォーム

HTMLフォーム
ちなみに使用頻度は低いですが、

のように予めvalue属性の値に文字列をセットしておくと、以下のようになります。
ただ、これをあえて使う機会はあまりないでしょう。多くの場合単に入力の邪魔です（笑
よく「カタカナで入力下さい」のように薄い文字を表示させて、カーソルを合わせると文字が消えるというようなものがありますが、あれはこれではありませんので注意下さい。
たまに誤解されて使っている方がおります。
これはplaceholder属性というものを使います。 下記「placeholder属性」を参照下さい。

php-factory.net
https://www.php-factory.net/trivia/17.php







長い文章の入力
テキスト型のinput要素では1行のデータしか入力することができません。
HTMLのフォームでは複数行にわたる文章の入力のためにtextarea要素が用意されています。
アンケートの自由意見欄などにこのテキストエリアを使うことができます。
textarea要素はinput要素とは異なり、開始タグと終了タグのペアを使います。
タグの間に記述された内容が初期値として使われます。
データの名前を指定するname属性のほかに、入力エリアの行数、列数を示すrows属性とcols属性を指定します。
自由に意見を記述してください

KANZAKI
https://www.kanzaki.com/docs/html/htminfo31.html

[seesaa blog] スマートフォン専用ページを消す方法

[seesaa]スマートフォンでもPCサイトを表示
『デザイン』→『スマートフォン』→『コンテンツ』とクリック
      V
『自由欄形式』を『ブログタイトル』の上に設置
      V
『自由形式』以外のコンテンツを削除
      V
『自由形式』をクリックし、以下を記載。
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
document.cookie = 'force_pc=1; max-age=15768000; path=/';
document.cookie = 'force_sp=0; max-age=15768000; path=/';
location.href=location.pathname;
setTimeout("autoLink()",1000);
// --＞
＜/SCRIPT＞
      V
『保存』ボタンをクリック
      V
『保存』ボタンをクリック

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597




シーサーブログの「スマートフォン専用ページを表示」を消す方法
1、「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリック
      V
2、#iphone-link { display: none !important; }を追加
      V
3、保存をクリック

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597




シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
最終更新日2014/11/16 
公開日2014/06/05
category:ウェブサイトやブログ作成に役立つ無料ソフトやwebサービスとブログカスタマイズ
シーサーブログのスマートフォンサイトは広告がいっぱいだ。
ん？「スマートフォンサイトは設定して無い」って？
残念でした。
スマートフォンサイトは自動的に出来ちゃってるのだ。
シーサーブログユーザーは、一度スマートフォンで自分のブログにアクセスしてみるといい。
いつの間にかスマートフォンサイトが出来ているから！
しかも、べたべたと広告がいっぱいである。
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
シーサーブログのスマートフォンサイトの広告、消すことも、場所を動かすことも出来ない。
なぜなら、シーサーブログはスマートフォンサイトのHTMLを公開していないから。
そのくせ、なぜか携帯用のサイトでは広告がほとんど無い。
しかもスタイルシートもHTMLも公開されている。
まあ、無料ブログにとっては、広告収入がほしいってところだろうから仕方が無いといえば仕方が無い。
が、あまりにも広告が多すぎる。
シーサーブログはスマートフォンでもPCテンプレートで表示させた方がいいと思う。
スマートフォンでPCサイトを表示させるには？
スマートフォンでシーサーブログを見たときにPCサイトを見せるための方法はちゃんとある。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597




シーサーブログの「スマートフォン専用ページを表示」を消そう
シーサーブログの「スマートフォン専用ページを表示」を消す方法
「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリック。
2、＃iphone-link { display: none !important; }を追加。
3、保存をクリック。
　これで、「スマートフォン専用ページを表示」が消える。
　後は、PC用のテンプレートやスタイルシートをPCでもスマートフォンでも閲覧できる形に変えるだけ。
　この、PCでも、スマートフォンでも適切な表示がされるサイトのデザインをレスポンシブWebデザインというのだそうだ。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597





これで、スマートフォンで閲覧してもPCサイトが表示されるようになる。
さあ、シーサーブログユーザーはスマートフォンで自分のブログを見てみよう。
PCサイトで表示されているものと同じサイト表示が見れる。
が、そこには大きな
「スマートフォン専用ページを表示」
の表示が！！！
さあ、この「スマートフォン専用ページを表示」をどうする？
シーサーブログの「スマートフォン専用ページを表示」を消そう
「スマートフォン専用ページを表示」は、PC用テンプレートのHTMLの中にも、コンテンツHTMLの中にもそれらしい記載が無い。
どうも、シーサーブログにデフォルトで設定されているらしい。
ここはスタイルシートにdisplay: noneというのを追加して、「スマートフォン専用ページを表示」を表示されないようにしてしまおう。
display: noneの効果
display: noneで指定した部分は、表示されない。
表示されないだけでなく、領域もなくなる。
「スマートフォン専用ページを表示」という表示が出ていた部分が隙間無く表示されなくなる。
display: noneの使用で表示を消すとSEO上問題があるか？
ここで、気になるのは、検索エンジンなどでスパムとみなされないかという点だが、
「正当な理由で利用する限り問題がない」
という話が米GoogleのエンジニアMatt Cutts氏から出ているそうだ。
要は、display: noneで表示させない部分に、やたらに複数のテキストを入れたりしない限り今のところ問題ないということらしい。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597
http://freesoft.0hs.org/4169.html#comment-3597

[code]HTML5タグの語源

略されたHTML5タグの語源
タグ名 基となった英単語
nav navigation links
h* heading *
hgroup heading group
p paragraph
hr horizontal rule
pre preformatted text
ol ordered list
ul unordered list
li list item
dl description list
dt description term
dd description description
figcaption figure caption
div division
a anchor
em emphasis
s strike
q quotation
dfn definition
abbr abbreviation
var variable
samp sample
kbd keyboard
sub subscript
sup superscript
i italic
b bold
u underline
rt ruby text
rp ruby parentheses
bdi bi-directional isoration
bdo bi-directional override
br break
wbr word break
ins insert
del delete
img image
iframe inline frame
param parameter
colgroup column group
col column
tbody table body
thead table header
tfoot table footer
tr table row
td table data cell
th table header cell
optgroup option group
keygen key-pair generator

WEBCRE8.jp
http://webcre8.jp/investigate/html5-tag-etymology.html

はじめに ― HTML5を覚えるにあたって
最近HTML5入門と銘打っていくつか記事を書いています。
HTML5に関してはかなり思い入れが出てきて、最近色々制作しています。
webcre8自身も大してできるわけじゃないんですけど、人と会うと結構HTML5の話になったりします。
その中で「まだまだHTML5覚えられないなー」的な人にウケがいいのが
「知ってるようで知らないタグの元の意味を知る」
事です。
折りよく昨日TM LifeさんのHTML のタグを一度覚えたら一生忘れないようにするためのコツ | TM Lifeという記事を見かけ、
これのHTML5版を作ったらちゃんと知りたい人多そうだなーと思いました。
という訳で早速表を作った
と言う訳で略されたHTML5タグの語源表を作ってみました。まず表を見てみましょう。
略されたHTML5タグの語源
タグ名 基となった英単語
nav navigation links
h* heading *
hgroup heading group
p paragraph
hr horizontal rule
pre preformatted text
ol ordered list
ul unordered list
li list item
dl description list
dt description term
dd description description
figcaption figure caption
div division
a anchor
em emphasis
s strike
q quotation
dfn definition
abbr abbreviation
var variable
samp sample
kbd keyboard
sub subscript
sup superscript
i italic
b bold
u underline
rt ruby text
rp ruby parentheses
bdi bi-directional isoration
bdo bi-directional override
br break
wbr word break
ins insert
del delete
img image
iframe inline frame
param parameter
colgroup column group
col column
tbody table body
thead table header
tfoot table footer
tr table row
td table data cell
th table header cell
optgroup option group
keygen key-pair generator
タグ名がそのままタグの意味になっているものは抜いてあります。
ここにあるのは108つあるHTML5タグのうち49個。
付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。
それでもどうしても分かりにくそうなものは熟語として加えてあります。

WEBCRE8.jp
http://webcre8.jp/investigate/html5-tag-etymology.html

jQuery Google Map

jQuery Google Map
Google Mapsの地図を簡単に表示「jQuery Google Map」
Google Mapsの地図を簡単に表示するプラグイン「jQuery Google Map」を紹介します。
jQueryプラグイン「Google Map」
jQueryプラグイン「jQuery Google Map」は、「Google Maps javascript API」を利用して、地図を描画するプラグインです。
「Google Maps javascript API」の操作を全く知らなくても大丈夫！
操作部分の全ては「jQuery Google Map」プラグインがやってくれます。
サイトに地図をサササッと簡単に挿入できるので便利！

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/









デモとソースをご覧ください。
「jQuery Google Map」のデモ
ソース（HTML + jQuery）
＜!DOCTYPE html>
＜html>
＜head>
＜meta charset='utf-8'>
＜meta name="description" content="jQuery Google Mapのデモでーす。">
＜title>jQuery Google Map - jQueryプラグインまとめのカルマ
＜script src="http://code.jquery.com/jquery-2.0.0.js">
＜script type="text/javascript" src="https://www.google.com/jsapi">
＜script type="text/javascript">
    google.load("maps", "3.4", {
      other_params: "sensor=false&language=jp"
    });
＜/script>
＜script src="src/jquery.googlemap.js">
＜/head>
＜body>
＜p>＜a href="https://webkaru.net/jquery-plugin/jquery-google-map/">「jQueryプラグインまとめ」に戻る

＜h1>TOKYO 2020
＜div id="map" style="width: 800px; height: 600px;">
＜script type="text/javascript">
  $(function() {
    $("#map").googleMap({
      zoom: 15, // Initial zoom level (optional)
      coords: [35.681382, 139.766084], // Map center (optional)
      type: "ROADMAP" // Map type (optional)
    });
  })
＜/script>
＜/body>
＜/html>

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/















Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
地図カスタマイズのコツ
カスタマイズのコツとしましては、
デフォルトのgooglemapを見て、いる要素といらない要素、サイズ、ズームレベル、色など、Styled Map Wizard で作るより前にちゃんと決めておく。
Styled Map Wizard を開いて、文字やアイコンなど不要となりえる要素を先に全て非表示にしたものを元に、
HTML、CSS、JSの３つを、地図の座標を入れた状態で先に組み立てる。
Styled Map Wizard に戻り、必要なものだけ表示(変更)させ、その部分だけjsへコピペし、実際のプレビューはHTML上で行う。
というのがコツかと、作ってみて思った点です。
ちょっと面倒でも、このひと工夫でサイトの統一感がいっきに増す、Google map のデザイン変更。
皆さんも一度試してみてください。オリジナル感が出せるのでハマるとちょっと楽しいですよ！

バシャログ。
http://bashalog.c-brains.jp/13/02/12-104000.php

<----------api file="" nbsp="" p="">

UI,data-icon

data-icon
ボタンに対してdata-iconを付加することことでボタンにアイコンを付けることが可能です。
たとえば削除アイコンをつけたい場合は「data-icon=”delete”」を追加します。
 Delete
他にも、以下のような値が指定可能です。
 •data-icon=”arrow-l”
 •data-icon=”arrow-r”
 •data-icon=”arrow-u”
 •data-icon=”arrow-d”
 •data-icon=”delete”
 •data-icon=”plus”
 •data-icon=”minus”
 •data-icon=”check”
 •data-icon=”gear”
 •data-icon=”refresh”
 •data-icon=”forward”
 •data-icon=”back”
 •data-icon=”grid”
 •data-icon=”star”
 •data-icon=”alert”
 •data-icon=”info”
 •data-icon=”home”
 •data-icon=”search”
 •data-icon=”bars”
 •data-icon=”edit”
アイコンの表示位置はdata-iconpos属性で制御できます。

webcreativepark.net
http://www.webcreativepark.net/jquerymobile/buttons/data-icon/

[css] pointer-events:none; でリンクを非リンクに変える

[css] pointer-events:none; でリンクを非リンクに変える | 鹿児島のホームページ制作 株式会社 カナメン
2014.2.22
author : canamen, Inc.
「pointer-events:none;」はレスポンシブで重宝する可能性が高いです。
「pointer-events:none;」をレスポンシブで使用する方法や考え方はこちらから。合わせてご確認ください！
pointer_events_index
メニューリストを作成して、現在閲覧中のページのaタグをspanタグに変えリンク無効にするか、
aタグのままで表示してしまうか、悩みますよね。
「pointer-events:none;」を指定することで、タグのリンクを無効にしてる。
「pointer-events」の導入方法とメリット・デメリット
リンクを非表示にしたい項目の親要素にidを付けcssで装飾を変更する
メリット
    ・各ページのcssをbodyタグで制御できる。
デメリット
    ・cssのコードが増えてしまうので、読み込みに時間がかかる可能性がある。
各ページ毎に読み込むcssを分け装飾を変更する
メリット
    ・各ページの読み込み時間の短縮が可能。
デメリット
    ・cssを作成していくと共有と各ページで重複するソースが増えてしまう。
    ・作成に時間がかかります。
ポイント
時間があったり、綺麗なソースにしたい場合のみcssを分けた方がいいと思います。
それ以外は親要素にidを付けて使用しましょう。
ページ数が膨大になる場合、ページロード時間を短くする為に共通のcssと各ページ毎のcssの2種類をlinkさせるサイトが多いです。
「pointer-events」ソースコード例
//html
//css
#list a.about
{
pointer-events:none;/*リンクを非リンクに変える*/
cursor:default;/*マウスカーソルを矢印のまま変えない*/
text-decoration:none;/*下線を消す*/
color:#000000;/*非リンクの文字色と同じにする*/
}
補足
非リンクになっても、他のリンクと装飾は変わらないので、装飾を変えて一目で非リンクだと分かるようにした方がいいでしょう。
対応ブラウザが少ないので、過信は禁物です。

株式会社 カナメン
https://canamen.co.jp/css/css-pointer-eventsnone/

Google feed API

ブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能
2/3/2012
こんにちは。WEBコンテンツ･プランナーの中島です。
今回、自分の備忘録としてのメモも含め、サイト制作に便利な機能を紹介していくシリーズ展開していきたいと思います。
今回は、ブログ等を展開している人が、自分のホームページにブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能についてご案内します。
RSSのURLを入れこむだけでJavaScriptを書きでしてくれる便利な機能のモノもいろいろありますが、
カスタマイズできない物が多く見られます、と言うか、全てがパッケージ化されているものなので自由なデザインにすることが出来ません。
（誰でも簡単に使用できるようにしているため仕方のないことだと思います）
かなり高機能なものがありますが、
デザイン的な部分に目をつぶらなければならない場合が多いです。
せっかくデザインを自分自身で制作しているならデザイン的に自由に使えるRSSフィードを導入したいって思いますよね。
ただし、自由にデザインを設定できるとなると、やはりHTML,CSSを組める知識は必要になります。
WeeblyやJimdoなどの簡単サイト作成CMSサイトでもカスタムHTMLの記述ボックスを組み込めるサイトならもちろん、
自分でコーディングしているオリジナルのサイトでも使用可能な方法を紹介したいと思います。
【Google feed APIという便利な機能を利用します】
google feed apiのjavascriptを使って、ブログの更新情報を表示させたい画像サイズでサムネイル画像を表示させて、
タイトルと本文がリスト表示される。
さらに、外部へのリンクの場合、新規ウィンドウでリンク先を表示させたい、
そして、「続きを読む…」とかの誘導リンクも付ける。
こんな贅沢な設定を自分で、コーディングでやってしまおうという内容で進行していきます。

Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post













google.load("feeds", "1");
function initialize() {
  var feedurl = "http://creps-inc.weebly.com/2/feed"; //rssフィードのurlを指定。wordpressの場合はurl/feed/で取得できる。
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(8); //フィードの表示数を入れる
  feed.load(dispfeed);
  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";
      htmlstr += "

";

      for (var i = 0; i < result.feed.entries.length; i++) { //ループ処理
        var entry = result.feed.entries[i];
        var eimg = ""; //画像取得（初期値設定）
        var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG))/); //該当する拡張子のデータを画像として取得している
        if(imgCheck){
                 eimg += ''; //eimgにはimgタグを挿入するように設定、大きさは100ピクセル
      }
        htmlstr += '

'

        var strdate = createDateString(entry.publishedDate);
        htmlstr +=  '

' + eimg + '

';
        htmlstr +=  '

' + entry.title + '' + '' + entry.contentSnippet.substr(0,140) + '' + strdate + '

';
        htmlstr += "
"      }
      htmlstr += "
";       container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  }
}
function createDateString(publishedDate){
  var pdate = new Date(publishedDate);
  var pday = pdate.getDate();
  var pmonth = pdate.getMonth() + 1;
  var pyear = pdate.getFullYear();
  var phour = pdate.getHours();
  var pminute = pdate.getMinutes();
  var psecond = pdate.getSeconds();
  var strdate = pyear + "/" + pmonth + "/" + pday ;
  return strdate;
}
google.setOnLoadCallback(initialize);

Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post

Font Awesome

Font Awesome
The iconic font and CSS toolkit
  Download
Version 4.7.0   ·    GitHub Project   ·
Old 3.2.1 Docs   ·   Created by Dave Gandy

Font Awesome
http://fontawesome.io






 One Font, 675 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.
 No JavaScript Required
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
 Infinite Scalability
Scalable vector graphics means every icon looks awesome at any size.
 Free, as in Speech
Font Awesome is completely free for commercial use. Check out the license.
 CSS Control
Easily style icon color, size, shadow, and anything that's possible with CSS.
 Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
 Plays Well with Others
Originally designed for Bootstrap, Font Awesome works great with all frameworks.
 Desktop Friendly
To use on the desktop or for a complete set of vectors, check out the cheatsheet.
 Accessibility-minded
Font Awesome loves screen readers and helps make your icons accessible on the web.

Font Awesome
http://fontawesome.io









..........................
.fa-step-backward:before{content:"\f048"}
.fa-fast-backward:before{content:"\f049"}
.fa-backward:before{content:"\f04a"}
.fa-play:before{content:"\f04b"}
.fa-pause:before{content:"\f04c"}
.fa-stop:before{content:"\f04d"}
.fa-forward:before{content:"\f04e"}
.fa-fast-forward:before{content:"\f050"}
.fa-step-forward:before{content:"\f051"}
.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-plus-circle:before{content:"\f055"}
.fa-minus-circle:before{content:"\f056"}
.fa-times-circle:before{content:"\f057"}
..............................

fgdf pc

Google Fonts

Viewing 821 of 821 font families

Google Fonts
https://fonts.google.com/




//code
Abril+Fatface|Vidaloka
" rel="stylesheet">
Google Fonts
https://fonts.google.com/

RSS FeedをJavascriptでウェブページに表示

RSS情報をJavaScriptで表示する（UTF-8版）
ＷＥＢサイトやブログのＲＳＳフィードを摂取して、好きなＷＥＢページにJavaScriptで表示させることができるJavaScript版のＲＳＳリーダーです。 ページを読み込むつど、最新の情報に更新されます。
以下の設定に従って、表示させたい情報と表示方法を選択してください。
「プレビュー」ボタンを押すと、表示内容と表示方法を確認できます。
 表示されたら、「コードを表示」ボタンを押してください。
Javascriptのコードが表示されますので、表示させたい場所へコピペしてください。

RSS情報をJavaScriptで表示する（UTF-8版）
http://www.ritardando.cc/feed2js/build.php

RSS FeedをJavascriptでウェブページに表示 (ベータ版)
以下の設定に従って、表示させたい情報と表示方法を選択してください。
「プレビュー」ボタンを押すと、表示内容と表示方法を確認できます。
 問題なく表示されたら、「コードを取得」ボタンを押してください。 そうすると、Javascriptのコードが表示されます。
あとはそれを表示させたい場所へコピペしてください。

RSS FeedをJavascriptでウェブページに表示
http://www.moondakota.com/feed/index_s.php

Google Places API JavaScript ライブラリ

Google Places API JavaScript ライブラリ
 多くの場所の最新情報を利用できます。

Request
size: 600x300
location: 46.414382,10.013988
heading: 151.78
pitch: -0.76
key: API_KEY

Url
https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76&key=YOUR_API_KEY

developers.google.com
https://developers.google.com/maps/documentation/streetview/

Google Maps JavaScript API

Google Maps JavaScript API
独自のコンテンツや画像を使ってマップをカスタマイズします。

developers.google.com
https://developers.google.com/maps/documentation/javascript/

Yahoo! UI

Yahoo! UI
YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.

YUI Library
http://yuilibrary.com/

Blogtrottr

Delicious news, fed to your inbox

Blogtrottr delivers updates from all of your favourite news, feeds, and blogs 

directly to your email inbox, giving you the flexibility to stay updated whilst on the go. Yummy!

Blogtrottr

http://blogtrottr.com/

これは便利！　 GmailをGoogleリーダー化する方法(2013年06月30日)

 - 今日のサムシング：バックナンバー

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226

Blogtrottr

http://blogtrottr.com/

Blogtrottr

この方法の前提として、Gmail を利用していることが必要です。

もし、Gmailのアカウントを持っていないという方は、まずは、Gmailのアカウント（アドレス）を取得してくださいね。

Step1：Blogtrottr にGmailのアドレスを登録する

Blogtrottrのトップページに「Getting Started」と書いたところがあります。

ここに、ウェブサイトのURIを入力するところがありますが、そこは空欄にしたまま、e-mail 欄にGmail アドレスを入力し、Realtime を選択して、「Feed Me」と書かれたボタンを押します。

すると、Gmailに「Confirm your Blogtrottr account」というタイトルの英語メールが届きます。

そのメールに記載されているリンクをクリックし、パスワードを入力すれば登録完了です。

Step2:Blogtrottr にログインし、RSSを登録する

登録したGmailのアドレスと、パスワードでログインします。

「OPML import」を選択して、Google リーダーに登録していたRSS情報をアップロードすれば、RSSフィードがメールで届くようになります。

Step3:Gmailでフィルタリングを行う

つぎに、Gmailで、振り分け（フィルタリング）設定を行います。

私の場合、登録しているRSSフィードは、1日に1,000通を超えてしまいます。

これでは、受信箱がRSSフィードだらけになってしまい、メールを見落とすことにもなりかねません。

そこで、フィルタリングという機能を用います。

Gmailの右上にある歯車のようなアイコンをクリックし、「設定」を選択します。

上部に「フィルタ」と表示されているリンクをクリックします。

画面の一番したにある「新しいフィルタを作成 」というリンクをクリックします。

ここで、From欄に、以下のアドレスを入力し、「この検索条件でフィルタを作成 」というリンクをクリックします。

　busybee@blogtrottr.com

そこで、「アクション」が出てくるので、次のように設定します。

　・受信箱をスキップ

　・ラベル「RSS[Blog]」を付ける

　・迷惑メールにしない

最後に「フィルタを作成」ボタンをクリックすればOKです。

これによって、RSS情報が「RSS[Blog]」というタグに集約されるようになります。

あとは、検索の窓で

is:unread label:RSS[Blog] (東京)(ウエディング OR ブライダル)

のように、検索条件を入れてあげれば、欲しい検索語を含むRSSだけが一覧で表示されます。

上記の例を少し解説しておきます。

is:unread　　　　 これは未読のもののみ表示するという意味です

label:RSS[Blog]　 これは、先ほど作成したラベル「RSS[Blog]」のついたものだけを表示するという意味です。

(東京)　　　　　　「東京」という検索用語を含んだもの

(ウエディング OR ブライダル)　　検索用語として、「ウエディング」または、「ブライダル」という言葉を含むもの

これで、「東京」という検索用語を含み、且つ、ウエディング・ブライダルという用語を含んだRSS（未読のみ）を表示させることができます。

検索条件を組み合わせることで、とても便利に使えるため本当に便利です。

この方法を見つけてから、Googleリーダーとほぼ同じ使い方ができるため、助かっています。

情報収集の方法としてオススメです。

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226

ここで、From欄に、以下のアドレスを入力し、「この検索条件でフィルタを作成 」というリンクをクリックします。

　busybee@blogtrottr.com

そこで、「アクション」が出てくるので、次のように設定します。

　・受信箱をスキップ

　・ラベル「RSS[Blog]」を付ける

　・迷惑メールにしない

最後に「フィルタを作成」ボタンをクリックすればOKです。

これによって、RSS情報が「RSS[Blog]」というタグに集約されるようになります。

あとは、検索の窓で

is:unread label:RSS[Blog] (東京)(ウエディング OR ブライダル)

is:unread　　　　 これは未読のもののみ表示するという意味です

label:RSS[Blog]　 これは、先ほど作成したラベル「RSS[Blog]」のついたものだけを表示するという意味です。

これで、「東京」という検索用語を含み、且つ、ウエディング・ブライダルという用語を含んだRSS（未読のみ）

を表示させることができます。

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226

先週、Google Reader のサービス提供停止に伴う代替サービスとして、Feedly と The Old Readerをご紹介しました。

Google リーダーサービス終了まであと1週間

ついに、Xデーがやってきました。

先週お伝えしたばかりで大変気が引けるのですが、「検索」機能にこだわった移行方法として、新しい方法をみつけました。

これが、とっても快適で・・・

私のRSSリーダーの使い方の一つは、特定のキーワードにヒットする新着情報のみをみたいというもの。

＃　 ちょっと特殊な事情になるかもしれませんが・・

例えば、競合他社の情報を常にチェックしたいという場合、

候補となる会社のホームページをいちいちチェックするというのは大変です。

そこで、競合他社のホームページのRSSを登録しておき、更新情報があればチェックをしたい。

ところが、会社のホームページというものは、必ずしもこちらの欲しい情報が必ず配信されるというわけではありません。

本当は自社サイトに、常に最新情報が掲載されていることが、マスコミに取り上げてもらう確率を上げますし、

自社ホームページからの来館や問い合わせの確率を上げるうえで有効なのですが、

自社のホームページの更新をせずに、マスコミへのプレスリリースのみを配信しているなんてこともこの業界では珍しくありません。

＃　これは、実にもったいないのですが、本当に多いんですよ・・・。

そこで、競合他社のサイトだけでなく、プレスリリース配信サイトや、結婚式場検索サイトなどのRSSを登録しておくと

「会社のホームページには載っていないけれども、最新の情報」という情報をピックアップできます。

ところが、プレスリリース配信サイトや、結婚式場検索サイトの場合、

情報が欲しい式場のネタだけが配信されているわけではありません。

いわば、欲しい情報以外の、「ノイズ」となる情報が大量に届くことになります。

ノイズが多いと、本当に欲しい情報を見落としてしまう可能性があり、

多くのサイトを登録して、情報収集の漏れを防ぎたいと思っても、無駄な情報ばかりが増えて、

肝心の情報を見過ごしてしまう・・なんてことになりかねません。

また、大量に届く新着情報を、いちいち目視して確認、要・不要を分けていく作業はとても煩雑ですから、

なんのためにRSSリーダーを使っているのかわからなくなります。

そのため、収集したRSS情報（＝新着情報）の中から、自分が収集したいキーワードのみを含む情報を「検索」によって抽出したいというニーズが生まれるわけです。

Google リーダーは、世界最大の検索エンジンサービス会社のGoogleが提供していたサービスだけあり、

この「検索」機能が秀逸で、ばっちり欲しい情報を瞬時にピックアップしてくれました。

ところが、Googleリーダーの代替サービスとして候補にあがる様々なRSSリーダーサービスは、

この「検索」機能がついていないものが大半で、

私のようなニーズに応えてくれるもので、無料のものはThe Old Reader くらいしか見つけることができませんでした。

2週間ほどThe Old Reader を使ってみたところ、確かに検索機能が提供されているのですが、

検索結果がどうしても納得のいかないものが多数含まれているのです。

検索キーワードに近いものを推測しているのか、検索キーワードそのものが含まれていないのに、

検索結果の中に表示される新着情報が多数まぎれています。

検索によって、ある程度の絞り込みはできますが、それでも、明らかに不要な情報が混じっており、

それを目視で閲覧対象から外していく必要があり、記事を探す上で、とてもムダな作業が発生してしまいます。

そこで、なんとか、Google の検索機能を使うことができないか？と考えて、いろいろネットを探してみると、ありました！！

ぴったりの方法が！！

それは、RSS情報をGmail へ送付させるという方法です。

この方法を実現させるためには、RSSをmailに変換して送付してくれるサービス「Blogtrottr」を用います。

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226