未知採集リスト – ウォッチするべし!

久しぶりのFFXIVの投稿!!
いやー久しぶりだ~w

未知採集リスト - ウォッチするべし!

今年の Pikaboo Miller は、クラフター、ギャザラーを頑張っております!
今更!!!?wwwww と、笑われてしまいそうですが、いいんです!

割と効率を無視して、時間をかけてのんびりとチャットを楽しみつつ、作ったものを友達にあげつつ、
クラフター、ギャザラー全職を均等に上げてきましたが、ついにレベル50に到達しました!

ギャザラーが45を差し掛かったあたりから、「未知の採集」というスキルが付きました。
これ、未知の採集ポイントは、出現する時間が、エオルゼア時間で毎日同じ時刻に出現するんですね!

面白かったので、音で採集ポイントの出現を知らせてくれるブラウザアプリを作りました!

ウォッチするべし! 未知採集リスト

ffxiv_20161103_160051_trim

是非お試しくださ~い!

radio や checkbox のカスタマイズ

radio checkbox のカスタマイズ

フォームを作るとき、

といった具合いでHTMLを書くのは普通ですが、ちょっと見た目がね~と思うことがあります。
これを、ちょっとだけ工夫することで、いい感じにカスタマイズできるので共有します。

手順(考え方)

便宜上、radiocheckbox を、ここでは「選択要素」と呼びたいと思います。

  • 選択要素は非表示にする( style="display: none" )
  • 各選択要素に対応した button またはお好みのHTML要素を配置する( ここでは button を使います )
  • button が押されたら、非表示にしてある選択要素が選択されるよう JavaScript を書く

と言った感じです。

選択要素は非表示にする

手順に沿って、試しにラジオボタン3つを作ることを例にコードを書きます。

スタイル定義

HTML

これで姿の見えないラジオボタンが3つ配置されます。

各選択要素に対応した button を配置する

ラジオボタンの代わりに表示させるボタンをHTMLに追加します。

class="custom-button" は、色々と装飾を施すためにつけておきます。

続いて、ラジオボタンの代わりに表示させるボタンを、ちょっといい感じに装飾するスタイルを書きます。
飽くまでも例なので、装飾方法は自由にどうぞ。

スタイル定義

  • .custom-button は、ボタンそのもののスタイル。
  • .custom-button:hover は、マウスオーバーしたときのボタンのスタイル。
  • .custom-radio:checked + .custom-button は、非表示にしてあるラジオボタンのうち、選択された状態になっているラジオボタンの隣に配置したボタンのスタイル。

ボタンが押されたらラジオボタンがクリックされるJavaScript

最後に、JavaScript です。コードの簡略化の為に jQuery を使います。
ボタンが押下されたときのイベントを登録するコードを書きます。

これでおしまいです。

ソースコード

全体のソースコードを以下に。
また、これで作ったお試しページを こちら に。

ラジオボタンは非表示ですが、ちゃんとそこにあるので、form タグでくくって普通に submit も出来ます。
.custom-radio:checked + .custom-button:beforeFontAwesome のフォントアイコンを指定して、
選択された状態のボタンだけ、先頭にアイコンが表示されるようにも出来ちゃいます。

ポイントは、ラジオボタンは非表示であることと、それぞれと対になる表示用のオシャレな要素を追加すること。
あとは、そのオシャレ要素がクリックされたとき、同時に非表示のラジオボタンが選択されるようJavaScriptを作っておくことです。

Seasar2 urlPatternで受けたリクエストが文字化けしてしまう

もう、これでハマったのが3回目なので、さすがにメモです・・・。

Seasar2 で urlPattern で取得したパラメータが文字化け

このようなアクションに対し、

http://localhost:8080/site/page/にほんごにほんご

というURLでアクセスすると、
title には "にほんごにほんご" という文字列が取れることが期待されるが、
無惨な文字化けを起こして撃沈する。

過去、2回これにブチあたったのに、今回3回目に再び激突。

ここを見るとばっちりです。

文字化け対策

Tomcat の server.xml に

を入れればOK

VirtualBox ゲストOSが起動しないことへの対処

VirtualBoxのゲストOSが起動しないという事象が発生したのでどういうことだと思い、調べました。

発生事象

Windows VirtualBoxでゲストOSを起動しようとすると、以下のようなダイアログボックスが表示される。

対処

Google検索したら、ドンピシャ当てはまる記事を発見。

VirtualBoxのゲストがタイムアウトする

原因は、Avira AntiVirus でした。
私も使っています。

Avira AntiVirus 設定

[Manage Devices]→[構成]→[全般]→[セキュリティ]→[製品の保護]
チェックボックスを全て外す。

デバイスの無効化

[コントロールパネル]→["デバイス" で検索]→[デバイスマネージャー]
[表示]メニュー→[非表示のデバイスの表示]→[プラグ アンド プレイではないドライバー]→[avipbb]のプロパティ→[ドライバー]→[種類]=無効→[OK]

PC再起動

SVG image の角を丸める

概要

