[code][ajax] ページをURLで指定して、要素内にHTMLとして出力

ページをURLで指定して、要素内にHTMLとして出力
サンプルコードと合わせてみていきたいと思います。
まずは取得したいコンテンツ（＝要素）があるページのURLを指定します。
そして、find関数で取得する要素を取得し、その要素を変数へ格納させ、表示させたいHTMLの中の要素へappend関数で出力します。

プログラミングナレッジ
https://designsupply-web.com/knowledgeside/2086/

【sample.html】
＜body＞
＜script＞
$(function(){
$.ajax({
url: 'http://example.com', // 表示させたいコンテンツがあるページURL
cache: false,
datatype: 'html',
success: function(html) {
var h = $(html).find('#hoge'); // 表示させたいコンテンツの要素を指定
$('#wrap').append(h); // append関数で指定先の要素へ出力
}
});
});
＜/script＞
＜div id="wrap"＞

＜/div＞
＜/body＞

[RSS] Google Feed APIを使わないで相互RSSを表示する

[RSS] Google Feed APIを使わないで相互RSSを表示する
Google Feed APIを使わないで相互RSSを表示する方法
「以前の投稿」で紹介しましたが、アクアリウムWikiではGoogle Feed APIを利用して相互RSSを表示していました。
しかし、Google Feed APIはキャッシュ周りに不具合があるようで、古いものが表示されることがありました。
また、近々廃止される方針らしく、いつ停止してもおかしくありません。
そこで「jQueryだけで相互RSSを表示しよう」という試みです。

jQueryでRSSを取得する方法
フィードを取得して、各アイテムを並べ直すだけなら、jQueryで簡単に実装できます。

$.get（FEED_URL, function （data) {
$（data).find（"entry").each(function () { // or "item"
var el = $(this);
console.log(el.find（"link").text());
console.log(el.find（"title").text());
});
});

FEED_URLは名前の通りフィードのURLを指定します。
jQueryのget()を使いデータを取得しています。
取得したdataの内、find()でentryを取得し、each()で回しています。
このentryはフィードの種類によってitemなことがあるので、フィードの種類に合わせて変更してください。（2パターンしかないので複数のフィードに対応するなら分岐するのもあり）
あとは取得したitmeを入れたelからfind()で、それぞれのテキストを取得しています。
実質わずか5行程度で取得して各アイテムを個別に取り出すことができました。
また、Google Feed APIは他のスクリプトが完了した後に実行されたため、表示が遅いという欠点があったのですが、jQueryはすぐに表示されます。
「早く乗り換えれば良かった」というのが実感です。
ちなみに今回アクアリウムWiki相互RSS用に作成したコードは以下のとおり。

$.ajax({
url:'http://aqwiki.net/rss/rss_list.txt',
success: function(data){

var rss_url = 'http://aqwiki.net/rss/' + data;

var htmlstr = "";
htmlstr += '＜h2＞＜a href="http://aqwiki.net/rss/ko.html" rel="nofollow" target="_blank"＞アクアリウムWiki 相互RSS＜/a＞ 新着記事＜/h2＞';
htmlstr += '＜div class="all_body"＞';
htmlstr += '＜ul＞';

$.get(rss_url, function(data) {
$(data).find("item").each(function (i) { // or "entry"
var el = $(this);

var oddeven = ( i % 2 == 0 ) ? 'lieven' : 'liodd'; //oddとevenを付けるため。三項演算子
htmlstr += '＜li class="' + oddeven + '"＞';
htmlstr += '＜img src="http://www.google.com/s2/favicons?domain=' + el.find("link").text() + '"＞';
htmlstr += '＜a href="' + el.find("link").text() + '" title="' + el.find("title").text() + '" rel="nofollow" target="_blank"＞' + el.find("title").text() + ' - ' + el.find("category").text() + '＜/a＞';
htmlstr += '＜/li＞';

});

htmlstr += '＜/ul＞';
htmlstr += '＜/div＞';

var container = document.getElementById("aq_feed");
container.innerHTML = htmlstr;

});
}
});

