goo blog　サービス終了のお知らせ　

白牙隊A2屯所

びゃくがたいあにぃとんしょ

オブジェクトの入った配列を値で並び替え、に挑戦

2014-08-28 | iPhone5
全文配信ではないRSSから本文をスプレッドシートに書き出そうと試みています。その前段階としてRSSから取得した内容を時系列にしてスプレッドシートに追記できないか試しております。
文字列として取得になる更新日はDateオブジェクトが、配列の並び替えはArray.sortメソッドが便利でした。

Image

目標としてはJ'sGoalのRSSからコンサドーレ札幌の試合レポだけを抽出してスプレッドシートに本文をデータベース化したい、という感じ。

RSSの抽出→Yahoo Pipes
本文の取得→Google Apps ScriptのURLFetch
スプレッドシート化→Google Apps Scriptで自動化
iPhoneで利用→MyScriptsとGoogle Visualization API

で行けないかなぁ、と。

文字列を時間にしてくれるDateオブジェクト



RSSごとに時刻の表記が違うのもありますが、Googleドライブでやろうとすると1番の問題は文字列として出てくる点。
正規表現でチマチマやろうかなぁと思っていたところ、なんと！Dateオブジェクトは文字列をかなり柔軟に時刻にしてくれるとか！
日付と時刻の計算 (JavaScript)
コンストラクターに日付文字列を渡すことによって、特定の日付を設定できます。
JavaScript は、パラメーターとして使用する文字列の書式について柔軟性があります。 たとえば、「8-24-2009」、「August 24, 2009」、「24 Aug 2009」を入力で...