HTML では、選択したDOM要素に対し、CSSborder-radius: XXpx; とすれば、対象の角を丸めることが可能です。
SVG でも、rect 要素の rxry を指定すると css の定義と同じように角を丸めることができます。
ただ、今後見直されるかもしれませんが、image 要素には rxry オプションが使用できないようです。
やりたいのは image 要素の角を丸めること。

HTML の場合

HTMLDOM 要素の角を丸めることは、CSS で定義可能です。
pikaboo

SVG の場合

rect を丸める

rect 要素の角を丸める方法は、以下の通り、オプションでサポートされています。

imageを丸める

今の所、一番楽かな?と思うのは clipPath を使用して、角の丸まった rect でクリッピングすることですかね。
他にもっといい方法を見つけたらアップデートしたいと思います。

AviUtil テキストタイマー

AviUtilでテキストタイマーを付ける

やりたいこと

動画中に、あるところからあるところまでのタイムが表示されるようにしたい。

やりかた

  1. テキストオブジェクトを表示したい開始位置と終了位置に配置
  2. テキストに以下の文字列を貼り付ける
    <?a=0.0 ot=(obj.time+a) mes(string.format("%02d:%02d:%02d",ot/60,ot%60,(ot*100)%100))?>
  3. 以上、終了。

仕組み

どうやら、テキストオブジェクトに表示する文字列をスクリプトで整形できるようです。 ※ スペース区切りなんですね・・・。
つくづく思いますが、AviUtilは本当に素晴らしいソフトです。

変数定義

最初に、a=0.0ot=(obj.time+a) としているのは、変数定義のようです。
a ot は任意に決めた変数。

テキストオブジェクト

obj は、自身(テキストオブジェクト自体)を指しているのでしょうか。
中には time というフィールドがあって、それがオブジェクト内の現在のタイムのことなのでしょう。

つまり、a はタイマーのオフセットですね。

mes メソッド

変数定義の後、スペース(または改行区切り)で mes(String) メソッドを実行しています。
これが、テキストオブジェクトに「メッセージを表示させろ!」という機能を持っているんでしょうね。

引数には、string.format(String, ...) を渡しています。
Java言語でも見覚えがありますね。
第1引数はテキストのフォーマット。第2引数以降は配列でしょうか。
テキストフォーマットの代入子に代入する値を定義しているようです。

第2引数 分 ot を60で割った解
第3引数 秒 ot を60で割った余り
第4引数 1/100秒 ot を100倍し、100で割った余り

つまり、obj.time の単位は「秒」なんですね。

いやーホントに便利です。
フリーの動画編集ツールとしては AviUtil ホントにオススメです。

GoogleニュースをJSONで得る

目的

自分の好みの仕様にフィルタリングしたGoogleニュースを JSON 形式で取得したい。
jQuery を多用する開発者であれば XML 形式の RSS 形式よりも JSON 形式で取りたいですよね。

いい方法があったのでご提案です。

参考にした資料

GoogleニュースのRSSを取得する方法
RSSフィードをJSONとして受け取る方法~Google Feed APIの応用

Googleニュースを自分仕様にフィルタして得る

GoogleニュースのRSSを取得する方法 を参考にさせて頂きました。
リンク先のブログそのままの内容ですが、こちらにも記載させて頂きます。
要するに、Googleニュースを自分仕様にフィルタして RSS または ATOM 形式で入手します。
以下の APIGET リクエストを送信すると得られます。

URL

http://news.google.com/news

パラメータ

keyvalue備考
hlja言語を指定するパラメータのようです。
日本語の記事が欲しいので、ja と指定。
nedusどの国のニュースか。
参考にしたサイトでは、なぜか us と設定していますが、日本のニュースが取れています。
(理由は分かりませんが、jp と指定するとエラーとなってしまうので、参照先記事を踏襲します)
ieUTF-8INPUT ENCODEING の略なんでしょうか。
元の記事のエンコードを指定すると予想します。
UTF-8 が主流なのでこれで良いと思います。
oeUTF-8OUTPUT ENCODING の略なんでしょうか。
取得するRSSまたはATOMデータのエンコードを指定するようです。
これも UTF-8 を指定します。
outputrss|atomrssatom のどちらかを指定します。
topic
irピックアップ
y社会
w国際
bビジネス
p政治
eエンタメ
sスポーツ
tテクノロジー
po話題のニュース
指定してもしなくてもいいようです。
Googleニュースにあるトピックに絞れるようです。
ただ、q (キーワード)との併用はできないようです。
q{キーワード}指定したキーワードを含むニュースに絞ってくれます。
ただ、topic との併用はできないようです。

取得例

上記のパラメータを実際に設定したURLの例を以下に。

トピック="スポーツ" の記事のRSSを取得する

http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&topic=s

"長友" というキーワードで絞った記事のRSSを取得する

http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&q=長友

RSS形式のXMLをJSONで取得する方法

RSSフィードをJSONとして受け取る方法~Google Feed APIの応用 を参考にさせて頂きました。
まさにタイトルの通りのことが出来てしまいます。
ただ、GoogleニュースのRSSを取得する際のURLに &? が含まれていて、少し特殊な為、普通に参考サイトの通りに行なってもうまくいきません。

当記事の価値はここにあります。

