JavaFXを使ってデジタルフォトフレームもどきを作った時のまとめ3

最近忙しくて更新が遅くなってすみません。

書きたいことは溜まっているのでどこかでまとめて書きたいとは思っています。
XAMPPの設定とかgitの設定とかAndroidのfragmentとか

で今回はJavaFXでアニメーションを付けるとこです。
正直デジタルフォトフレーム作った時に一番めんどくさかったのはここです。

JavaFXでアニメーションをやること自体が始めてだったのでいろいろ戸惑いました、まあそれは以前ブログに書いたのでそっちを見て下さい。
結論だけここに書くと慣れちゃうとすごく楽に書けます。

       
//画像の変更タイムライン
timeline = new Timeline(
  new KeyFrame(
  new Duration(1000),
  new EventHandler() {
  @Override
  public void handle(ActionEvent event) {
    try{                
    //i番目の画像を表示
    //1回で10個ずつしか取れないので10個表示したら次の10個を検索   
    //1個の検索に対して100枚しか画像を取得できないので最初に戻す                                                            
    } catch (IOException e) {
    //ファイルの例外が発生したらそのファイルを飛ばす
      i++;
    }
  }
}));

画像の変更はImageクラスでインスタンス化したのをImageViewインスタンスにセットすればいい。

URL url = new URL(images.get(i - 1));
InputStream in = url.openStream();
Image image = new Image(in);
imageView.setImage(image);

随分遅くなってしまいましたがこれでJavaFXでデジタルフォトフレームと作った時のまとめは終わりです
あとでソースへのリンク貼っときます ソースの行数が多いとなぜかタグが最後に入って無駄な改行が入っちゃうみたいなんで原因探っときます。

JavaFXを使ってデジタルフォトフレームもどきを作った時のまとめ２

JavaでJSON形式のデータを解析する方法

JSONが何だか知らない方は「http://json.org/」を見て下さい

JavaでJSONを扱うために今回は「JSON-java」を利用します
ダウンロードは「https://github.com/douglascrockford/JSON-java」から。
説明は「http://json.org/java/」のサイトにあるようです。

今回使用したのは「JSONArray」「JSONException」「JSONObject」の３つですが、依存関係があるので「JSONString」と「JSONTokener」もダウロードして１つのフォルダにまとめてビルドパス設定を設定する必要があります。

準備はここまでです。

実際の使い方はgetで取得したいデータのキーを指定してデータを取得します。
データが配列の場合はgetJSONArray
普通のデータの場合はgetJSONObject
で大丈夫です。 ソースにするとこんな感じ

 
//json にはJSONデータの文字列が入っている
  try{
    JSONObject json = new JSONObject(json);
    JSONArray jsonArray = json.getJSONArray("items");
    for (int j = 0; j < jsonArray.length(); j++) {
      JSONObject tmp = jsonArray.getJSONObject(j);
      System.out.println(tmp.getString("link"));
    }
  }catch(JSONException e){
     e.printStackTrace();
  }

次回で取得したurlをJavaFXで表示してアニメーションを設定すれば完成です。

JavaFXを使ってデジタルフォトフレームもどきを作った時のまとめ1

使ったもの
・JavaFX2(GUI部分)
・Google Custom Search API (写真の検索)
・JSON-java (JSONの解析)

完成したのはこちら

テキストボックスに検索ワード入力してボタンを押したらCustom Searchで画像を検索してきてその結果の画像を連続で表示していきます。

流れとしては検索した結果がJSON形式で帰ってくるのでそれを解析してURLを取り出して表示しています。

Google Custom Searchの使い方
「https://developers.google.com/custom-search/v1/using_rest」にあるようにJSON形式で結果を返してもらう方法。

 
    private static final String QUERY_URL = "https://www.googleapis.com/customsearch/v1";
    private static final String KEY = "APIキー";//APIKey
    private static final String CX = "Custom SearchのID";//カスタム検索ID
    private static final String PAGE = "ページの数字";//1~101で指定して検索のスタート位置を指定
    private static final String PARA = "&alt=json&searchType=image&q=";//検索オプションの指定(jsonで結果を返す、画像検索を行う、等)
       

    //テキストフィールドに入力した値で検索
    //inputは検索文字列
    String query = QUERY_URL + KEY + CX + PAGE + i + PARA + inputText;
    //検索クエリを実行
    URL url = new URL(query);
    URLConnection connection = url.openConnection();
    BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));

カスタムサーチは予め「http://www.google.com/cse/manage/all」で作成し、作成したカスタムサーチを使う。
APIキーは「https://code.google.com/apis/console/」で作成した自分のAPIキーを指定
次回はJSON解析部分について書きます

JavaFXでのアニメーション作成

