2019年8月8日木曜日
[wEB][RSS] あまつべとFeedWindでつくるブログツール
Amazonランキング 非公式RSSフィード
使い方
Amazonの公式RSSが廃止されたらしく配信終了していたので、 誰でも簡単にAmazonベストセラー売れ筋ランキングのRSSを取得できるサービスを作りました。
難しいAPIなどの知識は不要。
アソシエイトIDにも対応しているので、アフィリエイト用にも使えます。
取得したいAmazonの売れ筋ランキングページのURLをフォームにコピペして、フィード生成ボタンを押してください。
注意
RSSへのアクセスは1時間に1回程度でお願いします
Amazonランキング 非公式RSSフィード(あまつべ)
https://am-tb.tk/amaranrss/
Bring content and life to your websites
The world's favorite RSS widget integrates dynamic
content into your websites - easier and faster
FeedWind
https://feed.mikle.com/ja/features/
[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>
<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
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
[Web] リリースチェッカー,新着情報RSS配信サービス
[Web] リリースチェッカー,新着情報RSS配信サービス
リリースチェッカーはAmazon.co.jpの新着情報RSSを配信するサービスです。
チェックしておけば、好きなアーティストのCDが知らぬまに発売されていた、なんてことがなくなります。
RSSを生成
キーワード:
含めるジャンル:和書 洋書 音楽 DVD ゲーム ソフトウェア
キーワードの判定を厳しくする(説明)
アダルト商品を含める
リリースチェッカー
https://a.noare.net/
[打切] Amazon RSS機能終了
[打切] Amazon RSS機能終了
2019年早々、日本では全然話題にならなかったがあるサービスが2つ終了した。
ひとつは「YQL」(Yahoo! Query Language)というアメリカYahoo!のWebサービスで、Web上のデータを取得してユーザーが好きな形に加工して出力することが可能だった。
自分の場合はシンプルに「外部RSSフィードを取得してJSONPにし、jQueryで表示する」という形で使っていて、
以前は外部ブログの更新情報を拾ってきたり、AmazonのRSSを加工してサイドバーでブログパーツ代わりに使ったりしていた。
元々は自作のコードなんか使えないFC2ブログでRSSフィードを扱うために、Google Feed APIを使用していたのだが、残念なことにすでに何年も前に終了している。
その代替として結構長く使用していたのだが、その移行先(YQL)も終わってしまったというわけだ。
Google Feed API から YQL API へ移行したお話 - Qiita
(追記あり)YQL、2019年1月3日でサービス終了していたもよう/YQLを利用していた「嫁のはてブ」などがサービス提供できない状態に - Togetter
更なる代替サービスを探してみたところ、「RSS → JSONP」は以下のサービスが使えそうな感じだった。ただ、後述するAmazonのRSSサービスが終了してしまったので、結局本格的には使用しておらず、レスポンスなどはよくわからない。
RSS to JSON Converter online - rss2json.com
もうひとつ終了したのは、AmazonのRSSサービス。
以前はランキングのページなどにRRSフィードへのリンクがあったのだが、現在はどこを探しても消えている。
元々RSSにアクセスできていたURLも軒並みアクセスできなくなっているので、終了したのは間違いないだろう。
ただ、こっちに関しては正式なリリースらしきものが見当たらず、RSSフィードのヘルプページもそのまま残されてる。
まあAmazonとしても重要なサービスではなく、使ってる人もほとんどいないからどうでもいい(というか優先度が極めて低い)扱いなのかもしれない。
Amazon.co.jp ヘルプ: RSSフィードについて
これに関しては(Amazon自体のサービスだから当たり前だが)代替サービスは特になく、似たようなものを利用したいなら
Amazon Product Advertising API
を使用するしかないようだ。ただ返ってくるデータ形式がXMLなので、ブログに気軽に使うというわけにもいかない様子。
Amazon Product Advertising API - Wikipedia
というわけで自分のところには、これらのサービス終了は非常にピンポイントで問題が起こったのだが、
ネットを検索しても話題にしている人が本当に少なかったところを見ると、本当にマイナーだったんだろう。
まあサーバをレンタルしてWordPressでも使っていれば、恐らくプラグインとかでどうにかなる話なので、無料ブログでしょうがなくYQLを使ってるなんてところは、ほとんどなかったのかもしれない。
採算が取れなかったり、利用者が少なかったりするサービスが終了するのはしょうがないが、やはり自分の身に降りかかってくるとなかなか大変で、Googleリーダーが終了したときのことを思い出してしまった。
Web Memo
http://128bit.blog41.fc2.com/blog-entry-425.html
2019年早々、日本では全然話題にならなかったがあるサービスが2つ終了した。
ひとつは「YQL」(Yahoo! Query Language)というアメリカYahoo!のWebサービスで、Web上のデータを取得してユーザーが好きな形に加工して出力することが可能だった。
自分の場合はシンプルに「外部RSSフィードを取得してJSONPにし、jQueryで表示する」という形で使っていて、
以前は外部ブログの更新情報を拾ってきたり、AmazonのRSSを加工してサイドバーでブログパーツ代わりに使ったりしていた。
元々は自作のコードなんか使えないFC2ブログでRSSフィードを扱うために、Google Feed APIを使用していたのだが、残念なことにすでに何年も前に終了している。
その代替として結構長く使用していたのだが、その移行先(YQL)も終わってしまったというわけだ。
Google Feed API から YQL API へ移行したお話 - Qiita
(追記あり)YQL、2019年1月3日でサービス終了していたもよう/YQLを利用していた「嫁のはてブ」などがサービス提供できない状態に - Togetter
更なる代替サービスを探してみたところ、「RSS → JSONP」は以下のサービスが使えそうな感じだった。ただ、後述するAmazonのRSSサービスが終了してしまったので、結局本格的には使用しておらず、レスポンスなどはよくわからない。
RSS to JSON Converter online - rss2json.com
もうひとつ終了したのは、AmazonのRSSサービス。
以前はランキングのページなどにRRSフィードへのリンクがあったのだが、現在はどこを探しても消えている。
元々RSSにアクセスできていたURLも軒並みアクセスできなくなっているので、終了したのは間違いないだろう。
ただ、こっちに関しては正式なリリースらしきものが見当たらず、RSSフィードのヘルプページもそのまま残されてる。
まあAmazonとしても重要なサービスではなく、使ってる人もほとんどいないからどうでもいい(というか優先度が極めて低い)扱いなのかもしれない。
Amazon.co.jp ヘルプ: RSSフィードについて
これに関しては(Amazon自体のサービスだから当たり前だが)代替サービスは特になく、似たようなものを利用したいなら
Amazon Product Advertising API
を使用するしかないようだ。ただ返ってくるデータ形式がXMLなので、ブログに気軽に使うというわけにもいかない様子。
Amazon Product Advertising API - Wikipedia
というわけで自分のところには、これらのサービス終了は非常にピンポイントで問題が起こったのだが、
ネットを検索しても話題にしている人が本当に少なかったところを見ると、本当にマイナーだったんだろう。
まあサーバをレンタルしてWordPressでも使っていれば、恐らくプラグインとかでどうにかなる話なので、無料ブログでしょうがなくYQLを使ってるなんてところは、ほとんどなかったのかもしれない。
採算が取れなかったり、利用者が少なかったりするサービスが終了するのはしょうがないが、やはり自分の身に降りかかってくるとなかなか大変で、Googleリーダーが終了したときのことを思い出してしまった。
Web Memo
http://128bit.blog41.fc2.com/blog-entry-425.html
2019年2月19日火曜日
[ウェブ] Googleドキュメントファイルを Webサイトに埋め込む
[ウェブ] Googleドキュメントファイルを Webサイトに埋め込む
Google ドキュメントで作成したファイル
(ドキュメント、スプレッドシート、プレゼンテーション、図形描画)
は、Web サイトやブログ、Google サイトなどに簡単に埋め込んで使用することができます。
Google ドキュメント ファイルを更新すると埋め込んだデータはリアルタイムで反映するため、頻繁に更新が必要な表データなどに利用することで作業効率が格段に向上します。
一般公開されている Web サイトに Google ドキュメントファイルを埋め込む場合は、ファイルをインターネット上に公開する必要があります。
Apps x Support
https://www.appsupport.jp/docs/embed/
埋め込みコードをコピー
3. Web サイトに Google ドキュメントファイルを埋め込み
Web サイトやブログに先ほどコピーした埋め込みコードを貼り付けると、Google ドキュメントファイルを埋め込むことができます。
埋め込むファイルのサイズを調整する場合は、次の方法で行います。
埋め込みファイルを幅 600px × 高さ 300pxとしてかつ枠線を表示しないようにするには、
埋め込みコード
<iframe src=”https://docs.google.com/・・・・・・・・・・></iframe>
の「iframe」と「src」の間に
「width=’600′ height=’300′ frameborder=’0’」
を追加し、
<iframe width=’600′ height=’300′ frameborder=’0′ src=”
https://docs.google.com/・・・・・・・・・・></iframe>
とします。
Apps x Support
https://www.appsupport.jp/docs/embed/
Web サイトに埋め込むファイルを表示
▽
[ファイル]メニュー>>[ウェブに公開]をクリック
▽
「ウェブに公開」画面の[一般公開開始]ボタンをクリック
▽
「ウェブに公開」画面に表示されている埋め込みコードをコピー
▽
[閉じる]ボタンをクリック
▽
コピーした埋め込みコードをブログ投稿画面に貼り付け
bvbvfvb pc
Google ドキュメントで作成したファイル
(ドキュメント、スプレッドシート、プレゼンテーション、図形描画)
は、Web サイトやブログ、Google サイトなどに簡単に埋め込んで使用することができます。
Google ドキュメント ファイルを更新すると埋め込んだデータはリアルタイムで反映するため、頻繁に更新が必要な表データなどに利用することで作業効率が格段に向上します。
一般公開されている Web サイトに Google ドキュメントファイルを埋め込む場合は、ファイルをインターネット上に公開する必要があります。
Apps x Support
https://www.appsupport.jp/docs/embed/
埋め込みコードをコピー
3. Web サイトに Google ドキュメントファイルを埋め込み
Web サイトやブログに先ほどコピーした埋め込みコードを貼り付けると、Google ドキュメントファイルを埋め込むことができます。
埋め込むファイルのサイズを調整する場合は、次の方法で行います。
埋め込みファイルを幅 600px × 高さ 300pxとしてかつ枠線を表示しないようにするには、
埋め込みコード
<iframe src=”https://docs.google.com/・・・・・・・・・・></iframe>
の「iframe」と「src」の間に
「width=’600′ height=’300′ frameborder=’0’」
を追加し、
<iframe width=’600′ height=’300′ frameborder=’0′ src=”
https://docs.google.com/・・・・・・・・・・></iframe>
とします。
Apps x Support
https://www.appsupport.jp/docs/embed/
Web サイトに埋め込むファイルを表示
▽
[ファイル]メニュー>>[ウェブに公開]をクリック
▽
「ウェブに公開」画面の[一般公開開始]ボタンをクリック
▽
「ウェブに公開」画面に表示されている埋め込みコードをコピー
▽
[閉じる]ボタンをクリック
▽
コピーした埋め込みコードをブログ投稿画面に貼り付け
bvbvfvb pc
[ウェブに公開]をクリック
埋め込みコードをコピー
2019年2月7日木曜日
[Web][RSS] Queryfeed
[Web][RSS] Queryfeed
Queryfeed
Read Twitter, Instagram, Google Plus and Facebook on RSS
Twitter Search
Parses Twitter pages, so the result is close to what you see on Twitter in realtime.
Search term
Search
Examples:
@nasa — tweets from NASA official account
#nasa — tweets by the hashtag #nasa
more patterns...
Include sensitive data (Pro users only)
Searches photos by a username, a hashtag or a location.
Search term
Search
Possible patterns are:
username — user's photos, e.g. nasa, bbc, nike
#hashtag — photos tagged with that hashtag, e.g. #nasa, #news, #sport
geo:number — photos geo-location, e.g. geo:213385402 (London), geo:31499759 (Rome), geo:212988663 (New York).
Note: take the geo-number from the URL on the Instagram search page.
QueryFeed
https://queryfeed.net/
FeedWind
https://feed.mikle.com/ja/features/
2019年1月16日水曜日
[データ]音声データをブログに貼る
[データ]音声データをブログに貼る
Google Driveでデータ共有
Googleの無料で使えるクラウドストレージ「Google Drive」を使えばバッチリ。
こちらは無料登録でも15GB。かなり余裕がありますね。
自分のドライブにアクセスしたら、データはデスクトップからドラッグ&ドロップでアップロード可能。すごい便利。
メニュー表示で「共有可能なリンクを取得」をクリック。
これでこのデータはリンクの共有ができます。
この時点でURLもクリップボードにコピーされているので、あとはペーストするのみ。
<audio src="https://drive.google.com/◯◯◯.mp3" controls></audio>
↓
こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
後半デジャブっぽい。
その他のストレージサービスでもいけるっぽい
試してないけどAmazon Driveとかみたいな他のクラウドストレージサービスでもいけるっぽいので、どれかしら登録してる人はまずはお試しあれ。
SAKMAG
https://www.sakumamatata.com/2016/11/iphonemp3.html
┌─ブログ
│
│
│
├One Drive
├Google Drive
├Box
├Amazon Cloud
├Dropbox
└.....
gfgfgd pc
■HTMLソース内に再生プレーヤーを入れたい場合
デスクトップなどに、MP3ファイル準備します。
↓
FTPソフトなどでホームページがいるサーバーに入ります。
↓
MP3ファイルを載せたいページと同じファイル階層へ行って、MP3ファイルをドラッグして置きます。
↓
MP3ファイルを載せたいhtmlページをダウンロードして、バックアップ保存(超大事)
↓
同じhtmlの分身コピーを作って、本番用を作ります。
↓
そしたら載せたい箇所に下記コードを入れます!
<audio src="Mp3のファイル名.mp3" controls="controls"></audio>
↓
音声を再生するには、audioタグをサポートしたブラウザが必要です。
↓
これで1回、htmlファイルをご自身のPCで使っているブラウザにドラッグしてみてください
正しければ主要ブラウザでは再生プレーヤーが表示されます。
Web Unitwoi
https://web.unitwoi.com/2016/07/04/audio_how_to_publish/
■Google(Gmail)アカウントさえあれば出来る編
天下のGmailがあれば大体の事は出来てしまいます。
Googleさまさまですね。
ログインしてGoogleドライブに入りましょう
↓
左側の「新規」ボタンをクリックして「ファイルのアップロード」をクリック
↓
自分のPCのフォルダを選ぶ画面になりますので、音声mp3データを選んで「開く」ボタン
↓
アップロードが始まります。容量が重いと時間がかかります。
↓
アップロード出来たらボタンが出来てると思います。これを右クリック
↓
「共有可能なリンクを取得」を押す
↓
このURLをコピーして、載せたい部分に張ります
↓
これで、このURLを知ってる方のみ、フォルダだけを開けて、音声が聞ける、という。
この音声の公開を終了したい場合はGoogleドライブでこのファイルを右クリック「共有」を選んで・・・
「オフ」を選べば、閲覧権限が非公開になります。
Web Unitwoi
https://web.unitwoi.com/2016/07/04/audio_how_to_publish/
アップロードする場所について
自分のホームページやサイト用にサーバーをレンタルしてる人は、もちろんそこを使えばOK。
でも、ブログサービスのみ
(はてなブログとかlivedoorブログ、FC2ブログ、bloggerなど)
を使ってる人でデータをアップロードできるようなサーバーを持ってない人ちょっと困っちゃいますよね。
でも大丈夫です、いろいろ方法あります。
▼Dropboxでデータ共有
業界シェアNo.1っぽいクラウドストレージ「Dropbox」。
これを使えばアップロードできちゃいます。
無料登録でも2GBの容量をもらえるので、MP3保管するくらいならぜんぜん余裕。
有料プラン使ってる人なら1TBとか使えちゃうので、Soundcloudよりも大量にアップロード可能です。笑
Dropbox内には「Public」というフォルダがもともとあるので、そこに対象のファイルをアップロード。
ドラッグ&ドロップでOK。とっても簡単です。
ちなみに僕はデータを整理するために「Public」フォルダ内に「audio」ってフォルダを作ってそこにアップしてます。
「Public」フォルダ直ブッコミでもOKだし、僕みたいに別のフォルダを作ってその中に入れても平気です。
アップロードが完了したら、ファイルを選択すると「公開リンクをコピー」という項目が表示されるのでクリック。
こんな感じでリンクをコピーしたら、あとはペーストするだけ。
こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
▼Google Driveでデータ共有
Googleの無料で使えるクラウドストレージ「Google Drive」を使えばバッチリ。
こちらは無料登録でも15GB。かなり余裕がありますね。
自分のドライブにアクセスしたら、データはデスクトップからドラッグ&ドロップでアップロード可能。すごい便利。
メニュー表示で「共有可能なリンクを取得」をクリック。
これでこのデータはリンクの共有ができます。
この時点でURLもクリップボードにコピーされているので、あとはペーストするのみ。
こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
後半デジャブっぽい。
その他のストレージサービスでもいけるっぽい
試してないけどAmazon Driveとかみたいな他のクラウドストレージサービスでもいけるっぽいので、どれかしら登録してる人はまずはお試しあれ。
SAKMAG
https://www.sakumamatata.com/2016/11/iphonemp3.html
ブログ記事中に音声や音楽ファイルプレイヤーを埋め込む方法
ロボ (id:hyper-robo) 270日前
どうも、バウリンガルです
今回はブログ上でmp3ファイルを再生する方法
僕は主にGoogle翻訳音声を再生して遊んでます
mp3なのでGoogle翻訳だけじゃなく普通に音楽などを再生させることも出来ますが、権利とかね、色々あるから。ね
正直どこに需要があるのかわかりません
だが少なくとも僕にはあった!
ネタ記事にしか使ってないけど、なんか面白くない
こんなもん面白いと思ってるのは地球で自分だけという可能性も多少、いや微細に孕んでおりますが、解説していきます
スマホからも同じように出来ると思いますがPC向け解説になっています。ごめんね
Google翻訳音声をダウンロードする
まずは再生するための音声ファイルを作りましょ
Google翻訳のページから直接音声ファイルはダウンロード出来ないと思います。多分
ってことでこのサイト
Sound of Text
こちらをお借りしていきましょね
使い方はくっそ簡単でして、登録も何も不要です
Textのボックスに喋らせたい言葉を入力なりコピペして
下のVoiceで言語を選びSubmitで出力するだけです
日本語で喋らせたければTextに日本語を、VoiceでJapaneseを選択して
Submitを押すと下に生成されます
Soundsからテスト試聴とダウンロードが可能になります
ファイルの拡張子はmp3ですね
注意点として、音声はグーグル翻訳のものなのですが上記のサイトで翻訳自体は出来ません
『テキストボックスに日本語を書いて英語で出力』しようとしても出ません
なので面倒ですが、日本語を英語に翻訳してダウンロードしたい場合はまず本家グーグル翻訳で
日本語→英語に変換 、英文をコピー、こちらのサイトにペーストの手順となります
世の中褒めロボ
https://hyper-robo.hatenablog.com/entry/onsei
[test:success]
外部サイトリンクを貼る,mp3ファイル,
<audio src="http://www.jazz-on-line.com/a/mp3a/PARP3089.mp3" controls="controls"></audio>
..
ggfdg pc
[test:failed]
YouTubeリンクを貼る
<audio src="https://youtu.be/iMiNHCMFj1M" controls="controls"></audio>
..
ggfdg pc
[test:failed]
外部サイトリンクを貼る,midiファイル,
<audio src="http://www.trachtman.org/MIDI/Joplin/BreezeFromAlabama2.mid" controls="controls"></audio>
..
ggfdg pc
[test:failed]
外部サイトリンクを貼る,midiファイル,
<audio src="http://www.trachtman.org/MIDI/Joplin/felicity.mid" controls="controls"></audio>
..
ggfdg pc
Welcome
This section of my site contains MIDI files, which I have sequenced, of ragtime
piano pieces by :
Scott Joplin, James Scott, Joseph Lamb, Jelly-Roll Morton, Eubie Blake, and others.
Your computer can sound like a REAL PIANO when you play these MIDI files!
click here for my Steinway Grand Piano soundfonts and samples
Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/BreezeFromAlabama2.mid
Scott Joplin (1868 - 1917)
Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/felicity.mid
http://www.trachtman.org/MIDI/Joplin/kismet.mid
http://www.trachtman.org/MIDI/Joplin/EasyWinners.mid
Scott Joplin (1868 - 1917)
Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/felicity.mid
http://www.trachtman.org/MIDI/Joplin/kismet.mid
http://www.trachtman.org/MIDI/Joplin/EasyWinners.mid
Old Time Radio : Free Audio : Download & Streaming : Internet Archive
Old Time Radio
http://archive.org/details/oldtimeradio
Google Driveでデータ共有
Googleの無料で使えるクラウドストレージ「Google Drive」を使えばバッチリ。
こちらは無料登録でも15GB。かなり余裕がありますね。
自分のドライブにアクセスしたら、データはデスクトップからドラッグ&ドロップでアップロード可能。すごい便利。
メニュー表示で「共有可能なリンクを取得」をクリック。
これでこのデータはリンクの共有ができます。
この時点でURLもクリップボードにコピーされているので、あとはペーストするのみ。
<audio src="https://drive.google.com/◯◯◯.mp3" controls></audio>
↓
こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
後半デジャブっぽい。
その他のストレージサービスでもいけるっぽい
試してないけどAmazon Driveとかみたいな他のクラウドストレージサービスでもいけるっぽいので、どれかしら登録してる人はまずはお試しあれ。
SAKMAG
https://www.sakumamatata.com/2016/11/iphonemp3.html
┌─ブログ
│
│
│
├One Drive
├Google Drive
├Box
├Amazon Cloud
├Dropbox
└.....
gfgfgd pc
■HTMLソース内に再生プレーヤーを入れたい場合
デスクトップなどに、MP3ファイル準備します。
↓
FTPソフトなどでホームページがいるサーバーに入ります。
↓
MP3ファイルを載せたいページと同じファイル階層へ行って、MP3ファイルをドラッグして置きます。
↓
MP3ファイルを載せたいhtmlページをダウンロードして、バックアップ保存(超大事)
↓
同じhtmlの分身コピーを作って、本番用を作ります。
↓
そしたら載せたい箇所に下記コードを入れます!
<audio src="Mp3のファイル名.mp3" controls="controls"></audio>
↓
音声を再生するには、audioタグをサポートしたブラウザが必要です。
↓
これで1回、htmlファイルをご自身のPCで使っているブラウザにドラッグしてみてください
正しければ主要ブラウザでは再生プレーヤーが表示されます。
Web Unitwoi
https://web.unitwoi.com/2016/07/04/audio_how_to_publish/
■Google(Gmail)アカウントさえあれば出来る編
天下のGmailがあれば大体の事は出来てしまいます。
Googleさまさまですね。
ログインしてGoogleドライブに入りましょう
↓
左側の「新規」ボタンをクリックして「ファイルのアップロード」をクリック
↓
自分のPCのフォルダを選ぶ画面になりますので、音声mp3データを選んで「開く」ボタン
↓
アップロードが始まります。容量が重いと時間がかかります。
↓
アップロード出来たらボタンが出来てると思います。これを右クリック
↓
「共有可能なリンクを取得」を押す
↓
このURLをコピーして、載せたい部分に張ります
↓
これで、このURLを知ってる方のみ、フォルダだけを開けて、音声が聞ける、という。
この音声の公開を終了したい場合はGoogleドライブでこのファイルを右クリック「共有」を選んで・・・
「オフ」を選べば、閲覧権限が非公開になります。
Web Unitwoi
https://web.unitwoi.com/2016/07/04/audio_how_to_publish/
アップロードする場所について
自分のホームページやサイト用にサーバーをレンタルしてる人は、もちろんそこを使えばOK。
でも、ブログサービスのみ
(はてなブログとかlivedoorブログ、FC2ブログ、bloggerなど)
を使ってる人でデータをアップロードできるようなサーバーを持ってない人ちょっと困っちゃいますよね。
でも大丈夫です、いろいろ方法あります。
▼Dropboxでデータ共有
業界シェアNo.1っぽいクラウドストレージ「Dropbox」。
これを使えばアップロードできちゃいます。
無料登録でも2GBの容量をもらえるので、MP3保管するくらいならぜんぜん余裕。
有料プラン使ってる人なら1TBとか使えちゃうので、Soundcloudよりも大量にアップロード可能です。笑
Dropbox内には「Public」というフォルダがもともとあるので、そこに対象のファイルをアップロード。
ドラッグ&ドロップでOK。とっても簡単です。
ちなみに僕はデータを整理するために「Public」フォルダ内に「audio」ってフォルダを作ってそこにアップしてます。
「Public」フォルダ直ブッコミでもOKだし、僕みたいに別のフォルダを作ってその中に入れても平気です。
アップロードが完了したら、ファイルを選択すると「公開リンクをコピー」という項目が表示されるのでクリック。
こんな感じでリンクをコピーしたら、あとはペーストするだけ。
こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
▼Google Driveでデータ共有
Googleの無料で使えるクラウドストレージ「Google Drive」を使えばバッチリ。
こちらは無料登録でも15GB。かなり余裕がありますね。
自分のドライブにアクセスしたら、データはデスクトップからドラッグ&ドロップでアップロード可能。すごい便利。
メニュー表示で「共有可能なリンクを取得」をクリック。
これでこのデータはリンクの共有ができます。
この時点でURLもクリップボードにコピーされているので、あとはペーストするのみ。
こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
後半デジャブっぽい。
その他のストレージサービスでもいけるっぽい
試してないけどAmazon Driveとかみたいな他のクラウドストレージサービスでもいけるっぽいので、どれかしら登録してる人はまずはお試しあれ。
SAKMAG
https://www.sakumamatata.com/2016/11/iphonemp3.html
ブログ記事中に音声や音楽ファイルプレイヤーを埋め込む方法
ロボ (id:hyper-robo) 270日前
どうも、バウリンガルです
今回はブログ上でmp3ファイルを再生する方法
僕は主にGoogle翻訳音声を再生して遊んでます
mp3なのでGoogle翻訳だけじゃなく普通に音楽などを再生させることも出来ますが、権利とかね、色々あるから。ね
正直どこに需要があるのかわかりません
だが少なくとも僕にはあった!
ネタ記事にしか使ってないけど、なんか面白くない
こんなもん面白いと思ってるのは地球で自分だけという可能性も多少、いや微細に孕んでおりますが、解説していきます
スマホからも同じように出来ると思いますがPC向け解説になっています。ごめんね
Google翻訳音声をダウンロードする
まずは再生するための音声ファイルを作りましょ
Google翻訳のページから直接音声ファイルはダウンロード出来ないと思います。多分
ってことでこのサイト
Sound of Text
こちらをお借りしていきましょね
使い方はくっそ簡単でして、登録も何も不要です
Textのボックスに喋らせたい言葉を入力なりコピペして
下のVoiceで言語を選びSubmitで出力するだけです
日本語で喋らせたければTextに日本語を、VoiceでJapaneseを選択して
Submitを押すと下に生成されます
Soundsからテスト試聴とダウンロードが可能になります
ファイルの拡張子はmp3ですね
注意点として、音声はグーグル翻訳のものなのですが上記のサイトで翻訳自体は出来ません
『テキストボックスに日本語を書いて英語で出力』しようとしても出ません
なので面倒ですが、日本語を英語に翻訳してダウンロードしたい場合はまず本家グーグル翻訳で
日本語→英語に変換 、英文をコピー、こちらのサイトにペーストの手順となります
世の中褒めロボ
https://hyper-robo.hatenablog.com/entry/onsei
[test:success]
外部サイトリンクを貼る,mp3ファイル,
<audio src="http://www.jazz-on-line.com/a/mp3a/PARP3089.mp3" controls="controls"></audio>
..
ggfdg pc
[test:failed]
YouTubeリンクを貼る
<audio src="https://youtu.be/iMiNHCMFj1M" controls="controls"></audio>
..
ggfdg pc
[test:failed]
外部サイトリンクを貼る,midiファイル,
<audio src="http://www.trachtman.org/MIDI/Joplin/BreezeFromAlabama2.mid" controls="controls"></audio>
..
ggfdg pc
[test:failed]
外部サイトリンクを貼る,midiファイル,
<audio src="http://www.trachtman.org/MIDI/Joplin/felicity.mid" controls="controls"></audio>
..
ggfdg pc
Welcome
This section of my site contains MIDI files, which I have sequenced, of ragtime
piano pieces by :
Scott Joplin, James Scott, Joseph Lamb, Jelly-Roll Morton, Eubie Blake, and others.
Your computer can sound like a REAL PIANO when you play these MIDI files!
click here for my Steinway Grand Piano soundfonts and samples
Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/BreezeFromAlabama2.mid
Scott Joplin (1868 - 1917)
Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/felicity.mid
http://www.trachtman.org/MIDI/Joplin/kismet.mid
http://www.trachtman.org/MIDI/Joplin/EasyWinners.mid
Scott Joplin (1868 - 1917)
Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/felicity.mid
http://www.trachtman.org/MIDI/Joplin/kismet.mid
http://www.trachtman.org/MIDI/Joplin/EasyWinners.mid
Old Time Radio : Free Audio : Download & Streaming : Internet Archive
Old Time Radio
http://archive.org/details/oldtimeradio
2019年1月14日月曜日
[code][php] phpでつくるRSSリーダ
[rssreader445.php]
<?php
// タイムゾーンを日本に設定
date_default_timezone_set('Asia/Tokyo');
// 取得したいRSSのURLを設定
$url = "https://news.yahoo.co.jp/pickup/rss.xml";
// MAXの表示件数を設定
$max = 5;
// simplexml_load_file()でRSSをパースしてオブジェクトを取得、オブジェクトが空でなければブロック内を処理
if( $rss = simplexml_load_file( $url ) ){
$cnt = 0;
$output = '';
/*
* $item->title:タイトル
* $item->link:リンク
* strtotime( $item->pubDate ):更新日時のUNIX TIMESTAMP
* $item->description:詳細
*/
// item毎に処理
foreach( $rss->channel->item as $item ){
// MAXの表示件数を超えたら終了
if( $cnt >= $max ) break;
// 日付の表記の設定
$date = date( 'Y年m月d', strtotime( $item->pubDate ) );
// 出力する文字列を用意
$output .= '' . $date . " " . $item->title . '
';
$cnt++;
}
// 文字列を出力
echo $output;
}
?>
<?php
// タイムゾーンを日本に設定
date_default_timezone_set('Asia/Tokyo');
// 取得したいRSSのURLを設定
$url = "https://news.yahoo.co.jp/pickup/rss.xml";
// MAXの表示件数を設定
$max = 5;
// simplexml_load_file()でRSSをパースしてオブジェクトを取得、オブジェクトが空でなければブロック内を処理
if( $rss = simplexml_load_file( $url ) ){
$cnt = 0;
$output = '';
/*
* $item->title:タイトル
* $item->link:リンク
* strtotime( $item->pubDate ):更新日時のUNIX TIMESTAMP
* $item->description:詳細
*/
// item毎に処理
foreach( $rss->channel->item as $item ){
// MAXの表示件数を超えたら終了
if( $cnt >= $max ) break;
// 日付の表記の設定
$date = date( 'Y年m月d', strtotime( $item->pubDate ) );
// 出力する文字列を用意
$output .= '' . $date . " " . $item->title . '
';
$cnt++;
}
// 文字列を出力
echo $output;
}
?>
Smart
https://rfs.jp/sb/javascript/03js/get-rss.html
2018年12月10日月曜日
[RSS] Amazonランキング 非公式RSSフィード
[RSS] Amazonランキング 非公式RSSフィード
使い方
Amazonの公式RSSが廃止されたらしく配信終了していたので、 誰でも簡単にAmazonベストセラー売れ筋ランキングのRSSを取得できるサービスを作りました。
難しいAPIなどの知識は不要。
アソシエイトIDにも対応しているので、アフィリエイト用にも使えます。
取得したいAmazonの売れ筋ランキングページのURLをフォームにコピペして、フィード生成ボタンを押してください。
注意
RSSへのアクセスは1時間に1回程度でお願いします
Amazonランキング 非公式RSSフィード
https://am-tb.tk/amaranrss/
使い方
Amazonの公式RSSが廃止されたらしく配信終了していたので、 誰でも簡単にAmazonベストセラー売れ筋ランキングのRSSを取得できるサービスを作りました。
難しいAPIなどの知識は不要。
アソシエイトIDにも対応しているので、アフィリエイト用にも使えます。
取得したいAmazonの売れ筋ランキングページのURLをフォームにコピペして、フィード生成ボタンを押してください。
注意
RSSへのアクセスは1時間に1回程度でお願いします
Amazonランキング 非公式RSSフィード
https://am-tb.tk/amaranrss/
2017年10月5日木曜日
jQuery UI
jQuery UI – All Versions
jQuery UI - Git Builds
UNSTABLE, NOT FOR PRODUCTION
jQuery UI git build - uncompressed, theme
jQuery UI 1.12
jQuery UI 1.12.1 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.12.0 - uncompressed, minified, theme
jQuery UI 1.12.0-rc.2 - uncompressed, minified, theme
jQuery UI 1.12.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.12.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.11
jQuery UI 1.11.4 - uncompressed, minified
Themes
black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.11.3 - uncompressed, minified, theme
jQuery UI 1.11.2 - uncompressed, minified, theme
jQuery UI 1.11.1 - uncompressed, minified, theme
jQuery UI 1.11.0 - uncompressed, minified, theme
jQuery UI 1.11.0-beta.2 - uncompressed, minified, theme
jQuery UI 1.11.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.10
jQuery UI 1.10.4 - uncompressed, minified
Themes
black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.10.3 - uncompressed, minified, theme
jQuery UI 1.10.2 - uncompressed, minified, theme
jQuery UI 1.10.1 - uncompressed, minified, theme
jQuery UI 1.10.0 - uncompressed, minified, theme
jQuery UI 1.10.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.10.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.9
jQuery UI 1.9.2 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.9.1 - uncompressed, minified, theme
jQuery UI 1.9.0 - uncompressed, minified, theme
jQuery UI 1.9.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.9.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.8
jQuery UI 1.8.24 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.8.23 - uncompressed, minified, theme
jQuery UI 1.8.22 - uncompressed, minified, theme
jQuery UI 1.8.21 - uncompressed, minified, theme
jQuery UI 1.8.20 - uncompressed, minified, theme
jQuery UI 1.8.19 - uncompressed, minified, theme
jQuery UI 1.8.18 - uncompressed, minified, theme
jQuery UI 1.8.17 - uncompressed, minified, theme
jQuery UI 1.8.16 - uncompressed, minified, theme
jQuery UI 1.8.15 - uncompressed, minified, theme
jQuery UI 1.8.14 - uncompressed, minified, theme
jQuery UI 1.8.13 - uncompressed, minified, theme
jQuery UI 1.8.12 - uncompressed, minified, theme
jQuery UI 1.8.11 - uncompressed, minified, theme
jQuery UI 1.8.10 - uncompressed, minified, theme
jQuery UI 1.8.9 - uncompressed, minified, theme
jQuery UI 1.8.8 - uncompressed, minified, theme
jQuery UI 1.8.7 - uncompressed, minified, theme
jQuery UI 1.8.6 - uncompressed, minified, theme
jQuery UI 1.8.5 - uncompressed, minified, theme
jQuery UI 1.8.4 - uncompressed, minified, theme
jQuery UI 1.8.3 - uncompressed, minified, theme
jQuery UI 1.8.2 - uncompressed, minified, theme
jQuery UI 1.8.1 - uncompressed, minified, theme
jQuery UI 1.8.0 - uncompressed, minified, theme
jQuery UI 1.7
jQuery UI 1.7.3 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.7.2 - uncompressed, minified, theme
jQuery UI 1.7.1 - uncompressed, minified, theme
jQuery UI 1.7.0 - uncompressed, minified, theme
jQuery UI
http://code.jquery.com/ui/
連載:jQuery Mobile入門
第1回 jQuery Mobileページの基本構造を理解しよう
山田 祥寛
2012/01/20
去る2011年はスマートフォンの年であった。
猫も杓子(しゃくし)も……といっては失礼かもしれないが、
多くの人がスマートフォンに興味を持ち、@ITをはじめ、IT関連のサイトでも連日のように、スマートフォンの記事があふれかえった。
恐らくこの流れが2012年も続くことはほぼ間違いなく、
伴い、スマートフォンに対応したWebアプリケーション開発のニーズもますます増えてくるはずだ。
もっとも、開発者にとって対応するデバイスが増えることは、アプリケーションの可能性が広がるという意味で刺激的なことであると同時に、
デバイスに適したデザインやデバイスごとの検証を強いられるという意味で苦役でもある。
デスクトップの世界でも似たような問題はあったが、スマートフォン(モバイル)の形態はより多彩であり、
主なデバイスに対象を絞ったとしても、全てに対応するコードを一から準備するのは、あまり現実的でない。
そこで登場するのが、スマートフォン対応のフレームワーク/ライブラリだ。
よく聞かれるものには、以下のようなものが存在する。
ライブラリ名 概要
Sencha Touch ExtJSをベースとしたJavaScriptフレームワーク。JavaScript中心の記述が特長
jqTouch スマートフォン開発に対応したjQueryプラグイン
iUi iPhoneに特化したUI開発ライブラリ
qooxdoo クロスプラットフォーム対応のJavaScript開発フレームワーク
スマートフォン対応のJavaScriptフレームワーク/ライブラリ
これらのフレームワーク/ライブラリを利用することで、デバイスの違いを(全くでないにせよ)あまり開発者に意識させることなく、
標準的な枠組みでスマートフォン対応のアプリケーションを開発できるようになる。
スマートフォン対応のフレームワークは歴史も浅く、まだまだデファクト・スタンダードといえるものはないものの、
現時点で最有力候補の一角と目されるのが、本連載のテーマでもある「jQuery Mobile」だ。
■jQuery Mobileとは?
jQueryそのものについては本稿の読者諸氏であれば、すでに既にご存じであろう――JavaScriptライブラリのデファクト・スタンダードだ。
「Write Less, Do More(よりシンプルなコードで、より多くの処理を)」をモットーに、シンプルな構文でありながら機能性も高いことから、近年急速にユーザー数を増やしている。何千、何万にも及ぶプラグインによって、自分に必要な機能を自在に拡張できるのも、人気を後押ししている一因だろう。また、ここ数年では、ASP.NET(Visual Studio)やRuby on RailsでもjQueryを標準ライブラリとして採用したことで、サーバサイド・フレームワークとの親和性も高まり、採用のけん引力ともなっている(jQueryについて詳しくは、拙著「ASP.NETプログラマーのためのjQuery入門」も参照いただきたい)。
もっとも、jQuery Mobileは、そのjQueryのモバイル版かというと、ちょっと違う。
jQuery Mobileの用途は、主に「デバイスに依らず、スマートフォン的なUIを作成する」ことに置かれており、
目的からすると、むしろjQuery UIのモバイル版といえるだろう。
jQuery UIが専らデスクトップのWebアプリケーション向けのUIを提供するのに対して、jQuery Mobileはスマートフォン・アプリケーションを対象にUI部品を提供しているわけだ。
jQuery Mobileを利用することで、あらかじめ決められたマークアップに従うだけで、モバイル・デバイスに適したページを開発できる(基本的なページであれば、JavaScriptのコードすら必要ない!)。
jQuery Mobileは、昨年11月にようやく1.0リリースに到達したばかりであるが、現時点で以下のようなデバイスに対応している。
一部のデバイス/機能については、対応に制約もあるようであるが、それでも現実的な用途には、ほぼ問題ないだろう。
•Apple iOS
•Android
•Windows Phone/Windows Mobile
•Kindle 3 and Fire
•Blackberry
•Palm WebOS
•Nokia Symbian
•Opera Mobile/Desktop
•Chrome(デスクトップ)
•Firefox(デスクトップ)
•Internet Explorer(デスクトップ)
また、jQueryをベースとしているので当然であるが、jQueryとの親和性にも優れており、独自の機能を実装するにも、jQueryの知識をそのまま活用できる。
本連載では、そのようなjQuery Mobileについて、一から解説していくものである。
まず初回の本稿では、jQuery Mobileの導入から基本的なページの開発までを紹介する。
@IT
http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_01/jqmobile_01_01.html
2017年8月6日日曜日
Google DocsでRSSを取得
2008-04-11
Google DocsでRSSを取得してみる
google
前回に引き続きRSSを取得してみます。
が、今回はGoogle DocsのSpreadsheetに追加されたimportFeed関数を使ってみます。
最近Google Docsの更新がすごい。
Microsoft Officeにかなり近づいてきてる。
Google Docsにて新規にSpreadsheetを作成
適当なセルにimportFeed関数を入力
最近追加されたみたいだけど、自動入力補完機能がついていて、
途中まで入力するだけで候補が出てきて楽になってます。
RSSが表示された
非常に簡単にRSSを取得できた。
Google Docsはドキュメントを作るだけでなく、おもしろいWebアプリとかもいろいろ作れそうな感じ。
さらなる進化に期待。
を作るだけでなく、おもしろいWebアプリとかもいろいろ作れそうな感じ。
さらなる進化に期待。
cutmail's blog
http://cutmail.hatenablog.com/entry/20080411/1207937127
importFeed関数の使いかた
フィードの情報をすべて表示
=importFeed("url")
フィードのタイトル、説明、URLを表示
=importFeed("url", "feed")
フィードのタイトルを表示
=importFeed("url", "feed title")
フィードの著者を表示
=importFeed("url", "feed author")
フィードの説明(description)を表示
=importFeed("url", "feed description")
フィードのURLを表示
=importFeed("url", "feed url")
すべてのアイテムの情報を表示
=importFeed("url", "items")
すべてのアイテムのタイトルを表示
=importFeed("url", "items title")
すべてのアイテムの著者を表示
=importFeed("url", "items author")
すべてのアイテムの本文を表示
=importFeed("url", "items summary")
すべてのアイテムのURLを表示
=importFeed("url", "items url")
すべてのアイテムの投稿日を表示
=importFeed("url", "items created")
先頭から5番目までのアイテムのタイトルを表示する
=importFeed("url", "items title", "", 5)
URLや発行日についても同様に指定できるらしいです。
ヘッダ付きで情報を出力する
=importFeed("url", "items", true)
終わり
cutmail's blog
http://cutmail.hatenablog.com/entry/20080411/1207937127
Google DocsでRSSを取得してみる
前回に引き続きRSSを取得してみます。
が、今回はGoogle DocsのSpreadsheetに追加されたimportFeed関数を使ってみます。
最近Google Docsの更新がすごい。
Microsoft Officeにかなり近づいてきてる。
Google Docsにて新規にSpreadsheetを作成
適当なセルにimportFeed関数を入力
最近追加されたみたいだけど、自動入力補完機能がついていて、
途中まで入力するだけで候補が出てきて楽になってます。
=ImportFeed("http://gigazine.net/index.php?/news/rss_2.0/","items title")
RSSが表示された
非常に簡単にRSSを取得できた。
Google Docsはドキュメントを作るだけでなく、おもしろいWebアプリとかもいろいろ作れそうな感じ。
さらなる進化に期待。
を作るだけでなく、おもしろいWebアプリとかもいろいろ作れそうな感じ。
さらなる進化に期待。
cutmail's blog
http://cutmail.hatenablog.com/entry/20080411/1207937127
importFeed関数の使いかた
フィードの情報をすべて表示
=importFeed("url")
フィードのタイトル、説明、URLを表示
=importFeed("url", "feed")
フィードのタイトルを表示
=importFeed("url", "feed title")
フィードの著者を表示
=importFeed("url", "feed author")
フィードの説明(description)を表示
=importFeed("url", "feed description")
フィードのURLを表示
=importFeed("url", "feed url")
すべてのアイテムの情報を表示
=importFeed("url", "items")
すべてのアイテムのタイトルを表示
=importFeed("url", "items title")
すべてのアイテムの著者を表示
=importFeed("url", "items author")
すべてのアイテムの本文を表示
=importFeed("url", "items summary")
すべてのアイテムのURLを表示
=importFeed("url", "items url")
すべてのアイテムの投稿日を表示
=importFeed("url", "items created")
先頭から5番目までのアイテムのタイトルを表示する
=importFeed("url", "items title", "", 5)
URLや発行日についても同様に指定できるらしいです。
ヘッダ付きで情報を出力する
=importFeed("url", "items", true)
終わり
cutmail's blog
http://cutmail.hatenablog.com/entry/20080411/1207937127
2017年8月2日水曜日
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 += ' ';
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
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 += ' ';
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
ラベル:
?jQuery,
?WebAPI RSS,
&広告メディア,
#doc css,
#doc javascript,
#doc php,
%Blog
2017年1月21日土曜日
Google Maps JavaScript API
Google Maps JavaScript API
独自のコンテンツや画像を使ってマップをカスタマイズします。
developers.google.com
https://developers.google.com/maps/documentation/javascript/
独自のコンテンツや画像を使ってマップをカスタマイズします。
developers.google.com
https://developers.google.com/maps/documentation/javascript/
2016年9月22日木曜日
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
登録:
投稿 (Atom)