APIの使い方

参考サイトでは、こうあります。
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q={RSSフィードのURL}&num={取得したい記事数}

この通り、上記の長友のニュースに絞ったRSSを取得するURLを埋め込むと、

https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&q=長友&num=-1

となります。
ただ、このURLでリクエストすると、

{"responseData": null, "responseDetails": "Feed could not be loaded.", "responseStatus": 400}

が返されてしまいます。

URL内に q パラメータが2つあることも原因の1つかもしれません。
URLの規則上、& が リクエストパラメータの区切り文字になっていますが、引数の中にも & が含まれているため、API側がURLのパースに失敗しているのだと思います。

そこで登場するのが、「短縮URL」です。
Google が提供する Google URL Shortener を使えばいいんです!

Google URL Shortener

https://goo.gl/ にアクセスしてみて下さい。

Paste your long URL here と書かれているところに、長友ニュースを取得するためのURLを貼り付けて、Shorten URL と書かれたボタンをクリックします。

すると、URLが短縮された文字列が生成されるので、これを使えばいいのです。

XMLRSS でもいいのですが、(私は)断然 JSON 形式のほうが扱い易いので記事として紹介でした。


JavaFX でデスクトップアプリを作る!

前提

Scene Builder を使って作る方法もあるのですが、まずはコードだけで作ってみようと思います。

コード

Formを表示するために必要なコードは、たったこれだけでした。

javafx.application.Application を継承しておきます。
start(Stage stage) メソッドだけ実装が必要です。
Application クラスに備わっている launchmain で実行すれば、
start が呼ばれて、アプリケーションの Window が表示されます。

JavaFX UI Controls

UI制御については JavaFX UI Controls に書かれていることを中心に勉強していこうと思います。

Windows環境 Javaで存在するドライブレター取得

こちらのブログ記事の内容そのままです。

プログラマーの雑記帳
http://programmer-toy-box.sblo.jp/article/9919455.html

少し用事があったので記事を探していたらドンピシャ。

Windowsだと、ディスクパーティションを複数に分けていたり、接続しているストレージ機器にドライブレターをマウントするのですが、取得方法はないかなと思って行き着きました。
簡潔で素晴らしい記事だったのでブックマークついでに自身のメモとしても記載。

HerokuでJavaによるWebアプリケーション公開

Javaで開発したWebアプリケーションを外部公開できるサイトが少ない中、Herokuというサービスは普通にJavaに対応していました。
早速試した結果、これはかなり便利そうだ、ということで自分のメモを兼ねてここに記載します。

Herokuアカウントの作成

Herokuにアカウントを作成しました。
Gmailアドレスをそのまま普通に使用可能です。

Getting startedを進める

Java8(JDK)のインストール

凄いですね。Javaに対応しているだけでも素晴らしいのに、Java8に対応している(というか制限している)点も素晴らしい。

Maven3のインストール

私が試している現在はMaven3.3.3なので、以下のURLでダウンロード。
http://archive.apache.org/dist/maven/maven-3/3.3.3/binaries/
ダウンロードしたファイルは
apache-maven-3.3.3-bin.zip

  • JAVA_HOME をJDK8インストール先に変更
  • PATH にMaven3.3.3解凍先のbinフォルダを追加

mvn --version
で動作確認。

Heroku Toolbeltインストール

Herokuのコマンドラインツールらしいです。
Windows Installerがダウンロードできるので、そのままインストール。
パワーシェルでも動かせるらしいですね。これも素晴らしい。

Getting started によると、heroku login でログインするそうです。
私の場合、初回実行で以下のように表示されました。
何かアップデートがあったんですかね。

簡単なアプリケーションの準備

なんと、上記の手続きで使えるようになったのか、もともといつの間にかGitコマンドをインストールしていたのか、普通にGitコマンドが使えるようになっています。

クローンできました。
HerokuのGet startedで準備してくれていたサンプルプロジェクトは pom.xml でできていました。

ローカルGitをリモート(Heroku)側に作成?

heroku create を実行すると、ローカルGitリポジトリをHerokuサーバ側に作成してくれる(のか?)。
このケースでは、アプリケーション名を任意のランダムな名前に設定してくれるようです。
下記のケースでは、sleepy-basin-5991 がそうかな?

アプリケーション名はこちらが指定することもできるようです。
heroku create {アプリケーション名}
といった具合いで。今度、試してみます。

デプロイ

そして、ローカルのアプリケーションをリモートにデプロイします。

master ブランチをherokuにpushすることでデプロイするようですね。
標準出力がワシャワシャ出ちゃったので記録できませんでした。割愛。

インスタンスを1つに制限

Getting startedに書いてあったこと、そのままですが、インスタンスを1つに制限するコマンドを実行しておきます。

デプロイされたWebアプリケーションを確認する

URL分からないな・・・と思っていたら、コマンドでアクセスできるんですね。便利。

※ このブログをごらん頂いている時には既に撤去しているかもしれませんが、
以下のようなページが表示されます。

https://sleepy-basin-5991.herokuapp.com/

Getting started で謳っていた通り、数分の作業ですね。これは。
とんでもないサービスを見つけてしまった。