すげぇ、JavaScript・・・ヽ( ´ー`)ノ

sortメソッドで時系列にする



大抵のRSSはいくつかの記事がのってきます。
既読の記事かどうかを判定して、スプレッドシートの末尾に追記、的なのを考えています。
また、大抵のRSSは最新記事が最初にあったりするので、順番に配列に入れると新しいものが最初になるので、それを逆にできないかなぁと思いましたところsortメソッドというのがあるんですね！便利すぎる・・・。

条件を関数(？)で記述して戻り値がマイナスならば添え字を小さくし直してくれる・・・という事かな？
Array.sort - JavaScript | MDN
compareFunction が与えられた場合、配列の要素は比較関数の返り値に基づきソートされます。もし a と b が比較されようとしている要素の場合、compareFunction(a, b) が 0 未満の場合、a を b より小さい添字にソートし...


とりあえず、iPhoneのMyScriptsで実験してみました。

上手く行きそうです！

大谷さんのRSS情報が入ったオブジェクトの配列から更新日時をみて更新日時順番にするスクリプトです。
実験なので配列は直打ちですが。

#HTML

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>並び替えテスト</title>

</head>

<body>

<div id = 'text'>

<p>変更前</p>

</div>

<form name ='form1' >

<input type='button' id = 'do1' value ='並び替え'>

</form>

<script>

window.onload = function(){

    var btn = document.getElementById('do1');

btn.addEventListener('click', function(){doAction()} , false);

};

var aaa = [

  {title : '結婚式場に恵比寿のDuo DOMOを選んでよかったと思ったいくつかの理由をまとめてみる' , url : 'http://delaymania.com/201408/life/duo-domo/' , pubDate : '2014/08/24 14:00:48'},

  {title : '「Ptengine」のヒートマップならスマホサイトもPCサイトもどこが見られてるか一撃で分かる！' , url : 'http://delaymania.com/201408/webservice/ptengine/' , pubDate : '2014/08/27 7:00:53'},

  {title : 'ブロガーズフェスティバル2014に参加してMEGWINさんと一緒に動画撮らせてもらいました！ #ブロフェス2014' , url : 'http://delaymania.com/201408/event/blofes2014-report/' , pubDate : '2014/08/26 7:00:48'},

  {title : 'Ingressの地図を拡大縮小するにはGoogleマップ同様「ダブルタップ＋上下スライド」で！' , url : 'http://delaymania.com/201408/app/ingress-map-scaling/' , pubDate : '2014/08/25 7:00:12'}

  ];

var bHtml = "<div id='list'>";  

//  alert(JSON.stringify(aaa));

for ( i = 0 ; i<aaa.length ; i++){

    bHtml += '<p>日付 : ' + aaa[i]['pubDate'] +'</br>タイトル : ' +aaa[i]['title'] + '</br>URL : ' + aaa[i]['url']  +'</p>';

};

bHtml += '</div>';

document.getElementById('text').innerHTML=bHtml;

function doAction(){  

  //配列をソート

aaa.sort(

	function(a,b){

		var aDate = new Date(a["pubDate"]);

		var bDate = new Date(b["pubDate"]);

		/*

    	if( aDate > bDate ) return 1;

        if( aDate < bDate ) return -1;

        return 0;

        */

        return aDate - bDate;

    }

);

var aHtml = "<div id ='list2'><p><strong>変更しました</strong></p>";  

//  alert(JSON.stringify(aaa));

for ( i = 0 ; i<aaa.length ; i++){

    aHtml += '<p>日付 : ' + aaa[i]['pubDate'] +'</br>タイトル : ' +aaa[i]['title'] + '</br>URL : ' + aaa[i]['url']  +'</p>';

};

bHtml += '</div>';

document.getElementById('text').innerHTML=aHtml;

};

//alert(JSON.stringify(aaa));

</script>

</body>

</html>


MyScriptsで実験→http://tinyurl.com/lx9xl5z

MyScripts 2.5
分類: 仕事効率化,ユーティリティ
価格: ￥400 (Takeyoshi Nakayama)


こうしてiPhoneでちょこちょこスクリプト書けるこのMyScriptsはすごいアプリですね。
人生が楽しいです。









ホーム画面を晒すネク(2014年8月 iOS7)

2014-08-21 | iPhone5
オススメアプリをご案内する「ホーム画面晒し」
アフィリエイトが下火になってからはあまり出ませんが、新OSが出る前にやってみました。

概要
基本的なテーマとしては

  • バッチ表示が見たいよく使うアプリをホーム画面に

  • URLスキームがあるアプリはBlasterに登録

  • よく使うアプリはBlasterからジェスチャー起動

  • たまに使うアプリはBlasterの1画面目に表示

  • できれば横に同じ色系統を並べる


Image


まず言えるのはBlasterをフル活用、ということです。
Blaster
Blaster 4.6.4
分類: ユーティリティ,仕事効率化
価格: ￥200 (Nobuo Saito)

「アプリを呼び出すアプリ」の事をランチャー系アプリと呼びますが、Blasterもその様なアプリです。
Blasterはその中でもオールマイティとでも言いましょうか。
過去にアホみたいに記事を書いてきました。特徴としては

  • アプリのアイコンが登録できる

  • ジェスチャー(スワイプ)操作でアプリが呼び出せる

  • 内部ブラウザがある

  • 外部からJavaScriptが呼び出せる

  • タグ機能を応用した擬似フォルダ機能でアプリやサイトを仕分けできる

  • 通知センターからアプリが呼び出せる


などです。
基本的にはアプリはBlasterに登録して呼び出しています。よく使うものはジェスチャーを割り当ててありますので、
Blasterをタップ→スワイプ
という操作で呼び出せます。

スワイプ登録はこんな感じ
←↑ ・・・ 写真
←↓ ・・・ ホームへ戻る
↓← ・・・ ブラウザを閉じる
↓→ ・・・ mixi
→↑ ・・・ LINE
→↓ ・・・ Tumblr
↑← ・・・ Facebook
↑→ ・・・ Google+

SNS系が多いでしょうか。

Blasterの第一画面はこんな感じ。
2軍アプリ、という感じになっています。

Image_2


Libing
Libing for iPhone 5.3.0
分類: ユーティリティ,仕事効率化
価格: 無料 (Nobuo Saito)

ブラウザはLibingです。
こちらも同じくジェスチャー操作が楽しいアプリです。
フル画面表示や広告ブロック機能など多彩なブラウザ。
進む、戻る、などの操作の他にも色々カスタマイズしてジェスチャーから操作することができます。私は

  • タブ一覧(メニュー画面)を表示

  • ブックマークレットフォルダを開く

  • コンサドーレ関係のブックマーク一覧を開く

  • Google検索

  • Pocketに登録


などを登録しています。

また、文字選択やURL長押しからJavaScriptを起動したりしています。

Textwell
Textwell 1.2.4
分類: 仕事効率化,ユーティリティ
価格: ￥300 (Sociomedia)

すぐ書ける、自動保存が特徴のメモ帳アプリです。
ブログの更新はこのアプリから行っています。
JavaScriptで機能を追加してカスタマイズができますし、内蔵ブラウザもあります。
内蔵ブラウザを活用して

  • Twitterを検索してつぶやきを引用

  • アプリを検索して紹介リンクを作成

  • 自分のサイトを検索して過去記事を引用


といった機能を追加しています。
他のアプリへ文字を送る、というのが基本となります。中でも公式アプリとの連携が充実しています。カレンダーやリマインダーに登録したり、SNSへ投稿したり。
文字を書いて何かをする、という事の中核を担うアプリです。

動画ダウンロードPro
動画ダウンロード Pro 3.0
分類: 写真／ビデオ,ユーティリティ


残念ながら、App Storeから削除されてしまっているようです。
動画のバックグラウンド再生アプリの中でも、YouTubeに特化したタイプではなく、webブラウザタイプのものです。
URLスキームありでファイル名変更可能、と削除されるだけはある超強力アプリでした。

Queuing Cam
QueuingCam 1.4
分類: 写真／ビデオ,ライフスタイル
価格: ￥100 (Looped Picture Company)

旅行などイベントの撮影で好きなのがこのアプリ。
1秒、2秒、3秒と3種類の長さを選択してカットを撮影でき、トータルの撮影時間に制限がありません。
写真感覚で1秒の動画を繋げると中々オシャレな作品が簡単に作れるのがいいですね。
残念ながら時々落ちるのと音がズレるのがマイナスポイント。ただ、YotubeサイトやiMovieで音を編集するとその辺をカバー出来るのではないでしょうか。
短い動画であればInstagramでフィルターをかけたりLineでAndroid携帯へ送ったり工夫次第で楽しく使えるアプリです。
↓以前Instagramでフィルターかけたのがこちら

Instagramかの人の建つる街と塔を見たまへり。 by a2_a_02_syotaro

カメラ
カメラは特に変更なく、公式のアプリを使用しています。そんなに写真は撮るほうではないので、不便も感じず使用しています。

メモ
基本的には前述のTextwellというアプリで事足りてしまうのですが、ちょっとした事で後日参照することが確定している際に使うことがあります。
メモアプリのメインの使い方はURLスキームをパソコンから送る際に使用しています。
パソコンでURLスキームを調べた後、iCloudのメモアプリに記述するとすぐにiPhoneでも閲覧出来るのが便利です。
また、実はメモアプリも別のアプリを起動できます。(　・∀・)=3

Image_3


連絡先
連絡先も機種変更の際から使用しています。
特に不便もないのでそのままです。
私はWindows7版のiTunesを使用していますので、連絡先の情報(と@i.softbank.jpのメール)はOutlook2010にも入っています。
Outlook2010側でグループ分けをしてそれがiPhoneにも反映されている感じです。
・・・かなり昔にやったので記憶が曖昧ですが。

Image_4


メッセージ
ガラケー時代の@vodafoneアドレスをこちらで使用しています。昔登録したサービスのメールが来る感じ。
時々Googleの認識確認の番号が来ます。
うちの実家は父以外はiPhoneなのでiMessageでやり取りすることがあります。
あんまり普及しませんねぇ、iMessage・・・。

LINE
LINE 4.5.1
分類: ソーシャルネットワーキング
価格: 無料 (NAVER JAPAN)

もはやインフラであるLINEです。妻との連絡がほとんどです。
友人は多くはないのでそんなに活用できていませんが、Android携帯へmovファイルを送れるのが便利すぎます(　・∀・)=3

Yahoo!乗り換え案内
Yahoo!乗換案内　無料の時刻表、運行情報、乗り換え検索アプリ 3.5.2
分類: ナビゲーション,ライフスタイル
価格: 無料 (Yahoo Japan Corp.)

無料でいいのか？というぐらい便利です。
下に引っ張って再検索、到着お知らせアラームなどがオススメです。
私は「条件設定」で有料特急をOFFにしたぐらいで、そのまま使用しています。

スプレッドシート
Google スプレッドシート 1.0.1
分類: 仕事効率化,ビジネス
価格: 無料 (Google, Inc.)

アイコンが緑、という理由でここにあります。
Excelでいう、alt+enter改行ができないのがイマイチです。
Chromeと違って複数アカウントでの変更が簡単なのが良いですね。
Google Apps Scriptの編集がここからできれば神アプリなんですが・・・(T_T)

Staccal2
Staccal 2 - 12種類のカレンダーとリマインダー 1.0.8
分類: 仕事効率化,ライフスタイル
価格: ￥100 (gnddesign.com)

公式のカレンダーとリマインダーと同期できるカレンダーで、6種類の表示方法をカスタマイズして設定することができます。
なんと言ってもカスタマイズ用に12種類ものカレンダー表示が用意されているのが凄いです。
公式のカレンダーと同期というのをどう評価するかでしょうか？
私のオススメは予定のテンプレート機能。
よく使う予定は予めテンプレートを作成しておくことができます。
URLスキームはありますが予定登録が弱いのでテンプレート機能でなんとかする、という感じでしょうか。

Gmail
Gmail: Google のメール 3.14159
分類: 仕事効率化,ソーシャルネットワーキング
価格: 無料 (Google, Inc.)

職場のメールはGmailに紐付けしてあるのでこちらを使用しています。
プッシュ通知もあり、アカウントの切り替えも便利です。
もちろん返信やタグを付けたりアーカイブしたりと一通りの事ができます。
普通に便利ですよ。

PDF Expert 4.7.3.3
PDF Expert
分類: ビジネス,仕事効率化



こちらももう削除されてしまった様ですね。
これもアイコンが赤いという理由でここにあります。iPhoneはデフォルトではPDFが閲覧できなかったので無料セールの時に落としました。
・・・あんまり使ってません。すみません。
タップでのページ移動が出来るのですが入力がピーキー過ぎるのがイラっときます。Dropbox同期機能やメモ機能あたりがウリのアプリです。

Readability
Readability™ 2.0.1
分類: ニュース,仕事効率化
価格: 無料 (Readability, LLC)

これもアイコンが赤い(以下略)
俗に言う「後で読むサービス」というやつです。
Sylfeedという後述するRSSアプリから自動で送れるのがこれぐらいだったのでそのまま使用しています。
RSSアプリで読みたい、と操作するとこちらにも送られます。あまり活用できていません。すみません。

Twitter
Twitter 6.11
分類: ソーシャルネットワーキング,ユーティリティ
価格: 無料 (Twitter, Inc.)

おなじみのTwitterです。特に不便もなく使えています。
投稿用のURLスキームが解析されているのでブラウザとかからサイト名などをつぶやいて共有出来るのが好きです。
javascript:(function(){window.location='twitter://post?message='+encodeURIComponent(document.title)+' - '+encodeURIComponent(document.URL)})()
↑こんなの

SafariやLibingのブックマークに登録して使用しています。

Sylfeed
Sylfeed 3.2.9
分類: ニュース,ソーシャルネットワーキング
価格: ￥200 (GACHANET)

コアなファンの多いRSSリーダーアプリです。
大量のRSSを仕分けして後で読む、という様な使い方が便利です。
様々な後で読むサービスなどと連動させる事ができます。前述のReadabilityやPocketというサービスと連動させています。もちろんTwitterへ送って共有できます。その時の定型文を設定出来るのが便利です。
また、SendTo機能というJavaScriptを使ってカスタマイズする機能もあり、かなりマニアックな使い方ができます。私はLibingへ送ってじっくりみたり、HTMLソースを見るアプリへ送れる様にしています。

Safari
私はブログの画像アップロードに使っています。多くのアプリで「Safariで見る」的な機能がありますのでやはり便利というか使わざるを得ないというか。
設定アプリで指定できる「お気に入り」機能が便利です。こうしておくと新規タブ画面で参照するフォルダを指定できます。

Image_6

Googleドキュメント
Google ドキュメント 1.0.1
分類: 仕事効率化,ビジネス
価格: 無料 (Google, Inc.)

Googleドキュメントもそこまで使っているわけではありませんが、やはり青いのでここにあります。
スプレッドシートに比べると、TextwellからOpen in 機能でテキストファイルを送れるのが便利です。パソコンに長文を送りたい際などに使えます。
前述の通り、是非ともここからスクリプトエディタが起動できれば素晴らしいのですが・・・。

設定
そこまで使うわけではありませんが、やはりWi-Fi仕様時などはこちらで確認しています。
中々ホーム画面から外す勇気がないと言いましょうか・・・。

iWorkspace
iWorkspace 1.9
分類: ユーティリティ,仕事効率化
価格: ￥300 (Takeyoshi Nakayama)

電源Onしてまず起動するアプリです。
通知を使用したアプリの連続起動ができるアプリです。「アプリA起動後XX秒後にアプリBを起動、XX後にアプリC・・・」と連鎖的にアプリ起動を決め打ちすることができます。
私は
Libing起動(バックグラウンド監視On)→Sylfeed同期開始→Twitter
というグループを設定してあります。
また、クリップボードの値を自由に操作できますので、クリップボードを起点としたアプリ間の情報のやり取りをすることができます。
かなりマニアックなアプリと言えましょう。
私はそこまでコヒぺを多用するプレイングスタイル(？)ではないので、そこまで使いこなせてはしていません。
実はお気に入りは背景画像を設定出来る事だったりします。(ムフフ・・・)

MyScripts
MyScripts 2.5
分類: 仕事効率化,ユーティリティ
価格: ￥400 (Takeyoshi Nakayama)

お気に入りのJavaScript編集アプリ。
自己流ではありますがポチポチ、JavaScriptでスクリプトを作っては試しています。
単語の予測変換(？でいいのかな)があるのでスクリプトの記述がかなり便利です。
独自の仕組みが慣れるまで大変でしたが、ようやく掴めてきた、という感じです。
クリップボード監視によるコピー操作をトリガーとする仕組みはiPhone購入当初からの憧れでした。
実はjQuery Mobileが内蔵されていまして、カッコいいモバイル用表示が(技術があれば)作れます。
スクリプトはいいものです。
私は

  • J2の結果を公式サイトから取得

  • 本日の日付の六曜を取得

  • 同僚へ一斉メールをGmailで送る


あたりを作成しました。
今のマイブームはGoogleスプレッドシート内のデータベースの内容を取得して別のアプリで使えないかを試しています。

サイボウズLive
サイボウズLive for iPhone 3.0.1
分類: 仕事効率化,ビジネス
価格: 無料 (Cybozu, Inc.)

最近上司が使い始めた為入れました。
色々入力出来るので便利です。
予定の共有ができないので、基本閲覧アプリという感じでしょうか。
共有フォルダ内のExcelやWordをさっと見れるのが意外と神です。
まぁ、仕事なので仕方なく、という感じです。

番外編



通知センター
番外編として通知センターをどうぞ。
基本、MyShortcuts+Viewerですね。
MyShortcuts+Viewer 1.6
分類: ユーティリティ,仕事効率化
価格: ￥100 (Takeyoshi Nakayama)

カレンダー表示はMyScriptsで表示させています。
1軍スタメンアプリだけです。
HOMEというのは実は適当なスクリプトを記述してMyShortcuts+Viewerを落とす、という裏ワザです。壊れるのが怖いのであまり使わないですけどね。

Image_9


後はIFTTTというアプリでニュースを表示させています。
IFTTT 2.2
分類: 仕事効率化,ユーティリティ
価格: 無料 (IFTTT)

これは色々なアプリから通知を得て他のアプリへ情報を渡すアプリです。
私はコンサドーレ関係のサイトが更新された際にTumblrに流しているのですが、それらだけ通知をONにしています。事実上コンサドーレニュースアプリと化しています。
Tumblrはタイムライン(？)のRSSが簡単に取得できますので重宝しています。

Image_10

どうでしたか？
削除されたアプリや公式アプリばっかりでしたねぇ・・・。

意外と、この記事のおかげで見直しもできました。皆さんのiOS7神アプリはなんですか？

Image



アプリ紹介アクションを文字列で出力

2014-08-09 | iPhone5
アプリ紹介用のHTMLはTextwellというアプリで作成していますが、この度テキストで出力する様にしてみました。Facebookとかに投稿するのをイメージしています。

おなじみのwineroses御大のアクションを改造しました。

// PHGのat番号を登録してください。

at="";

// リンクプレートの配色を決めます。

color="slate";

title="darkblue";

background="Honeydew";

border="MediumAquamarine";

type="software";

q=new XMLHttpRequest();

q.open("get","http://itunes.apple.com/search?country=JP&entity="+type+"&limit=100&term="+encodeURIComponent(T.current),false);

q.send(null);

res=JSON.parse(q.responseText).results;

document.write("<meta name=viewport content=initial-scale=1><title>"+T.current+"</title>");

for(i=0;i<res.length;i++){

  app=res[i];

  url=app.trackViewUrl;

  link=url;

  name=app.trackName;

  icon=app.artworkUrl60;

  icon100=app.artworkUrl100;

  version=app.version;

  price=app.formattedPrice;

  artist=app.artistName;

  genres=app.genres;

  plate=name+" ( ver:"+version+" )\n"+"分類: "+genres+" 価格: "+price+" ("+artist+")\n<↓AppStore↓>\n"+link+"\n"+icon100+"\n";

  sample="<div style=color:white;background-color:black;padding:10px;><a onClick=T('insert',{text:'\\n"+icon100+"\\n'})><img align=left width=75 src="+icon+" style=border-radius:5px;></a><a onClick=T('replaceCurrent',{text:unescape('"+escape(plate)+"')})><strong>"+name+" "+version+"</strong></a><br>分類:"+genres+"<br>価格:"+price+" ("+artist+") <a href="+url+"><img src=http://r.mzstatic.com/ja_jp/images/web/linkmaker/badge_appstore-sm.gif></a><br clear=all></div>";

  document.write(sample);

}

document.write("<hr>");


Textwellへ登録→http://tinyurl.com/lvgct6n

色々あるのであれですが、
「plate」というところが出力を司っていますので、そこからHTMLタグを無くしただけです。
アプリ名をタップでテキスト出力
アイコンをタップでアイコンのURL
AppStoreマークをタップでAppStoreへ移動
というのは変わっていません。

Textwell ならば、あらかじめ設定アプリでFacebookにログインしておくことで
公式アクションの「Facebook」で投稿出来るので便利ですね

Facebookの投稿用URLスキームってのが中々見つかりません。

fb://messaging/compose


だとメッセージアプリになっちゃうのよねぇ。
URLスキームがあると便利ですが・・・。

Using the Graph API


使い方など



Textwellに登録しましたら、アプリ名を記入してカーソルを合わせてアクション起動

Image
▲カーソル行でアプリを検索します

3種類の出力が選べるのが、酒バラ流。
アイコン画像やStoreへ移動もあります。
アプリ名でテキスト出力します。

Image_2
▲3種類あります。普段はアプリ名をタップ。

文字列だけで情報を取得します。

Image_3
▲できました！

ちなみに、アプリによっては自動でアイコン画像やStoreへのリンクを貼ってくれる様です。
FacebookとTwitterで確認できました。

Image_4Image_5
▲気を利かせてくれるアプリもあります。

Textwell 1.2.4
分類: 仕事効率化,ユーティリティ
価格: ￥300 (Sociomedia)








ボタンをonClickではなくaddEventListenerにしてみた

2014-08-06 | iPhone5
ちょっと色気を出してaddEventListenerを使用してみましたが、引数をとるのがよくわかりませんでした。
window.onloadにしたところ上手く行きました。何故かはよくわかっていませんが・・・

Image

#HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--ボタンをイベントリスナーに  -->

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Google Visialization API テスト</title>

<style type="text/css">

table td { padding: 4px; width: 100px; }

</style>

</head>

<body>

<!-- Google AJAX API の共通ライブラリを読み込む（APIキーは不要） -->

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<!-- Google Visualization API でデータを読み込む一連の処理 -->

<script type="text/javascript">

// Google Visualization API のライブラリを読み込む

google.load("visualization", "1");

// データソース URL

var dataSource = 'https://spreadsheets.google.com/tq?key=0AvxnySF4O9IzdHdfNFZSZ19TdmQ5VHFYZUZRaWRIeHc&gid=0&pub=1';

// Query Language

var queryLanguage = 'select A, B, C';

// ページ読み込みの完了後にデータをリクエスト

google.setOnLoadCallback(function() {

var query = new google.visualization.Query(dataSource);

query.setQuery(queryLanguage);

query.send(handleResponse);

});

var jsonArray = [];

//ボタンのクリックにイベントリスナーを追加

window.onload = function(){

    var btn = document.getElementById('do1');

btn.addEventListener('click', function(){doAction(Number(document.form1.setsu.value));} , false);

};

function doAction( s ){

    for ( i =0; i<jsonArray.length; i++){

        if ( jsonArray[i]["setsu"] == s ){

            //alert(jsonArray[i]["value"]);

            var text = jsonArray[i]["value"].split("\n");

            var resulthtml = '<div id="resulthtml">';

            for ( j = 0 ; j<text.length; j++){

            resulthtml += '<p>' + text[j] + '</p>';

        };

        resulthtml += '</div>';    document.getElementById('area1').innerHTML=resulthtml;

        };

    };

}

// データを取得できると、この関数が呼ばれる

function handleResponse(response)

{

  var data = response.getDataTable();

  //alert(JSON.stringify(data));

  //Labelを取得して配列laへ入れます

  var la =[];

  for (var cc = 0; cc < data.getNumberOfColumns(); cc++){

   la[cc] = data.getColumnLabel(cc);

   };

  var csv  = [];

  for (var row = 0; row < data.getNumberOfRows(); row++)

  {

    var line = [];

    for (var col = 0; col < data.getNumberOfColumns(); col++)

  line.push(data.getFormattedValue(row, col));

    csv.push(line);

    //alert("line = " + line);

    //alert("csv = " + csv);

};  

  //JOSNへ入れ直して配列jsonArrayへ入れます

  for (i = 0; i < data.getNumberOfRows(); i++){

      var livalu = csv[i];

      var json = new Object();

      for (j = 0; j < data.getNumberOfColumns(); j++){

          json[la[j]] = livalu[j];

      };

      jsonArray.push(json);

  };

//alert(JSON.stringify(jsonArray));

var intex = "2014 コンサドーレ札幌 J'sGoal レポート";

document.getElementById('result').innerHTML = intex;

};

</script>

<div id="result">読み込み中...</div>

<form name ='form1' >

<p><input type='text' name ='setsu'></p>

<input type='button' id = 'do1' value ='表示'>

</form>

<div id="area1"></div>

</body>


MyScriptsへの登録は→こちら

どうやら、引数がある際は
「function (){};」と、ブックマークレット的なので囲むと良い様です。

こちらのスクリプトはGoogleのスプレッドシートから情報を取得してMyScriptsで表示するものです。
2014年のコンサドーレ札幌の試合レポート記事を出力しています。

MyScripts 2.5
分類: 仕事効率化,ユーティリティ
価格: ￥400 (Takeyoshi Nakayama)

↓参考になった記事
EventTarget.addEventListener - Web API インターフェイス | MDN
リスナー関数に引数を渡す場合は、関数式を使う必要があります。...




スプレッドシートからJavaScriptで値を取得する(Google Visualization APIと旧スプレッドシートを使用)

2014-07-18 | iPhone5
Googleのスプレッドシートを参照して他のスクリプト内で使用する方法がようやくなんとかなりそうなのでまとめてみました。

Image


結論から言うと、旧スプレッドシートを使用してデータベースを作成し、Google Visualization APIという昔からある仕組みで取り出します。

ハマりポイント



いきなり脱線しますが、今回は結構ハマりました。(T_T)
元々はGoogle Apps Script のContentServiceの中のJSONを出す機能を使用しようと思ったのですが、どうもリダイレクトされて出力されるらしく、iPhoneから単純にXMLHttpRequestを使用してもダメでした。

そこで、グラフを書く為の仕組みの元となっているGoogle Visualization APIというのを使ってみよう、と思ったのですが

これがスプレッドシートの仕様変更前の情報しかありません。
Google Visualization APIを使用するにはスプレッドシートのURLの1部をスクリプト内で指定する必要があるのですが、そのURLの仕様自体が変わってしまっています。
Issue 1476 - google-visualization-api-issues - Bug: New Sheets do not properly process Queries - Google Visualization API bug reports and feature requests - Google Project Hosting
...
▲皆さんお困りのご様子・・・。どうやら読み解けば解決している方もいる様ですが・・・。

どーしたものか・・・σ(^_^;)
と途方に暮れていたところ、
「旧スプレッドシートを作成するURL」というのを発見しました！

これは熱い！

ということで、かなりオカルトな手段ですが無事iPhoneのJavaScriptからスプレッドシートの情報を取得できそうです。

旧とつくぐらいですからいつまで使えるかはわかりませんが、ここに記録しておきます。

旧スプレッドシートを作成するURL



まずは今回のキモとなるのが旧スプレッドシートです。

新しい方が表計算ソフトとしてはかなりパワーアップしています。ですので普段使いではそのまま使う方が良いんですが。ただ、スプレッドシートのURLの仕組みが変わってしまっています。
https://docs.google.com/spreadsheets/d/11tMgEOxGjyf2ffolGrvybA-0zPS5xGA4IqPHgoFpbBg/edit?usp=docslist_api

こんな感じで
「https://docs.google.com/spreadsheets/d/{スプレッドシートのID}/edit?usp=docslist_api」

IDの表記がスラッシュで挟まれた感じです。皆さんのスプレッドシートもそうなっていると思います。

旧スプレッドシートを作成するにはまずGoogleにログインした状態で、
https://g.co/oldsheets
へアクセスします。

するとどうなるか。URLの感じが違います。
https://docs.google.com/spreadsheet/ccc?key=0AvxnySF4O9IzdHlsMFNYR21pRUJ2M1ZFU0MtMnJkTkE&usp=docslist_api

こんな感じで
「https://docs.google.com/spreadsheet/ccc?key={スプレッドシートのキー}&usp=docslist_api」

と、「key=」というのが出ました。これこそがまさにカギとなります。

このシートに使用したいデータベースを記載して、「ファイル」から「ウェブに公開」しておきます。
公開してしまうので機密性の高い場合は使用しない方が良いと思います。

後はスクリプトタグからJavaScriptで参照して行きます。

不思議な呪文



Google Visualization APIを使用するには定型的な記述をします。jQueryみたいな感じでしょうか。
Google Spreadsheets を簡易 SQL DB に！「Google Visualization API」 - WebOS Goodies
皆さん、 Google Docs のガジェット機能はもう使ってみましたでしょうか。データをさまざまな方法で可視化するガジェットをシート上に配置できるというもので、このガジェットは自作することもできま...
↑こちらのサイトをコピペさせて頂きました。

不思議呪文をつらつら書きまして、使用したい列を指定し(並べ替えや抽出も出来るっぽいです！)、関数を呼び出す、という感じ。
んで、その関数内で欲しい情報を取り出す、という流れです。

今回私が作ったというスクリプトを見てみましょう。
iPhoneでスクリプトを作るのに便利なMyScriptsというアプリを使用しています。

#HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Google Visialization API テスト</title>

<style type="text/css">

table td { padding: 4px; width: 100px; }

</style>

</head>

<body>

<!-- Google AJAX API の共通ライブラリを読み込む（APIキーは不要） -->

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<!-- Google Visualization API でデータを読み込む一連の処理 -->

<script type="text/javascript">

// Google Visualization API のライブラリを読み込む

google.load("visualization", "1");

// データソース URL

var dataSource = 'https://spreadsheets.google.com/tq?key=0AvxnySF4O9IzdHlsMFNYR21pRUJ2M1ZFU0MtMnJkTkE&gid=0&pub=1';

// Query Language

var queryLanguage = 'select A, B, C';

// ページ読み込みの完了後にデータをリクエスト

google.setOnLoadCallback(function() {

var query = new google.visualization.Query(dataSource);

query.setQuery(queryLanguage);

query.send(handleResponse);

});

// データを取得できると、この関数が呼ばれる

function handleResponse(response)

{

  var data = response.getDataTable();

  //alert(JSON.stringify(data));

  //Labelを取得して配列laへ入れます

  var la =[];

  for (var cc = 0; cc < data.getNumberOfColumns(); cc++){

   la[cc] = data.getColumnLabel(cc);

   };

   //alert (la);

  var csv  = [];

  for (var row = 0; row < data.getNumberOfRows(); row++)

  {

    var line = [];

    for (var col = 0; col < data.getNumberOfColumns(); col++)

    line.push(data.getFormattedValue(row, col));

    csv.push(line);

    //alert("line = " + line);

    //alert("csv = " + csv);

};  

  //JOSNへ入れ直して配列jsonArrayへ入れます

  var jsonArray = [];

  for (i = 0; i < data.getNumberOfRows(); i++){

      var livalu = csv[i];

      var json = new Object();

      for (j = 0; j < data.getNumberOfColumns(); j++){

          json[la[j]] = livalu[j];

      };

      jsonArray.push(json);

      alert(JSON.stringify(jsonArray));

  };

}

</script>

<div id="result">読み込み中...</div>

</body>


MyScriptsへ登録は→こちら

詳しくは引用したサイト様かリファレンスのGoogleの英文を読むしかないのですが、

dataSourceという変数に先程作成したスプレッドシートの「key=」の部分を入れています。
末尾の方のgid=0の部分でシート番号を指定しています。

queryLanguage = 'select A, B, C'; の部分がそのまま列の指定になります。
使用したい列を記述しています。

関数handleResponseが値取得後に呼び出される仕組みになっています。
ここで、データベースを再度JSONにしてみました。
・・・おそらくは頑張れば取得したオブジェクトから直取り出来るんでしょうが、今のところあんまり情報がないので、引用サイト様にある値の取得に、ラベルの取得を追加した様なスクリプトになっています。

getNumberOfRows()が末尾の行数、getNumberOfColumns()が最大の列数を返してくれる模様ですので、ループの際に活用しています。

どうやらGoogle Visualization APIは勝手に見出し行を取得してくれる模様でして、その見出しはgetColumnLabel()から返ってくる様です。

私でもなんとかなりましたので、皆さんも是非チャレンジしてみては如何でしょうか？

どうやら、Google的にはグラフ機能を使って欲しいっぽいですけどね。リファレンス読む感じでは。

つーかね。
仕様が変わってからのフォローが足りない。
今後もどうなるかは微妙かもしれませんね。

今回のスクリプトもギリギリ動いている感じ。
実用化にはもうちょっと研究が必要な気がしています。


MyScripts 2.5
分類: 仕事効率化,ユーティリティ
価格: ￥400 (Takeyoshi Nakayama)










MyShortcuts+Viewerで擬似コールバックをするブックマークレット

2014-06-21 | iPhone5
定番アプリのMyShortcuts+Viewerで擬似コールバックをする為のURLスキーム作成ブックマークレットです。

AというアプリからBというアプリへ移動したい際に活用されるのが「コールバック」という仕組みですが、対応していないアプリではできません。

それを擬似的に行おうというのがMyShortcuts+Viewerの裏技、擬似コールバックです。

私は好きな機能なんですが、少々説明が面倒なので、なんとか便利に使えればと思い作成してみました。
個人的なappendChildの勉強も兼ねてますが・・・σ(^_^;)

MyShortcuts+Viewer 1.6
分類: ユーティリティ,仕事効率化
価格: ￥100 (Takeyoshi Nakayama)



URLスキームで連続起動



MyShortcuts+Viewerにはリマインダー機能というのがありまして、URLスキームがあるアプリを呼び出す事ができます。

それを連続して行うことでAアプリからBアプリへスムーズに移動しよう！
というのが基本的な考え方です。

以前も書きましたが↓

白牙隊A2屯所: MyShortcuts+Viewerの擬似callbackのやり方
? YouTubeバックグラウンド再生アプリ「動画をダウンロード Pro」のURLスキーム | メイン | お気に入りのランチャー系アプリBlasterを動画でご紹介 ?MyShortcuts+Vie...


公式サイトに詳しい仕様があります。

myshortcuts://addreminder?title=TITLE&url=URL&year=YEAR&month=MONTH&day=DAY&hour=HOUR&minute=MINUTE&time=TIME&repeat=REPEAT&callbackurl=URL&cancelcallbackurl=URL&autocallbackurl=URL&autodelete=yes


title: リマインダーの名称


url: 通知をタップしたときに実行するURL


year / month / day / hour / minute: 日時。いずれかのみを指定することもできます。省略時は現在時刻の2分後が指定されます

time: 1970年からの秒数。省略時は現在時刻の2分後が指定されます。yearなどの日時指定よりも優先されます


dtime: 現在時刻からの差分を秒数で指定。timeの代わりに使用します。


repeat: 繰り返しの指定。once / daily / weekly / monthly のいずれかで、省略時は once が指定されます


callbackurl: ユーザーがリマインダーを登録したあとで呼び出されるURL。省略時はMyShortcutsに留まります


cancelcallbackurl: ユーザーがリマインダーの登録をキャンセルしたときに呼び出されるURL。省略時はMyShortcutsに留まります


autocallbackurl: このパラメータを指定するとユーザーインターフェイスを表示せずにリマインダーを登録します（ただし、MyShortcutsに一瞬だけ切り替わります）。登録後、自動でこのURLが呼び出されます


autodelete=yes: このパラメータを指定すると、リマインダーが通知されたあとで自動的に該当のリマインダーが削除されます



これらを簡単に出来る様にブックマークレット化してみました。

javascript:base=document.createElement("form");document.body.appendChild(base);document.write("<div id='forms'></div>");form=document.createElement("form");form.name='fm';html='<label for="title">通知のタイトル</label></br><input type="text" id="title" name="title" value="callback"></br><label for="autocallbackurl">1つ目のアプリ</label></br><input type="text" id="autocallbackurl" name="autocallbackurl"></br><label for="url">2つ目のアプリ</label></br><input type="text" id="url" name="url"></br><label for="dtime">2つ目呼び出しまでの時間(秒)</label></br><input type="text" id="dtime" name="dtime" value="1"></br><p><input type="button" onclick="doAction();" name="sub" id="sub" value="生成"></p>';form.innerHTML=html;div=document.getElementById('forms');div.appendChild(form);script=document.createElement("script");fn='function doAction(){var title = document.fm.title.value;var url = document.fm.url.value;var aturl = document.fm.autocallbackurl.value;var dtime = parseInt(document.fm.dtime.value);myurl = "myshortcuts://addreminder?title=" +encodeURIComponent(title) + "&url=" + encodeURIComponent(url) + "&dtime=1&repeat=once&autodelete=yes&autocallbackurl=" + encodeURIComponent(aturl);window.prompt("callback",myurl);}';script.innerHTML=fn;document.body.appendChild(script);


どこか任意のページをブックマークした後、URLを上記のスクリプトに編集して下さい。

ImageImage_2

名前はお好みでどうぞ。
ブックマークを編集してURLをスクリプトへ書き換えます。

まずはコールバック用URLを作ります



ここでは例として
「Twitterを起動後、インスタグラムを起動する」
としましょう。(・・・意味があるのかは謎ですが)

インスタグラムにはコールバック機能がないので、普通には無理ですがそれを擬似的にやってみます。

まずは目的のアプリのURLスキームを調べましょう。

windowsパソコンでiPhoneのURLスキームを調べる方法

Twitter公式アプリは
twitter://

インスタグラムは
instagram://

です。

今回はTwitterを開いた3秒後にインスタグラムを起動するとしましょう。

これらを今回のブックマークレットで加工します。

情報を入力後、「生成」ボタンを押すとコールバック用のURLスキームが生成されます。
これをコピペして使用して下さい。

Image_3Image_4

すみません。見た目がダサいのはただの怠慢です。(T_T)
ブックマークレットを起動するとHTMLを置換するので、元のページへ戻る際はリロードして下さい。

使ってみます



今回は公式メモ帳アプリに貼り付けてみました。

Image_5
▲作成したURLでアプリを呼び出すと・・・

呼び出すと3秒後に通知が来ます。
通知をタップすると2つ目のアプリが起動します。

Image_6
▲通知でコールバック！

Image_7
▲はい！コールバック完了！

後は、アイディア次第です。

例えば、MyShortcuts+Viewerにはクリップボードを引用する機能もあります。
「コピーした語句をSafariでGoogle検索した後元にのアプリに戻る」
なんてのも面白そうですね。

Image_8

余談ですがプロトタイプのMyScripts版もあります。
MyScriptsへ登録→コールバック実験








比留間和也氏のスクリプトをiPhone用に改造してみた。

2014-06-19 | iPhone5
先日比留間和也氏の「JavaScriptの新しい教科書」(2013年12月11日 初版)を買いました。
イベントリスナーとコールバック関数、という考え方が未だに理解しきれていませんが、スッキリした記述がカッコイイなぁと感じています。

せっかくなので、iPhoneのMyScriptsでも動く様に改造してみました。

マウスからタッチへ



当たり前ですが、iPhoneにはマウスがありません。
なので、マウス関連のイベントリスナーをタッチ操作へ改変しただけです。
後、タッチ中はスクロールしない様にイベントハンドラーを追加してみただけです。

でも動く！

このメンテナンス(？)のスムーズさはさすがという感じです。

よくわからないままコピペしましたが、単純に

mousedown→touchstart



mouseup→gestureend



mousemove→touchmove


とマウス系のイベントをタッチ系にコピペ

スクロール防止に
もう一つイベントリスナーを追記しました。

document.addEventListener('touchmove', function(e) {

  e.preventDefault();

}, false);


MyScriptsへ登録はこちら→レッスン8

こちらは比留間和也氏のスクリプトが元になっています。
外部jsファイルとCSSは私のDropboxを参照しています。

Image_5

起動時や、ボタンをタップするとウインドウが表示されます。


Image_6

タイトル部をドラッグするとウインドウが動きます！

単純なコピペですが

こいつ・・・動くぞ！

やっぱり、タッチインターフェイスなんですから、タッチで操作したいですよね。

もうちょっと勉強、解析して発展させたいところです。


スクロールの防止はこちらのサイトを参考にしました。
↓
Touch/Gestureイベントの勘所 - Playground of ours

MyScripts 2.5
分類: 仕事効率化,ユーティリティ
価格: ￥400 (Takeyoshi Nakayama)







5G5000円は安いのか？

2014-06-12 | iPhone5
Image
噂の「新定額」、「スマ放題」がSoftBankから発表されました。計算してみると私は1万円超えるかもでした。

スマホ時代の新料金プラン「スマ放題」 | モバイル | ソフトバンク
24時間誰とでも通話し放題、ネットもし放題、さらに余ったデータ容量は翌月に繰り越しも可能なスマホ時代の新料金プランです。24時間すべての国内通話が無料！他社ケータイ・固定電話へもすべて通話し放題！ソフ...


時代を変えたホワイトプランは934円でSoftBank同士の通話が(21時～1時以外)無料でした。
今回のスマ放題はそれを他社携帯へかけても無料となるかわりに、2700円となります。

私はあまり電話はかけず、データ通信がメインです。
iPhone5のローンがまだ残っていますので月9000円前後くらい。大抵は8000円台後半、時々電話が多い時に9000円突破、という感じです。

データ通信は段階があるようでして、
昔の通話料無料(ゴールドとかシルバーとか色々ありましたよね)を通信料に置き換えたようなイメージでしょうか。
私は多い時に5Gを超えてしまうので、おそらく5G5000円の「パック5」になりそうです。

となると
基本料金 2700円
定額5G 5000円
オプション 1250円
ユニバーサル使用料 3円
iPhone5のローン 3090円
ローンの割引 -1982円

で 10061円
消費税で10865円というイメージ。

あれ？値上がりした？

みなさんはどんな感じでしょうか？









ようやくMyScriptsの「4つのアクション」がわかってきた。

2014-06-08 | iPhone5
iPhoneで色々スクリプトを作成するMyScriptsというアプリがありますが、中々独特なのが、「4つのアクション」という仕組みです。
MyScripts @ WIKI - 4つのアクション - @ウィキモバイル
...

MyScripts 2.5
分類: 仕事効率化,ユーティリティ
価格: ￥400 (Takeyoshi Nakayama)

引用したwikiサイトでは、URLを記述しただけの簡単なスクリプト(？)でも動きがかなり異なる事がわかります。
そして、1番ハマったポイントが
1番最後に記述したURLなどにその処理をする、という事です。

これを、何と無くですが理解できると楽しくなってきますね。

きっかけは以前の記事



きっかけはLibingのバージョンアップに伴い、過去の記事を見返していた事です。
特にこれ。↓
Libingのx-callback-urlとMyShortcuts+Viewerのautocallbackurlを組み合わせてTwitterのつぶやきをさらに快適にHTML化する

もはや大道芸に近い記事で非常に煩雑です。
要するにTwitterのつぶやきを引用したい、という事なんですが、当時は知識がまだまだでして(今もですが)アプリを連携させてなんとかしようとしている様子がみて取れます。

最初は、Libingのcallback部分だけを修正した記事を書こうと思いましたが、現在はこの方法は使用していませんし、何より面倒なので違ったアプローチから挑戦してみようと思います。

根幹にあるのが代助さんのこのスクリプトです。

[MyScripts]ブログにツイートを埋め込む Tweet oEmbed Helper | 代助のブログ
Tweet...


これは、TwitterクライアントアプリからツイートのURLをコピーしてそれからつぶやきを引用するHTMLを取得するスクリプトです。

残念ながら、TwitterのAPIが1.1になると使えなくなる可能性が高いのですが、2014年6月現在ではまだ何とか動くようです。こちらを使わせていただきます。(代助さんありがとうございます!)

びっくりマークから稲妻マークへ



この「Tweet oEmbed Helper」は色々なアプリで使用できるように、クリップボードからつぶやきのURLを取得し、出力も画面に表示してコピペで目的のアプリへ送れるようになっています。

ただ、何度も使用する場合はコピペがやや煩雑に感じられるかもしれません。

そこで、代助さんの設計コンセプトからはぶれるのですが、自分のお気に入りのアプリへ自動で貼り付けできるようにしてみましょう。

「Tweet oEmbed Helper」は冒頭でTwitterの「GET statuses/oembed」エンドポイントへアクセスするURLを設定し、そこから値を取得し、その配列から「html」という値を「twt」変数に入れて出力しています。

↓公式ページ
Embedded Tweets | Twitter Developers

GET statuses/oembed | Twitter Developers


最後がif文になっていますので末尾ではなく、その少し前の
twt.replace(" width=\"350\"","");

というのが出力をつかさどっているようです。
ここを改変してみましょう。

Image
▲URLを作り、APIから値を得て、twt変数で出力

ここをなんでも結構ですが、メモ帳系アプリのURLスキームへと改変し、
現在は「びっくりマーク」になっている出力をURLスキームを開く「稲妻マーク」へ変えます。

「処理結果を画面に表示」(びっくりマーク)から「URLを開く」(稲妻マーク)へ
動作を変えるわけですね。

Image_2
▲画面に表示→URLを開く(稲妻マーク)へ

今回はするぷろというアプリを使用してみます。
するぷろには文章を挿入するURLスキームがあります。

slpro://文字列


これを先ほどの
「twt.replace(" width=\"350\"","");」
と置き換えます。

"slpro://"+encodeURIComponent(twt.replace(" width=\"350\"",""));


これで見事他のアプリへ流し込むことができるようになりました!

MyScriptsへ登録は→こちら

Image_3Image_4
▲Twitterアプリからコピーすると・・・

Image_5
▲できました！

蛇足



蛇足として、最初のつぶやきのURLの取得に工夫をしてみます。
アイディアとしては
「MyScriptsのバックグラウンド監視機能を使用する」
「ブラウザから取得する」
等でしょうか。

MyScriptsにはクリップボードを監視する機能があり、コピーをすると通知からスクリプトを起動することができます。せっかくですのでその機能を使用してみたいと思います。

バックグラウンド監視機能は、スクリプト一覧画面で右側のチェックを入れることでONになります。
後はお好みのツイートのURLをコピーすればOK。
画面上部に通知が来ますのでそこをタップするとスクリプトが実行されます!!

Image_6Image_7
▲バックグラウンド監視をONしておくとコピー時に通知が来ますそれをタップ！

Image_8
▲できました！

ブラウザでTwitterのページを開いてそちらから流し込むのも面白そうですね。
MyScriptsのURLスキームには値を受け渡してスクリプトを実行するという機能があります。

スクリプト実行
myscripts://run?title=TITLE&text=TEXT&option=OPTION
TITLE：URLエンコードしたスクリプトタイトル
TEXT：URLエンコードしたテキスト
OPTION：URLエンコードした文字列
※TEXTは実行するスクリプトのTEXT変数にデコードされて代入される
※OPTIONは実行するスクリプトのOPTION変数にデコードされて代入される


iPhoneで閲覧するとTwitterのURLはモバイル専用のものになっていますのでこれを変更してから使用します。
URLスキームには「&text=」というパラメータが使用できますのでこちらを利用してみましょう。

仮にスクリプト名が
Tweet oEmbed Helper(slpr

だとすると

javascript:location.href='myscripts://run?title=Tweet%20oEmbed%20Helper(slpr&text='+location.href.replace("mobile.","");


こんな感じのブックマークレットでどうでしょう？

Image_11Image_9
▲ブックマークレットからURLを取得して

Image_10
▲できました！


個人的には、MyShortcuts+ViewerのコールバックでTwitterクライアントを連続起動とかiworkspaceで連続起動とかも楽しそうだなぁ、と感じています。
Textwellの内部ブラウザに移植しても面白そうですね！∠(￣へ￣)

色々調べて、色々試して、コピペして
やはりぐるっと回ってこの
「4つのアクション」
がわからないとやはり難しいのも事実。

皆さんも色々スクリプト試してみて下さいね。
























Libing v5.0.0以降のx-callback-urlで関連記事リンクを作成する。

2014-06-04 | iPhone5
この度、Libingのバージョンアップに伴い古いタイプのコールバックが動かなくなりました。
自分で書いていたcallback系のブックマークレットやアプリ連携を見直していこうと思います。
まずは基本となる関連記事リンク作成から。

コールバックの修正 - Libing Support
© 2013 Libing Support is designed by Templateify & Sponsored by PCguide , Your Link Here...


URLスキームでcallback



以前私がよく利用していたのが、ブックマークレットでcallbackをするというものでした。
現在はこのやり方ではなく、URLスキームからcallbackをするやり方です。
サポートページに詳しい解説があります。
↓
x-callback-url - Libing Support
Libingはx-callback-urlをサポートします。メソッドはopenとevalの2つがあり、以下のクエリによって命令を付加します。クエリの値は全てURLエンコードしたものを使い...


今回は
「自分のブログを開いて、そこへのリンクのHTMLを別のアプリへ送る」
という事をやってみます。

この様に、
「Libingでサイトをみた後に、○○する」
という時、このx-callback-url機能は便利です。

先ずはlibing://callbackを登録



「Libingでサイトをみた後に、○○する」
がcallbackの基本的な動きです。

この「○○する」
を呼び出す命令が
libing://callback

というURLスキームです。
これがない事には始まりません。ですので、事前にブックマークに入れておきましょう。
その際、ジェスチャーを登録しておくとカッコイイです。
私は↓←→としています。

(どうも私はサイトを見る際上下スワイプを多用する様です。上下スタートのジェスチャーは画数が多めの方が暴発しなくて良いと感じています。)

Image

サイトを開くかブックマークレットか



Libingのx-callback-url機能ではまず開くサイトのURLか登録済みブックマークの名前を指定します。
ブックマークの指定はまだ使った事がありません。引数を与えて起動できる、という鬼仕様ですが私は使いこなせていません・・・σ(^_^;)
今回は基本となるURLを指定をしてみましょう。

最初に開くサイトは私のブログのトップページにしてみます。
URLはエンコードしておく必要があります。

URLを指定する際は
libing://x-callback-url/open?url=

に続けてエンコードしたURLを記述します。

最後にサイトをみた後にやりたい事を記述します。
今回はちょっと応用編で、あらかじめ用意していたブックマークレットを呼び出してみます。

私がメインで使用している、見ているサイトのタイトルとURLをHTML化するブックマークレットです。
javascript:title=document.title;url=location.href;location.href='textwell:///insert?text='+encodeURIComponent('\n<a href='+url+' target=_blank>'+title.replace("白牙隊A2屯所: ","")+'</a><a href="'+url+'"><img src="http://b.hatena.ne.jp/entry/image/'+url+'"></a>\n');
▲見ているサイト名とURLをHTML化するブックマークレット

このブックマークレットをLibingへ登録
こちら→Share

このブックマークレットを呼び出してみましょう。
ブックマークレットなどを呼び出すURLスキームがLibingにはあります。
呼び出しには登録した名前を指定します。
今回は「Share」という名前ですので
libscript://Share

という記述になります。
コールバックで呼び出すURLは「&」の後に「x-success=」と続けて記述します。
こちらもエンコードしておく必要があります。
全てつなげると
libing://x-callback-url/open?url=http%3A%2F%2Fbasato.no-blog.jp%2Fa2%2F&x-success=libscript%3A%2F%2FShare

となります。

整理しますと・・・

やりたい事
→「http://basato.no-blog.jp/a2/を開いた後、Shareと言う名前のブックマークレットを起動したい」

URLか？ブックマークか？
→URLなので「libing://x-callback-url/open?url=」

最初に開くサイト
→「http://basato.no-blog.jp/a2/」

次にやりたい事
→「libscript://Share」でShareという名前のブックマークレットを呼び出し

これらを起動後、「libing://callback」を叩けばcallbackが動きます。

任意の場所から起動します。

Image
▲URLスキームでコールバックを起動！

今回は、サイトを引用するブックマークレットを使用しますので、目的の記事を表示させます。
そうしましたら、libing://callbackをジェスチャー起動！

Image_2
▲libing://callbackを起動！

そうしますと、
「○○する」にあたる動作が動きます。
今回はHTMLが別のアプリへ挿入されました。

Image_3
▲張り付きました！

↓こんな感じ。

Libing v5.0.0でブックマークを編集するには軽くタップします。


Libingのコールバックの魅力は
起動するタイミングを自分で決められる点です。
さらに言えば、覚えるジェスチャーがひとつですむ、というのもあるかもしれません。

何にしろ、とりあえずLibing、というのは個人的には安心できて非常に心地よいものです。

やはりページ閲覧はブラウザアプリが良いと思います。
そこから次へとスムーズに繋げる。

callbackを考える事はwebといかに向き合うかを考える事に繋がると信じます。









Libing v5.0.0でブックマークを編集するには軽くタップします。

2014-06-02 | iPhone5
ジェスチャーで操作するブラウザ、Libingがバージョン5.0.0になりました。
やや変更になった操作がありますので注意が必要でしょう。

今回のバージョンアップはゼロからプログラムを作成し直したという意欲作です。
以前から使用しているというファンの方はご自身のブックマークレットが新しいバージョンで動くか確認してみましょう。
動かないものは、メニューの「稲妻マーク」が表示されませんのでその辺も参考にしてみてください。

私の使用していたものでは

  • Address(Googleなどで検索するブックマークレットです。)

  • 次のタブを開く

  • 前のタブを開く



が動かなかったので削除して新しいものを入れました。

Image_9
▲ブックマークレットは1度チェック！

新しいバージョン対応のブックマークレットはサポートページにあります。
(デザイン変わりましたな！サポートページもヽ( ´ー`)ノ)

