Fastnote Plus の OAuth 認証に関する不具合を修正

Fastnote Plus の OAuth による認証の不具合を解消したバージョンをアップしました。
(結局のところ、原因は不明で使用している OAuth ライブラリを変更して対応してあります。)


GW中に修正と言っていたのですが、諸々ありまして遅れてしまいました。
大変お待たせして申し訳ありませんでした。


更新版は以前の日記からでもダウンロードできますが、一応、こちらにもダウンロード先 URL を記載しておきます。

http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/120930/fp00.png

ダウンロード
ダウンロードできない場合はこちら


注意点としては、lib フォルダ以下に一つ DLL が増えていますので、exe のみの上書きでは正常に動作しません。
ノートなどの設定については settings.config に保存されていますので、こちらだけを最新版のパッケージと差し替えた上でご利用ください。

Fastnoteに関するお知らせ

Fastnoteに関するお知らせです。


ニュースサイトなどにも取り上げられていますので、
もうご存知の方もいらっしゃるかもしれませんが
現在、Evernote 全ユーザーを対象にパスワードリセットが実施されています。


Evernote 日本語版ブログ
米Evernoteがハッキング被害で全ユーザーのパスワードをリセット -INTERNET Watch Watch


この影響で、アプリケーションの OAUTH 認証もリセットされているようです。
突然、投稿ができなくなった!という方は、このリセットが影響しているものと思われますので、ご確認のうえもう一度 OAUTH 認証の実行をお願いいたしますm(_ _)m

新しいFastnoteの機能解説

公開した新バージョンのFastnoteですが、いくつか新機能を追加しています。
まだまだテスト不足な感じが否めない新機能たちですが、
とりあえず解説を書いてみたいと思います。

http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/120930/fp00.png
ダウンロード
ダウンロードできない場合はこちら

EXEのみダウンロード(アップデート用)*1
ダウンロードできない場合はこちら

リッチテキストによる文字の装飾

新しいFastnoteでは簡易的な文字の装飾ができるようになりました。
「その他」にあるこの項目です。
この機能をONにすると、リッチテキストを使った簡単な文字の装飾ができるようになります。
http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/121006/fp_setting_r.png


http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/121006/rich.png

UIボタンの並びなどは、Evernote Webのものを参考にしています。
文字のサイズなども含め、この見た目のままEvernoteに投稿されますので
直感的に扱えるのではないかと思います。

Markdown記法 への対応について

「その他」にあるこの項目を Markdown に変更。

http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/121006/fp_setting.png


この機能をONにすると、入力した本文が Markdown記法 に従って装飾されます。
といっても 何のことだか?って感じだと思いますので、以下で機能を試してみます。


まず、こんな感じで文章を書いて投稿。
http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/121006/markdown.png


すると、このように装飾された状態で文章が投稿されます。
http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/121006/fp_markdownpreview.png
(クリックで元のサイズの画像が見れます)


こちらの装飾方法だと、慣れればキーボードのみでさっと書くことが出来ますし、個人的にはオススメの機能です。


Markdown記法の基本的な書き方を表にしました。

装飾方法 Markdown記法での書き方
太字 **これは太字です**
太字 __これも太字です__
斜体(イタリック体) *イタリック体です*
斜体(イタリック体) _イタリック体です_
見出し表記1(HTMLで言うH1と同等です) # 見出し1
見出し表記2(HTMLで言うH2と同等です) ## 見出し2
見出し表記3(HTMLで言うH3と同等です) ### 見出し3
水平線 ***
水平線 *****
水平線 - - -
リンク [リンクテキスト](URL)
リスト表記 * これでリストになります
リスト表記 + これでもOK
リスト表記 - これでもOK
数字付きリスト表記 1. リスト(数字付き)
数字付きリスト表記 2. リスト
チェックボックス [] チェックボックスになります
チェック済みチェックボックス [!] チェック済みになります

見出し、リスト、チェックボックスなど、変換記号の後に1つ以上の半角スペースがないと変換されないのでご注意を。


うーん、表にしてもわかりにくかった(笑)

他に見やすく解説しているサイトもありますので、参考にしてください。
Markdown記法 チートシート - Qiita


今回はとりあえず文字装飾の部分について、簡単に解説してみました。
「こういう装飾/書き方をしたら投稿に失敗する」などの不具合はありそうな気がしています;
そういった不具合がありましたら、お手数ですがコメント等で報せていただけるとうれしいです。

また、機能に関するリクエストも受け付けていますので、何かありましたらコメントをお願いします!

不具合の修正情報

2012/11/17
・リッチテキストモードで「一行目をノートにする」が失敗してしまう不具合を修正
・Proxyの設定が正しく出来なかった不具合を修正
(トランクェーバーさん、futtyさんご報告ありがとうございました)

