ラベル #doc javascript の投稿を表示しています。 すべての投稿を表示
ラベル #doc javascript の投稿を表示しています。 すべての投稿を表示

2021年11月25日木曜日

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




[Code] NTPで取得した時刻をRTCへセットする
NTPで取得した時刻をRTCへセットする(ESP32)
2021/6/28
投稿者:管理人
ESP-WROOM-32でやってみました。調査結果により書き直したので、記事タイトルと内容に
ズレがあります。
調べてわかったこと
起動時のNTP時刻取得後は、1時間毎の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);
}
}

2019年8月8日木曜日

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




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

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

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

2018年10月4日木曜日

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


2018年6月8日金曜日

[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







2018年2月25日日曜日

[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

2018年2月8日木曜日

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の3つを、地図の座標を入れた状態で先に組み立てる。
Styled Map Wizard に戻り、必要なものだけ表示(変更)させ、その部分だけjsへコピペし、実際のプレビューはHTML上で行う。
というのがコツかと、作ってみて思った点です。
ちょっと面倒でも、このひと工夫でサイトの統一感がいっきに増す、Google map のデザイン変更。
皆さんも一度試してみてください。オリジナル感が出せるのでハマるとちょっと楽しいですよ!

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







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





2017年10月5日木曜日

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/

2017年8月2日水曜日

[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 +=  ' ';
            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














    2017年7月25日火曜日

    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/




    2017年2月6日月曜日

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

    RSS情報をJavaScriptで表示する(UTF-8版)
    WEBサイトやブログのRSSフィードを摂取して、好きなWEBページにJavaScriptで表示させることができるJavaScript版のRSSリーダーです。 ページを読み込むつど、最新の情報に更新されます。
    以下の設定に従って、表示させたい情報と表示方法を選択してください。
    「プレビュー」ボタンを押すと、表示内容と表示方法を確認できます。
     表示されたら、「コードを表示」ボタンを押してください。
    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

    2017年1月21日土曜日

    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/






    2017年1月15日日曜日

    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/

    2013年6月30日日曜日

    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


    これは便利!  GmailをGoogleリーダー化する方法(2013年06月30日)
     - 今日のサムシング:バックナンバー

    今日のサムシング

    Blogtrottr



    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