Libing v5.0.0対応ブックマークレット - Libing Support
© 2013 Libing Support is designed by Templateify & Sponsored by PCguide , Your Link Here...


ブックマークの編集は軽くタップ



お気に入りのページやブックマークレットを保存できる「ブックマーク」ですが、編集の際の操作は2種類あります。

軽くタップと長押しです。

まぁ、そのままですねヽ( ´ー`)ノ

よく使うのは軽くタップの方でしょうか。
まずは編集したいブックマークを表示します。
初期設定ではトリプルタップから画面下のブックマークを選ぶ形でしょうか。
(私はブックマークタブ表示にもジェスチャーを設定しています。便利ですよー)

画面右上の編集を選んだのち、編集したいブックマークをタップします。軽くですよー。
ImageImage_2
▲軽くタップ！(長押しでは移動などができます)


表示が切り替わって編集画面へ遷移できました！
せっかくなので、試しにジェスチャーを登録してみましょう。
Libingのジェスチャーは
上、下、左、右の4方向のスワイプを組み合わせる
という仕組みです。
ここではアルファベットの「R」をイメージして
上、右、下、左、右
としてみました。・・・ファミコンの裏ワザコマンドみたいですね。・・・古いかヽ( ´ー`)ノ

Image_6Image_3
▲いきなりスワイプ、で登録できます。

