2014年10月2日

Shuffle.jsのハマりどころ

Shuffle.jsというとてもかっこいいライブラリがあります。
しかし、実際に使うにあたってハマりどころがあったので、メモしておきます。

以下のような環境を前提とします。
$('#area').shuffle({
  itemSelector: '.entry'
});

 

枠がずれる

Shuffle.jsを設定した要素に対して各内部要素がちゃんと配置されない場合。

#areaに対し、
#area {
  position: relative;
}
と設定することで配置を正常にすることができるかもしれません。

 

配置がおかしくなる

Shuffle.jsを設定した要素に対して、
各内部要素の高さやmarginが正確に計算されず、要素間に隙間ができる。
$(window).load(function(){
  $('#area').shuffle('shuffle', function($val){
    return true;
  });
});
とwindow.onloadで実行することによって、各要素のサイズが正確に計算し直されるかもしれません。

 

ページ下に謎の余白が現れる

Shuffle.jsで要素をfilteringしたところ、ページの下部に余白が現れる場合。

#areaに対し、
#area {
  overflow: hidden;
}
と設定することで余白を消すことができるかもしれません。

2014年7月4日

LinuxにHaskell環境を構築

目標

Scientific Linux(Fedora, CentOS系でも応用できると思う)にHaskell/yesod環境を構築する。

GHCをインストール

GHCに必要なアレとかソレを予めインストールします。
sudo yum install glibc.i686 gmp-4.3.1-7.el6_2.2.i686 ncurses-libs-5.7-3.20090208.el6.i686


これらをインストールしないと、./configureを実行した時に以下の様なエラーが出ます。
$ ./configure
checking for path to top of build tree... utils/ghc-pwd/dist-install/build/tmp/ghc-pwd: error while loading shared libraries: libgmp.so.3: cannot open shared object file: No such file or directory
configure: error: cannot determine current directory
参考: http://www.xinotes.net/notes/note/1031/
Linux初心者なので"yum whatprovides"とかいう便利コマンド知らんかった。


そしたら、

http://www.haskell.org/ghc/download_ghc_7_6_3
-> Linux(OSが32bitならx86, 64bitならx86_64)
をダウンロードして解凍する。


ちなみに最新版(現在7.8.2)を使おうとすると、以下の様なエラーでHaskell-Platformがビルドできない。
Building the OpenGL-2.8.0.0 package failed


で、解凍したディレクトリ下で、
./configure
sudo make install
を実行します。

Haskell-Platfromをインストール

https://www.haskell.org/platform/linux.html
からソースをダウンロードして解凍します。

解凍したディレクトリ下で、
./configure
sudo make
sudo make install
を実行します。

次に、cabal-installの最新版をインストールします。
cabal install cabal-install

そのままだと古い方のcabalにパスが通ってしまっているので、
先ほどインスコしたcabalにパスを通します。
export PATH=~/.cabal/bin:$PATH


ちなみに、
cabal -V
でバージョンの確認ができます。 


cabal update
でパッケージ情報の更新ができれば、OKのはずです。

yesodをインストール

cabal install yesod-platform yesod-bin
以上。

yesod version
でインストールできたことを確認しましょう。

続きはこちらで

移行の作業はこちらを参考にやれば大丈夫だと思います。
http://www.techscore.com/blog/2013/06/11/yesod入門-1-インストールから起動まで/

2014年6月14日

Windows上でPlay! Frameworkを動かそうとするとsassのエラーで動かない

Rubyで、gem install sassをして、いざplay runしてみると、
\workspase\project\ruby.exeが見つからないというエラーが出る。

そんな時は、
C:\Ruby193\bin\sass.batを以下のように編集してみよう。
@ECHO OFF
IF NOT "%~f0" == "~f0" GOTO :WinNT
@"ruby.exe" "C:/Ruby193/bin/sass" %1 %2 %3 %4 %5 %6 %7 %8 %9
GOTO :EOF
:WinNT
@"ruby.exe" "%~dpn0" %*
の2行目を以下の様にコメントアウトします。
REM IF NOT "%~f0" == "~f0" GOTO :WinNT
play runが動くようになったかもしれない!

参考: ruby - sass plugin in play!framework 2.0.4 throws error - Stack Overflow