複数のサイトからフィードを取得する場合クロスサイトドメインの問題があるので、まずはPHPのajaxを利用して最新のフィードを取得。並べ替え等の処理をしたフィードのファイル名を書き出しています。（この辺は二度手間ですがGoogle Feed API利用時の名残りです）
それを$.ajax()で読み込み、ファイル名として利用し、$.get()で取得という流れです。
後は、htmlのIDがaq_feedの要素に作成したRSSを代入して表示しています。
興味のある方はhtmlに以下のコードを貼り付けて表示してみてください。
これはheader内に追加
＜link rel="stylesheet" href="http://aqwiki.net/rss/default.css" type="text/css" /＞
＜script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"＞＜/script＞
＜script type="text/javascript" src="http://aqwiki.net/rss/rssexp.js" charset="UTF-8"＞＜/script＞
あとはbody内の表示したい部分に以下を追加
＜div id="aq_feed"＞＜/div＞
ちなみに相互RSSはアクアリウム関連のサイトなら、自由に参加できます。
参加希望の方は「こちらのフォーム」より必要事項を記載の上、応募してください。

OxyNotes
https://oxynotes.com/?p=10115

[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

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/

貼るだけ簡単RSS表示用ブログパーツ！

貼るだけ簡単RSS表示用ブログパーツ！
お気に入りサイトの最新情報・投稿記事をブログやHPに掲載

貼るだけ簡単RSS表示用ブログパーツ！
https://feed.mikle.com/ja/

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/

css,table,,

[HTML-CSS] コピペですぐに使える「table」のコードサンプル - Webworker's Clip

Webworker's Clip
http://webworkersclip.com/2875/






html   
項目名   
内容がはいります。
項目名
内容がはいります。
項目名
内容がはいります。

Webworker's Clip
http://webworkersclip.com/2875/








css
table.type02 {
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    line-height: 1.5;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
table.type02 th {
    width: 150px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    background: #eee;
}
table.type02 td {
    width: 350px;
    padding: 10px;
    vertical-align: top;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

Webworker's Clip
http://webworkersclip.com/2875/

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/

Apple vs Yahoo! vs Google -どうなるAJAX？-

Apple vs Yahoo! vs Google -どうなるAJAX？-
2005/7/27(水) 午前 1:31 Computer パソコン
AJAXっていうのはブラウザでJavaScriptの機能を使って，XML形式のデータをやりとりする対話型Webアプリケーションの実装なんだけど．．．
ふつうのホームページを見るのと違ってJavaScriptのHTTP通信機能を使ってるから，ユーザがブラウザを操作してないときにもサーバとデータを自動的にやりとりできる．
Macユーザによって分かりやすいのはDashboard Widgetなんだけど，
例えば天気予報のWidgetだったらお天気データサーバから自動的にデータをXML（HTMLの賢いようなヤツ）で取ってきて，自分で画面を更新してるわけ．
このときお天気Widgetはブラウザ代わりになってるってこと．
実際には昔からある機能らしいけど，最近になって一番最初にその技術を見直したのはGoogleだった．
Google Mapsにはその機能が実装されてる．
もともとはJavaScriptはNetscapeが作ったんだけど（SunはJavaでこれとは違うもの），
これが主流になっちゃうといろんなアプリケーションが，クロスプラットフォームで動いちゃって，簡単なテキスト処理ぐらいだったら問題なくできるし，Microsoftが脅威に感じてNetscapeをつぶしにかかった契機にもなってる．
AppleがDashboard Widgetを作ってからは俄然注目をあびちゃって，ネット上のトラフィックを取り込みたい企業にとってはたまらない機能になっちゃった．
正確に言うとDashboardはJavaScriptとHTMLとCSSなんだけどね．
んで，今度はYahoo!がKonfabulatorのPixoriaを買収して，Yahoo! Widgetsとしてフリーで配布するんだって．
ブラウザの覇権争いもFirefoxの登場でにぎわってるけど，AJAXな世界でもトラフィックの奪い合いが始まっちゃうわけね．
やれやれ．．．
こうなったらGoogleも黙ってないだろうし，もっといえばMicrosoftは絶対黙ってない．
AppleのDashboardだってそうだけど，AJAXが十分な機能を持つには拡張が必要な状態だからまた規格が乱立するようなことにならないと良いけどね．
ちょっと前に標準化の話もあったので，とっとと枠組みだけでも決めてくれれば助かるかな．
それと，Pixoriaっていう会社は，昔，旧Mac OSのデスクトップをカスタマイズするKaleidoscopeっていうソフトを作った人がおこした会社なんだけど，その人はどうなるのかなぁ？
Yahoo!に雇われるの？
Kaleidoscopeなつかしい．．．

Macin Blog
https://blogs.yahoo.co.jp/double_ko/folder/363766.html