すると画面下に入力したジェスチャーが表示されます。
これでよければ完成です。

Image_4
▲ジェスチャー登録完了！

これでこのサイトはジェスチャーから呼び出す事が出来る様になりました。
いつでも酒とバラの日々ですな！(意味不明)

Image_7Image_8
▲ジェスチャーで・・・ブックマーク呼び出し！


Libingは直感的ジェスチャー操作(スワイプの組み合わせ)と高度のカスタマイズが楽しいアプリです。

左右スワイプでページを進んだりする操作はあのAppleのSafariでも採用されました。
それに先駆けてスワイプ操作を可能にしたLibingで楽しいブラウズを！

Libing for iPhone 5.0.0
分類: ユーティリティ,仕事効率化
価格: 無料 (Nobuo Saito)



カスタマイズの第一歩によく使う操作から調整してみませんか？
↓
Libingの基本操作をジェスチャー登録する。





マジック日本語公式サイトからカード情報をコピペするブックマークレット

2014-05-30 | iPhone5
DOMの勉強をかねて、マジックのカード情報を取得するブックマークレットを作成してみました。
幸運にもマジック日本語公式サイトにはウルザブロック以降のカード情報が残っています。
そこからgetElementsByClassNameでコピペします。
自分向けなのでiPhoneアプリのTextwellへ貼り付ける仕様になっております。