2014年5月10日

SaclaからAmazon APIにアクセス

準備

AWS Product Advertising API(いわゆるAmazon API)を叩くにあたり、
  • Access Key ID
  • Secret Access Key
  • Associate Tag
が必要になります。

Access Key ID と Secret Access Key の作成

https://affiliate.amazon.co.jp/gp/advertising/api/detail/main.html
の右側にある「アカウント作成」からアカウントを作成します。

https://console.aws.amazon.com/iam/home?#security_credential
の「Access Keys (Access Key ID and Secret Access Key)」項目を開いて、
[Create New Access Key]をクリックします。

Associate Tag の作成 

http://www.ajaxtower.jp/ecs/pre/index4.html
こちらのページに詳しいです。

コード

    val accessKey = /* Access Key ID */
    val secretAccessKey = /* Secret Access Key */
    val associateTag = /* Associate Tag */

    val df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss'Z'")

    val baseUrl = new URI("http://ecs.amazonaws.jp/onca/xml")
    val params = TreeMap(
      "Service"         -> "AWSECommerceService",
      "AWSAccessKeyId"  -> accessKey,
      "Version"         -> "2011-08-02",
      "Operation"       -> "ItemSearch",
      "SearchIndex"     -> "Books",
      "Keywords"        -> "よつばと",
      "Timestamp"       -> df.format(new Date()),
      "Sort"            -> "daterank",
      "ItemPage"        -> "1",
      "ResponseGroup"   -> "ItemAttributes,Images,BrowseNodes",
      "AssociateTag"    -> associateTag
    )

    def encodeUrl = URLEncoder.encode(_: String, "UTF-8").replace("+", "%20").replace("%7E", "~").replace("*", "%2A")

    val canonicalSb = new StringBuilder()
    params.foreach { case (k, v) =>
      canonicalSb.append("&").append(encodeUrl(k)).append("=").append(encodeUrl(v))
    }

    val canonicalStr = canonicalSb.substring(1)

    val strToSign = "GET\n" + baseUrl.getHost() + "\n" + baseUrl.getPath() + "\n" + canonicalStr

    // secretAccesKeyでstrTosignのHmac-SHA256ハッシュを作成
    val key = new SecretKeySpec(secretAccessKey.getBytes(), "HmacSHA256")
    val mac = Mac.getInstance(key.getAlgorithm())
    mac.init(key)
    val signature = new String(Base64.encodeBase64(mac.doFinal(strToSign.getBytes())))

    val url = new URL(baseUrl.toString() + "?" + canonicalStr + "&Signature=" + encodeUrl(signature))

    val br = new BufferedReader(new InputStreamReader(url.getContent().asInstanceOf[InputStream], "UTF-8"))
    val xmlSb = new StringBuilder()
    try {
      Iterator.continually(br.readLine).takeWhile(_ != null).foreach { line =>
        xmlSb.append(line)
      }
    } finally {
      br.close()
    }

    XML.loadString(xmlSb.toString())    // Amazonから返ってきた検索結果のXMLオブジェクトを作成

ファイルのエンコードはUTF-8にしてください。
encodeUrl関数を定義していますが、RFC3986準拠が正確ではないので、
コピペするときは注意してください。

参考

http://d.hatena.ne.jp/p4life/20090510/1241954889

Amazon 新刊チェックアプリを作りました


Amazon 新刊チェッカー!
http://publish-checker.herokuapp.com/

 

概要

Amazonの特定の著者、タイトルの最新刊を調べるアプリです。
例えば、追いかけてる漫画の単行本があったり、
ある著者の新しい本がないか定期的にチェックする用途に使えます。

使い方

検索欄にキーワードを入れて検索するだけ!
左側のドロップダウンリストで、タイトルと著者名の検索カテゴリを変更できます。
検索対象を増やすときは、左上の[追加]ボタンで追加できます。
最後に、左上の[保存]ボタンで検索内容を保存!

これで、定期的に新刊をチェックできます!

 

その他

検索内容の保存はブラウザのcookieにしているので、ブラウザが変わると検索内容を復元できません。
現在、"/"とか"%"とかは検索キーワードに含めることができません。