Bloggerにソースコードを載せる時に利用するシンタックスハイライトを設定しようと思って 「http://goo.gl/IJEs9」を使っていたらなんと言語の欄にJavaFXを見つけたのでさっそくJavaFXのハイライトを試してみようってだけなのでテストも兼ねてます。
JavaFXでアニメーションを自分で設定する時はTimelineクラスを使うと経過秒毎に処理が書けるので簡単にアニメーションが作れます。
とりあえずソースの載せときます。

  
private Timeline timeline;
timeline = new Timeline(
  new KeyFrame(
    new Duration(100),//ミリ秒で指定
      new EventHandler() {
        @Override
        public void handle(ActionEvent event) {/*処理1*/}        
      }
  ),
  new KeyFrame(
    new Duration(200),//ミリ秒で指定
      new EventHandler() {
        @Override
        public void handle(ActionEvent event) {/*処理2*/}        
      }
  )
);
//タイムラインの無限に繰り返す
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.play();//タイムライン開始
timeline.stop();//タイムラインを明示的に終了

使い方は

  
    new Duration(100)

のところでアニメーション開始からの経過秒をミリ秒で指定し、指定秒毎にアニメーションを記述していくだけ。
タイムラインを無限に繰り返す設定にしてると指定したアニメーションが終わったらまた先頭のアニメーションから 実行していってくれます。
このソースの形だとタイムライン開始から100ミリ秒で処理１が200ミリ秒で処理2をやってまた最初に戻ってタイムラインの開始から300ミリ秒の時はまた処理1を実行します。

本当はソースは17行目で終わってるんですがなんか変なタグと無駄な改行がまざっちゃってますね、どうやっても消えないのでとりあえずこのままで。

安全なWebサイトの作り方のまとめ

IPAの「安全なWebサイトの作り方」を読んだのでまとめ
http://www.ipa.go.jp/security/vuln/websecurity.html

SQLインジェクションはプリアドステートメントを使って対策
エラーメッセージをブラウザに表示しない

OSコマンドインジェクション
なるべく使わないで使う場合は引数を全てチェックする

ファイルへのアクセス
ファイル名を指定する時はファイル名だけを取るようにしないと「../../a.txt」のような文字列で想定外のディレクトリのファイルを指定されるのでパスの中からファイル名だけを取得するようにする
ファイル名のチェックを行う

セッションの管理
セッションIDは乱数等から生成して、第三者が予測不可能にする
セッションIDをURLパラメータに格納しない
HTTPSで使うCookieにはsecure属性を指定してHTTPS以外で使えなくする
セッションはログイン後に開始する

クロスサイト・スクリプティング対策
 入力された時じゃなくて出力の時にエスケープ処理をする用にして、出力するものにはすべてエスケープ処理を行う、文字コードの指定は必ず行う
スクリプトタグを動的に作らない
CSSを任意のサイトから取り込まないようにする

CSRF対策
  登録情報等のユーザ情報を変更する時は変更する時にパスワード等の秘密情報を確認する
  変更の直前にパスワードを入力させるか、直前のページで秘密情報を埋め込んで確認ページで確認する

ヘッダの取り扱い
HTTPヘッダ、メールヘッダ共に基本的にはユーザからの入力を使用する時は改行文字を取り除いてから使用する

その他
アクセス制御はしっかりとする
機密情報扱うならパスワードの入力を求める

Webサイトを作った時に気にしたセキュリティ対策のまとめ

・XSS(クロスサイトスクリプティング)対策
サイトに動的な情報をそのまま表示しないようにすればいいのでユーザ側から受け取った入力を表示する時はPHPのhtmlspecialchars()等でタグを無効化してから表示する。

・SQLインジェクション対策
今回はDBへのアクセスはPDOを使ったのでPDOを利用する時の注意点だけ
必ずプレースホルダーを使う、prepareを使ってSQL文を実行すればOK
動的プレースホルダと静的プレースホルダがあるので 
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES,FALSE)
で静的プレースホルダを使うように設定する
DBへの接続時に文字コードを指定する(普通はUTF8)

・パスワードのハッシュ化
DBにパスワードを登録する際にハッシュ化するアルゴリズムにもいろいろあるらしく、
MD5とRIPEMDというアルゴリズムは危険性があるらしいので使っちゃいけない。
CRYPTRECという暗号化プロジェクトがSHA256以上を推奨してるらしいのでこれに従えばよさげ。
あとは「PASS」みたいないろんな人が設定しそうなパスワードを単純にハッシュ化すると同じ値にハッシュ化されてハッシュ化した値で同じ値がたくさんあったらこれはPASSをハッシュ化した値だなって感じに分かるのでソルトと言われる文字列をパスワードに付加してからハッシュ化してDBに保存する

短縮URLの生成

googleの短縮URLAPIを使う機会があったので忘備録的なもの

まずはAPIの利用登録をする必要があるので
「http://code.google.com/apis/」
で「URL Shortener API」の利用をオンにしてAPIキーも後で使うのでAPIキーをメモしておく

「https://www.googleapis.com/urlshortener/v1/url」のURLにAPIキーを足して短縮したいURLをJSON形式でPOSTすると短縮されたURLの情報がJSON形式で返ってくる

APIの上限は１日100万リクエストらしいので普通に使っていれば上限を超えることはなさそう

ソースコードは以下のサイトを参考を参考にさせていただきました
MACH3.laBlog「goo.glがAPUI公開されたらしいので試してみた」