Image


カードリスト｜マジック：ザ・ギャザリング

Textwell 1.2.4
分類: 仕事効率化,ユーティリティ
価格: ￥300 (Sociomedia)



javascript:(function(){var getName=document.getElementsByClassName("cardname");var getMana=document.getElementsByClassName("mana");var getType=document.getElementsByClassName("type");var getPoto=document.getElementsByClassName("poto");var getText=document.getElementsByClassName("text");var getImg=document.getElementsByClassName("listimg");var onText=document.getElementsByTagName('h4');var text=encodeURIComponent(getMana[0].innerHTML+'</br><div class="cadimg"><img src="'+getImg[0].src+'"></div></br>'+getType[0].innerHTML+'</br>'+getText[0].innerHTML+'</br><div class="cadpoto">'+getPoto[0].innerHTML+'</div></span></span>');base=document.createElement("div");document.body.appendChild(base);document.write(onText[0].innerHTML);onName=document.getElementsByTagName('a');location.href='textwell:///insert?text=<span class="cad"><span class="cadtext">'+onName[0].innerHTML+text})();


↓こんな感じです。

対抗呪文{U}{U}

インスタント
対象の呪文１つを打ち消す。


堕天使{3}{B}{B}

クリーチャー ― 天使
飛行
クリーチャーを1体生け贄に捧げる：堕天使は、ターン終了時まで＋2/＋1の修整を受ける。
3/3