機能の追加情報

2012/12/02
IMEを自動的にONにする設定を追加
・アプリケーションを二重起動させずに、既存のウィンドウをアクティブにする設定を追加

*1:すでにFastnotePlusをご利用中の方は、こちらのexeを上書きしてもらえれば最新の状態となります

Fastnoteをバージョンアップしました。

http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/120930/fp00.png
ダウンロード
ダウンロードできない場合はこちら

バージョンアップと言いつつ、実は一から作り直していたり…。
新しくなって変わった点は以下の通りです。

  • OAuth認証への対応
  • Proxyへの対応(お待たせしてすみません!)
  • 設定ファイルを実行ファイルと同じフォルダに保存するように変更(USBメモリなどからの利用が可能)


他にも色々と機能は増やしてみたのですが、
ちょっとテスト不足なので詳しい解説はまた別記事に。
新しいFastnoteの機能解説 - valinstの日記


増えた機能に関して初期状態では全部OFFになっていますので、
以前のバージョンからご利用になっている方も違和感なく使用できると思います。


[追記]
前バージョンの Fastnote の認証方式は10月いっぱいまで利用できるそうです。
今月中が移行期間になりそうですので、また適当なタイミングでの移行をお願いします。
(新バージョンはまだ修正すべき所がありそうですし、10月末くらいの移行がいいかもしれません^^;)

ホーム画面上を走るマリオのマスコットを作りました。

http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/120909/mario00.png

ダウンロード

Windows「タスクバー上を走るマリオ」のデスクトップマスコットを作りました - valinstの日記でやっていたのと同じように画面上を左から右に向かって走っていきます。
http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/120909/mario01.png


ホーム画面上でも走ります。
http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/120909/mario02.png


進行方向の反対の画面端をタップするとターンします。
それ以外の場所をタップするとジャンプします(うっとうしい)
http://www.zd.ztv.ne.jp/h64qh2pq/pictures/blog/120909/mario03.png


対応機種は 2.2 以降のAndroidです…が、実は Android 4.* 以降の端末で動作させるとジャンプやターンの操作ができなくなっています。
これは4.0(ICS)以降でオーバーレイ表示の仕様が変更されたためで、バックグラウンドで動作しているサービスはタッチイベントを(簡単には?)取得できなくなりました。


「FLAG_WATCH_OUTSIDE_TOUCH ICS」 とか 「FLAG_WATCH_OUTSIDE_TOUCH 4.0」でぐぐるとそれらに関する情報がいくつかでてきます。

android - TYPE_SYSTEM_OVERLAY detect touches in ICS - Stack Overflow


そりゃ裏で動いているアプリが簡単にタッチイベントを捕まえられるって状況はセキュリティ的にどうなの?って話になりますよね。

しかし、例えばhttps://play.google.com/store/apps/details?id=mobi.conduction.swipepad.androidとかICS以降でもタッチイベントを拾えてるアプリもあったり…。
なにやらハックすれば動作させられるってことなんでしょうかね;


自分が持っているのが Android 4.0 の端末ってこともあって、何か回避策を知りたいのですが。
うーん……。

Fastnoteに関するお知らせ

Fastnoteをご利用いただいている皆様にお知らせです。


Evernote APIの仕様変更で、現在、Fastnoteで対応している認証方法が使用できなくなります。
OAuth認証 への対応が必須になりました。)


OAuth 認証というのは Twitterクライアントソフトなんかでよくある、いったんサイトにアクセスしてもらって、そのアプリの利用を許可してもらうというやつです。
(個人的には、OAuth 認証は面倒くさいので好きじゃないのですが;
まぁセキュリティ面から考えると安全ですからね)


Evernote社からのメールによると、9月中には OAuth 認証に移行して欲しいということでしたので、
それを過ぎると、正しいID、パスワードを入力していても認証部分ではじかれてしまうかもしれません。


次のバージョンでは OAuth 認証への対応とあわせ、プロキシの対応なども行います。
(プロキシの対応、お待たせしてすみませんでした;)


新バージョンはできるだけ早く(9月中には)公開する予定です!
よろしくおねがいします。

jQuery Mobileで「はてなハイクビューアー」を作りました。

はてなハイクビューアー
Firefoxで見た場合のイメージ
http://gamedev.vs.land.to/hatena/screenshot/hatenahaikuviewer00.png


いきなりのタイトル詐欺なんですが、jQuery Mobileを触るのは初めてだったので、
あくまで習作という感じです。
まだまだビューアーとしての実用的なツールには遠い…。

作っていて引っかかった部分をTips的に書いていきます。

Web APIはてなハイクAPI)の呼び出し

