久しぶりのFFXIVの投稿！！
いやー久しぶりだ～ｗ
今年の Pikaboo Miller は、クラフター、ギャザラーを頑張っております！
今更！！！？ｗｗｗｗｗ と、笑われてしまいそうですが、いいんです！
割と効率を無視して、時間をかけてのんびりとチャットを楽しみつつ、作ったものを友達にあげつつ、
クラフター、ギャザラー全職を均等に上げてきましたが、ついにレベル50に到達しました！
ギャザラーが45を差し掛かったあたりから、「未知の採集」というスキルが付きました。
これ、未知の採集ポイントは、出現する時間が、エオルゼア時間で毎日同じ時刻に出現するんですね！
面白かったので、音で採集ポイントの出現を知らせてくれるブラウザアプリを作りました！
是非お試しくださ～い！
フォームを作るとき、
|
1 |
<label><input type="radio" name="somename"> ラジオボタン</label> |
といった具合いでHTMLを書くのは普通ですが、ちょっと見た目がね～と思うことがあります。
これを、ちょっとだけ工夫することで、いい感じにカスタマイズできるので共有します。
便宜上、radio や checkbox を、ここでは「選択要素」と呼びたいと思います。
style="display: none" )button またはお好みのHTML要素を配置する( ここでは button を使います )button が押されたら、非表示にしてある選択要素が選択されるよう JavaScript を書くと言った感じです。
手順に沿って、試しにラジオボタン3つを作ることを例にコードを書きます。
スタイル定義
|
1 2 3 |
.custom-radio { display: none; } |
HTML
|
1 2 3 |
<input type="radio" class="custom-radio" name="somename" value="1"> <input type="radio" class="custom-radio" name="somename" value="2"> <input type="radio" class="custom-radio" name="somename" value="3"> |
これで姿の見えないラジオボタンが3つ配置されます。
ラジオボタンの代わりに表示させるボタンをHTMLに追加します。
|
1 2 3 4 5 6 7 8 |
<input type="radio" class="custom-radio" name="somename" value="1"> <button class="custom-button">ラジオボタン1</button> <input type="radio" class="custom-radio" name="somename" value="2"> <button class="custom-button">ラジオボタン2</button> <input type="radio" class="custom-radio" name="somename" value="3"> <button class="custom-button">ラジオボタン3</button> |
class="custom-button" は、色々と装飾を施すためにつけておきます。
続いて、ラジオボタンの代わりに表示させるボタンを、ちょっといい感じに装飾するスタイルを書きます。
飽くまでも例なので、装飾方法は自由にどうぞ。
スタイル定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* ボタンの形状 */ .custom-button { background-color: #fff; /* ボタンの色 */ border: 1px solid #ddd; /* 枠線 */ border-radius: 4px; /* 角に丸みを */ } /* ボタン上をホバーしたときの装飾 */ .custom-button:hover { background-color: #eee; /* ボタンの色 */ } /* ボタンに対応するラジオボタンが選択されている場合のボタンの装飾 */ .custom-radio:checked + .custom-button { background-color: #8f8; /* ボタンの色 */ } |
.custom-button は、ボタンそのもののスタイル。.custom-button:hover は、マウスオーバーしたときのボタンのスタイル。.custom-radio:checked + .custom-button は、非表示にしてあるラジオボタンのうち、選択された状態になっているラジオボタンの隣に配置したボタンのスタイル。最後に、JavaScript です。コードの簡略化の為に jQuery を使います。
ボタンが押下されたときのイベントを登録するコードを書きます。
|
1 2 3 4 |
$(".custom-button").click(function() { // 1つ前の要素をクリック $(this).prev().click(); }); |
これでおしまいです。
全体のソースコードを以下に。
また、これで作ったお試しページを こちら に。
ラジオボタンは非表示ですが、ちゃんとそこにあるので、form タグでくくって普通に submit も出来ます。
.custom-radio:checked + .custom-button:before に FontAwesome のフォントアイコンを指定して、
選択された状態のボタンだけ、先頭にアイコンが表示されるようにも出来ちゃいます。
ポイントは、ラジオボタンは非表示であることと、それぞれと対になる表示用のオシャレな要素を追加すること。
あとは、そのオシャレ要素がクリックされたとき、同時に非表示のラジオボタンが選択されるようJavaScriptを作っておくことです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> /* ラジオボタンは非表示に */ .custom-radio { display: none; } /* ボタンの形状 */ .custom-button { background-color: #fff; /* ボタンの色 */ border: 1px solid #ddd; /* 枠線 */ border-radius: 4px; /* 角に丸みを */ } /* ボタン上をホバーしたときの装飾 */ .custom-button:hover { background-color: #eee; /* ボタンの色 */ } /* ボタンに対応するラジオボタンが選択されている場合のボタンの装飾 */ .custom-radio:checked + .custom-button { background-color: #8f8; /* ボタンの色 */ } </style> </head> <body> <input type="radio" class="custom-radio" name="somename" value="1"> <button class="custom-button">ラジオボタン1</button> <input type="radio" class="custom-radio" name="somename" value="2"> <button class="custom-button">ラジオボタン2</button> <input type="radio" class="custom-radio" name="somename" value="3"> <button class="custom-button">ラジオボタン3</button> <script src="path/to/jquery"></script> <script> $(function() { $(".custom-button").click(function() { // 1つ前の要素をクリック $(this).prev().click(); }); }); </script> </body> </html> |
もう、これでハマったのが３回目なので、さすがにメモです・・・。
|
1 2 3 4 5 6 7 |
public String title; @Execute(validator=false, urlPattern="page/{title}") public String index() { System.out.println(title); return "index.jsp"; } |
このようなアクションに対し、
http://localhost:8080/site/page/にほんごにほんご
というURLでアクセスすると、
title には "にほんごにほんご" という文字列が取れることが期待されるが、
無惨な文字化けを起こして撃沈する。
過去、２回これにブチあたったのに、今回３回目に再び激突。
ここを見るとばっちりです。
Tomcat の server.xml に
|
1 |
<Connector ... URIEncoding="UTF-8"/> |
を入れればOK
VirtualBoxのゲストOSが起動しないという事象が発生したのでどういうことだと思い、調べました。
Windows VirtualBoxでゲストOSを起動しようとすると、以下のようなダイアログボックスが表示される。
|
1 2 3 4 5 6 7 8 9 10 |
--------------------------- VirtualBox - Error In supR3HardNtChildWaitFor --------------------------- <html><b>Timed out after 60001 ms waiting for child request #1 (CloseEvents).<br> (rc=258)</b><br/><br/><br><br><!--EOM-->where: supR3HardNtChildWaitFor what: 5 Unknown Status 258 (0x102) (258) - Unknown Status 258 (0x102) </html> --------------------------- OK --------------------------- |
Google検索したら、ドンピシャ当てはまる記事を発見。
原因は、Avira AntiVirus でした。
私も使っています。
[Manage Devices]→[構成]→[全般]→[セキュリティ]→[製品の保護]
チェックボックスを全て外す。
[コントロールパネル]→["デバイス" で検索]→[デバイスマネージャー]
[表示]メニュー→[非表示のデバイスの表示]→[プラグ アンド プレイではないドライバー]→[avipbb]のプロパティ→[ドライバー]→[種類]=無効→[OK]
PC再起動
HTML では、選択したDOM要素に対し、CSS で border-radius: XXpx; とすれば、対象の角を丸めることが可能です。
SVG でも、rect 要素の rx、ry を指定すると css の定義と同じように角を丸めることができます。
ただ、今後見直されるかもしれませんが、image 要素には rx、ry オプションが使用できないようです。
やりたいのは image 要素の角を丸めること。
HTML で DOM 要素の角を丸めることは、CSS で定義可能です。
|
1 2 |
<img src="imagefile" style="width: 150px; border-radius: 10px;" /> |
rect 要素の角を丸める方法は、以下の通り、オプションでサポートされています。
|
1 2 3 |
<svg width="100" height="100"> <rect width="100" height="100" x="0" y="0" rx="10" fill="black"/> </svg> |
今の所、一番楽かな？と思うのは clipPath を使用して、角の丸まった rect でクリッピングすることですかね。
他にもっといい方法を見つけたらアップデートしたいと思います。
|
1 2 3 4 5 6 7 8 |
<svg width="150" height="205"> <defs> <clipPath id="clip-path"> <rect width="150" height="205" x="0" y="0" rx="10" /> </clipPath> </defs> <image clip-path="url(#clip-path)" width="150" height="205" x="0" y="0" xlink:href="imagefile" /> </svg> |
動画中に、あるところからあるところまでのタイムが表示されるようにしたい。
<?a=0.0 ot=(obj.time+a) mes(string.format("%02d:%02d:%02d",ot/60,ot%60,(ot*100)%100))?>どうやら、テキストオブジェクトに表示する文字列をスクリプトで整形できるようです。 ※ スペース区切りなんですね・・・。
つくづく思いますが、AviUtilは本当に素晴らしいソフトです。
最初に、a=0.0 と ot=(obj.time+a) としているのは、変数定義のようです。
a ot は任意に決めた変数。
obj は、自身（テキストオブジェクト自体）を指しているのでしょうか。
中には time というフィールドがあって、それがオブジェクト内の現在のタイムのことなのでしょう。
つまり、a はタイマーのオフセットですね。
変数定義の後、スペース（または改行区切り）で 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 形式で取得したい。
jQuery を多用する開発者であれば XML 形式の RSS 形式よりも JSON 形式で取りたいですよね。
いい方法があったのでご提案です。
| GoogleニュースのRSSを取得する方法 |
| RSSフィードをJSONとして受け取る方法～Google Feed APIの応用 |
GoogleニュースのRSSを取得する方法 を参考にさせて頂きました。
リンク先のブログそのままの内容ですが、こちらにも記載させて頂きます。
要するに、Googleニュースを自分仕様にフィルタして RSS または ATOM 形式で入手します。
以下の API に GET リクエストを送信すると得られます。
http://news.google.com/news
| key | value | 備考 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| hl | ja | 言語を指定するパラメータのようです。 日本語の記事が欲しいので、 ja と指定。 | ||||||||||||||||||
| ned | us | どの国のニュースか。 参考にしたサイトでは、なぜか us と設定していますが、日本のニュースが取れています。（理由は分かりませんが、 jp と指定するとエラーとなってしまうので、参照先記事を踏襲します） | ||||||||||||||||||
| ie | UTF-8 | INPUT ENCODEING の略なんでしょうか。 元の記事のエンコードを指定すると予想します。 UTF-8 が主流なのでこれで良いと思います。 | ||||||||||||||||||
| oe | UTF-8 | OUTPUT ENCODING の略なんでしょうか。 取得するRSSまたはATOMデータのエンコードを指定するようです。 これも UTF-8 を指定します。 | ||||||||||||||||||
| output | rss|atom | rss か atom のどちらかを指定します。 | ||||||||||||||||||
| topic |
| 指定してもしなくてもいいようです。 Googleニュースにあるトピックに絞れるようです。 ただ、 q (キーワード)との併用はできないようです。 | ||||||||||||||||||
| q | {キーワード} | 指定したキーワードを含むニュースに絞ってくれます。 ただ、 topic との併用はできないようです。 |
上記のパラメータを実際に設定したURLの例を以下に。
http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&topic=s
http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&q=長友
RSSフィードをJSONとして受け取る方法～Google Feed APIの応用 を参考にさせて頂きました。
まさにタイトルの通りのことが出来てしまいます。
ただ、GoogleニュースのRSSを取得する際のURLに & や ? が含まれていて、少し特殊な為、普通に参考サイトの通りに行なってもうまくいきません。
当記事の価値はここにあります。
参考サイトでは、こうあります。
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 を使えばいいんです！
https://goo.gl/ にアクセスしてみて下さい。
Paste your long URL here と書かれているところに、長友ニュースを取得するためのURLを貼り付けて、Shorten URL と書かれたボタンをクリックします。
すると、URLが短縮された文字列が生成されるので、これを使えばいいのです。
XML の RSS でもいいのですが、（私は）断然 JSON 形式のほうが扱い易いので記事として紹介でした。
Scene Builder を使って作る方法もあるのですが、まずはコードだけで作ってみようと思います。
Formを表示するために必要なコードは、たったこれだけでした。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import javafx.application.Application; import javafx.stage.Stage; public class FxApp extends Application { /* * (非 Javadoc) * @see javafx.application.Application#start(javafx.stage.Stage) */ @Override public void start(Stage stage) throws Exception { stage.show(); } public static void main(String...args) { launch(args); } } |
javafx.application.Application を継承しておきます。
start(Stage stage) メソッドだけ実装が必要です。
Application クラスに備わっている launch を main で実行すれば、
start が呼ばれて、アプリケーションの Window が表示されます。
UI制御については JavaFX UI Controls に書かれていることを中心に勉強していこうと思います。
こちらのブログ記事の内容そのままです。
プログラマーの雑記帳
http://programmer-toy-box.sblo.jp/article/9919455.html
少し用事があったので記事を探していたらドンピシャ。
|
1 2 3 4 5 6 7 8 9 10 |
import java.io.File; public class DriveLetters { public static void main(String...args) { File[] roots = File.listRoots(); for(File file : roots) { System.out.println(file); } } } |
Windowsだと、ディスクパーティションを複数に分けていたり、接続しているストレージ機器にドライブレターをマウントするのですが、取得方法はないかなと思って行き着きました。
簡潔で素晴らしい記事だったのでブックマークついでに自身のメモとしても記載。
Javaで開発したWebアプリケーションを外部公開できるサイトが少ない中、Herokuというサービスは普通にJavaに対応していました。
早速試した結果、これはかなり便利そうだ、ということで自分のメモを兼ねてここに記載します。
Herokuにアカウントを作成しました。
Gmailアドレスをそのまま普通に使用可能です。
凄いですね。Javaに対応しているだけでも素晴らしいのに、Java8に対応している（というか制限している）点も素晴らしい。
私が試している現在はMaven3.3.3なので、以下のURLでダウンロード。
http://archive.apache.org/dist/maven/maven-3/3.3.3/binaries/
ダウンロードしたファイルは
apache-maven-3.3.3-bin.zip
mvn --version
で動作確認。
Herokuのコマンドラインツールらしいです。
Windows Installerがダウンロードできるので、そのままインストール。
パワーシェルでも動かせるらしいですね。これも素晴らしい。
Getting started によると、heroku login でログインするそうです。
私の場合、初回実行で以下のように表示されました。
何かアップデートがあったんですかね。
|
1 2 3 4 5 6 7 8 9 10 |
$ heroku login Installing Heroku Toolbelt v4... done. For more information on Toolbelt v4: https://github.com/heroku/heroku-cli heroku-cli: Adding dependencies... done heroku-cli: Installing core plugins... done Enter your Heroku credentials. Email: email@domain.com Password (typing will be hidden): Logged in as email@domain.com |
なんと、上記の手続きで使えるようになったのか、もともといつの間にかGitコマンドをインストールしていたのか、普通にGitコマンドが使えるようになっています。
|
1 2 |
$ git clone http://hogehoge.com/hoge.git $ cd hogehoge_porject |
クローンできました。
HerokuのGet startedで準備してくれていたサンプルプロジェクトは pom.xml でできていました。
heroku create を実行すると、ローカルGitリポジトリをHerokuサーバ側に作成してくれる(のか？)。
このケースでは、アプリケーション名を任意のランダムな名前に設定してくれるようです。
下記のケースでは、sleepy-basin-5991 がそうかな？
|
1 2 3 4 5 6 |
$ heroku create Creating sleepy-basin-5991... done, stack is cedar-14 https://sleepy-basin-5991.herokuapp.com/ | https://git.heroku.com/sleepy-basin-5991.git Git remote heroku added Updating Heroku CLI... done. |
アプリケーション名はこちらが指定することもできるようです。
heroku create {アプリケーション名}
といった具合いで。今度、試してみます。
そして、ローカルのアプリケーションをリモートにデプロイします。
|
1 |
$ git push heroku master |
master ブランチをherokuにpushすることでデプロイするようですね。
標準出力がワシャワシャ出ちゃったので記録できませんでした。割愛。
Getting startedに書いてあったこと、そのままですが、インスタンスを1つに制限するコマンドを実行しておきます。
|
1 2 |
$ heroku ps:scale web=1 Scaling dynos... done, now running web at 1:Free. |
URL分からないな・・・と思っていたら、コマンドでアクセスできるんですね。便利。
|
1 |
$ heroku open |
※ このブログをごらん頂いている時には既に撤去しているかもしれませんが、
以下のようなページが表示されます。
https://sleepy-basin-5991.herokuapp.com/
Getting started で謳っていた通り、数分の作業ですね。これは。
とんでもないサービスを見つけてしまった。