CSSでなんとかカードっぽくしてみて使って下さい。
CSS苦手な私はこんな感じにしてみました。
<style>

.cad {

    width:280px;

    height:500px;

    font-size:20px;

    font-weight:bold;

    text-decoration:none;

    display:inline-block;

    text-align:left;

    padding:10px 10px 10px 10px;

    margin:20px 20px 20px 20px;

    vertical-align:middle;

    color:#fff;

    background-color:#000;

    border-radius:30px;


}

.cadtext{

    width:240px;

    height:450px;

    font-size:20px;

    font-weight:bold;

    text-decoration:none;

    display:inline-block;

    text-align:left;

    padding:20px 10px 10px 10px;

    margin:10px 10px 10px 10px;

    vertical-align:middle;

    color:#222;

    background-color:#fff;

    border-radius:30px;


}

.cadimg{

    text-align: center;

    margin: 5px;

}

.cadpoto{

     text-align: right;

}

</style>


<style>
.cad {
width:280px;
height:500px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:10px 10px 10px 10px;
margin:20px 20px 20px 20px;
vertical-align:middle;
color:#fff;
background-color:#000;
border-radius:30px;

}
.cadtext{
width:240px;
height:450px;
font-size:20px;
font-weight:bold;
text-decoration:none;
display:inline-block;
text-align:left;
padding:20px 10px 10px 10px;
margin:10px 10px 10px 10px;
vertical-align:middle;
color:#222;
background-color:#fff;
border-radius:30px;

}
.cadimg{
text-align: center;
margin: 5px;
}
.cadpoto{
text-align: right;
}
</style>