$.ajax({
	url : "http://h.hatena.ne.jp/api/statuses/public_timeline.json",
	data : {
		format : 'json'
	},
	dataType : 'jsonp',
	jsonp : 'callback',
	complete : function(){
		alert("complete!");
	},
	success : function(data, status){
		alert(data);
	}
});

JavaScriptでは異なるドメインのURLを直接呼び出すことが出来ませんが、
JSONPで記述することでクロスドメインな通信が行えます。
(なんで?って方はこちらとかを参考にしてください。
第11回 JSONP入門:これでできる! クロスブラウザJavaScript入門|gihyo.jp … 技術評論社
この例では、dataの中にJSON形式ではてなハイク投稿データが入ります。

Listviewのテキストを省略せずに表示する

デフォルトの設定では画面に入りきらなかった部分は、以下のように↓
http://gamedev.vs.land.to/hatena/screenshot/hatenahaikuviewer01.png
…に置き換えられてしまいます。

この表示では今回のような用途に使う場合に向いていないので、
以下のように書きます。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<style type="text/css">
/* CSSを読み込んだ後に記述して(上書き)して、
Listviewのテキストを省略せずに表示するように設定 */
.ui-li-desc
{
	overflow: visible;
	white-space: normal;
}
</style>

これでちゃんと省略されずに表示されるようになります。
http://gamedev.vs.land.to/hatena/screenshot/hatenahaikuviewer02.png

Listviewのサムネイル画像のサイズ・位置を変更する

こちらもCSSを書き換えることで実装できます。
もともとのCSSを書き換えてもいいですが、以下のようにすると
その要素だけに設定を適用できます。

<ul data-role="listview">
<li><img src="icon.jpg" style="width:50px;height:50px;
	max-width:80px;max-height:80px;top:2;left:4;" class="ui-li-icon"></li>
</ul>

最上部・最下部へのスクロールを実装する

// ボタンイベント
$('#up').live('click', function(){
	// 最上部へのスクロール
	$.mobile.silentScroll(-$.mobile.activePage.context.height);
});
// ボタンイベント
$('#down').live('click', function(){
	// 最下部へのスクロール
	$.mobile.silentScroll($.mobile.activePage.context.height);
});

iPhoneでは、バーをタッチすれば最上部へスクロールするので別に不要という気も…。

ラジオボックスを動的に作成する

// dataははてなハイク投稿のJSONオブジェクトです。
var content = '<div data-role="controlgroup">';
for(var i in data) {
	// <!> ここで指定する name 要素を一致させないとチェックボックスのような動作になるので注意
	content += '<input type="radio" name="recommend_users_radio' + 
				'" id="recommend_users_' + i + '" value="' + data[i].user.id + '"/>';
	content += '<label for="recommend_users_' + i +'">' + data[i].user.name + '</label>';
}
content += '</div>';
$("#recommend_users").empty().append(content).trigger("create");

ラジオボックスの選択イベントを拾う

$("input[name='recommend_users_radio']").live("change", function(event, ui) {
	// これで選択された value の値がとれます
	var select = $(this).val();
	alert(select);
});

jQuery Mobileのボタンでアイコンのみを表示したい

<!-- アイコンのみ表示したい時はdata-iconpos="notext"とする -->
<a href="#" id="down" data-icon="arrow-d" class="ui-btn-left" data-iconpos="notext"></a>

ボタンイベントの発火(発行?)

// テストボタン
<a href="#" id="test" data-role="button">Test</a>
// id名 + clickでOK。直感的!
$("#test").click();

子要素をすべて削除する

jQuery Mobileなしでは以下のように書けそうですが

function clearChildAll(element) {
	while(element.firstChild){
		element.removeChild(element.firstChild);
	}
}
var element document.getElementById('timeline');
clearChildAll(element);


jQuery MobileではこれでOK

$("#timeline").empty();

要素の表示/非表示を切り替える

今回作ったビューアーでは、タイムラインを表示するページは
1つだけなので、ナビゲーションバーのボタンが押されて
必要になったタイミングで各要素の表示/非表示を切り替えています。

<div id="search_keyword_field">
	<input type="search" name="search_keyword" id="search_keyword" value="" data-mini="true"/> 
	<div id="users_collapsible" data-role="collapsible" data-mini="true">
		<h3>おすすめキーワード</h3> 
		...
	</div> 
</div>
// 簡単便利!
// 表示
$("#search_keyword_field").show();
// 非表示
$("#search_keyword_field").hide();

今回、はじめてjQuery Mobileを触って、
へーと思うことがかなりたくさんあった気がするのですが
Tips的に列挙してみると結構少なかったですね;
また思い出したら追記していきます。