Image_2

複数条件でのDOMが難しい・・・



今回困ったのが、この日本語公式サイトはjQueryか何かでソースをいじっている様でして。
特にカード名はマウスを乗せるとカード情報が出る関数が仕込まれていまして上手くカード名だけが入手できませんでした。

おそらくは、
「クラス名で探してその中のaタグを取得」
とかは出来るのでしょうが、私の技術力では無理でした・・・。(T_T)

妥協案として、カード名はdocument.writeで書き換えてからぶっこ抜いてます。

DOM・・・奥が知れん！
ただ、これは楽しいですね。

公式サイトの画像への直リンクを取得するスクリプトですので、その範囲でご利用下さい。

検索機能などはありませんので任意のカードをタップして表示させてから実行して下さい。






spanタグでJavaScriptの関数起動出来るんですね。

2014-05-16 | iPhone5
先日比留間和也氏の「JavaScriptの新しい教科書」(2013年12月11日 初版)を買いました。
面白い順番で進んで行くのと、カラフルなページが多くて楽しく読んでいます。

その中にあったのが、
「<a href="javascript:void(0);">」はあまりお勧めしません、という趣旨の表記でした。

Image_5


ドキ！Σ（゜д゜lll）

実は先日作ったスクリプトがそれでした。

ということで、どうすればいいのかなぁと調べてみましたが、
素直にaタグをspanタグに置き換えてみました。

元々、「CSSでボタンを！」という趣旨のスクリプトだったので、そんなに問題なく動いています。よかったよかった。

ただ、jQuery Mobile のフッターのナビゲーションバーを使う場合は仕方が無いかなぁと思っています。

いや・・・CSS頑張れば出来るんでしょうけどね。σ(^_^;)

変更前↓
<a href="javascript:void(0)"  name="toroku" id="toroku" onclick="toroku();" class="sylfeed">SendTo</a>

変更後↓
<span name="toroku" id="toroku" onclick="toroku();" class="sylfeed">SendTo</span>



Image_6
▲ボタン風ですがspanタグで関数起動してます。

ただ、void ってカッコいいんですよね。
「虚空」

・・・そうでもない？


虚空/Void - MTG Wiki
Image_7
(3)(黒)(赤) / ソーサリー / 数を１つ選ぶ。その数と等しい値の点数で見たマナ・コストを持つアーティファクトとクリーチャーをすべて破壊する。そのあと、対象のプレイヤー１人はその手札を見せ、その中の土地でないカードのうち、点数で見たマナ・コストがその数と等しい値のカードをすべて捨てる。







TextwellからSylfeedのSendTo登録を行うアクション

2014-05-08 | iPhone5
定番のRSS購読アプリSylfeedにはSendTo登録用のURLスキームがあります。それをTextwell側からアクセスするアクションです。
よくあるやつですね。

SylfeedのSendTo機能編集画面は小さい(かつ、以前はバグが多かった)ので、別アプリから登録できると便利なのではないでしょうか！

せっかくなので、ブログなどで公開する時用の短縮URLも発行できる様にしました。

1行目にタイトルを
2行目に説明
3行目にスクリプトを書いて実行して下さい。

?SendTo
Sylfeedへ登録します。

?Tinyurl
登録用URLをクリップボードに入れます。


「SendTo」機能 | GACHANET
Sylfeed 3.2.9
分類: ニュース,ソーシャルネットワーキング
価格: ￥200 (GACHANET)

<script>

//エンコードします。

var title = encodeURIComponent(T.line(1));

var url = encodeURIComponent(T.lines(3,null));

var summary = encodeURIComponent(T.line(2));

var sendto = 'sylfeed://sendto/add?title=' + title + '&url=' + url + '&summary=' +summary;

//Sylfeedへ送ります。

function toroku(){T( 'urlScheme', {

  url:sendto

} );};

//短縮URL変換します。

function tin(){var link = "http://tinyurl.com/api-create.php?url=" + sendto;

q=new XMLHttpRequest();

q.open("get",link,false);

q.send(null);

T("copy",{text:q.responseText});};

</script>

<title>Sylfeed</title>

<style>

.sylfeed {

    width:45%;

    height:100px;

    font-size:80px;

    font-weight:bold;

    text-decoration:none;

    display:inline-block;

    text-align:center;

    padding:8px 0 8px 0;

    margin:50% 20px 20px 20px;

    vertical-align:middle;

    color:#fff;

    background-color:#49a9d4;

    border-radius:30px;


}

p{

    margin:20px 0px 50px 50px;

    font-size:40px;

}

</style>

<div>

<p>1行目:タイトル</p>

<p>2行目:説明</p>

<p>3行目SendToスクリプト</p>

</div>

<div>

<a href="javascript:void(0)"  name="toroku" id="toroku" onclick="toroku();" class="sylfeed">SendTo</a>

<a href="javascript:void(0)"  name="tin" id="tin" onclick="tin();"

class="sylfeed">TinyURL</a>

</div>


Textwellへの登録は→こちら

Image


蛇足など



Textwellにスクリプトを記述してアクションを起動します。

Image_2
▲1行目がタイトル、2行目が説明、3行目がスクリプトです。

今回は2種類の動きを選べる様にしてみました。
通常は左を選んでSylfeedへ送ります。
右を選ぶとクリップボードへ短縮URLを入れます。
ブログやつぶやきで公開する際にどうぞ。

Image_3Image_4
▲Sylfeedへ登録、あるいはクリップボードへURLを入れます。


今回は最初T.loadlets機能を使用しようと思っていたのですが、アクセスするURL(callbackFn)を省略すると動かない為断念しました。

confirmで、も試したのですがどーも芋っぽいのでやめました。

結局、あんまりオシャレにはなっていないのですがCSSの勉強になりました。
CSSの方が時間がかかったのは内緒です・・・( ´▽｀)

ありそうでなかったので。
短縮URLをクリップボードに入れるくだりはWineroses御大の流れ、というかそのままです。

個人的にはaタグで出す形に直してみても良いのかなぁ、と。

Textwell 1.2.2
分類: 仕事効率化,ユーティリティ
価格: ￥300 (Sociomedia)



参考にしたサイト
初心に戻るTextwellアクションの作り方 ActionMaker(オフ版) - W&R : Jazzと読書の日々









iOS版GoogleドキュメントとGoogleスプレッドシートのURLスキーム

2014-05-02 | iPhone5
iOS版のGoogleドキュメントとGoogleスプレッドシートのアプリがリリースされました。それぞれのURLスキームは

Googleドキュメント

googledocs:


Googleスプレッドシート

googlesheets:


でした。
Google ドキュメント 1.0.0
分類: 仕事効率化,ビジネス
価格: 無料 (Google, Inc.)

Google スプレッドシート 1.0.0
分類: 仕事効率化,ビジネス
価格: 無料 (Google, Inc.)

私は仕事用と個人のアカウントを使い分けているので、
Googleドライブとは別のアカウントでログインしたままにできるのが便利ですね。