anti scroll

ブラウザと小説の新しい関係を模索する

switchが買えないらしいので、どのぐらい買えないのか試してみました

game amazon python programming nintendo

マリオ発売の直前に変えたら凄い、と思ってチャレンジしてみました。

まずは値動きをチェックする巡回プログラムを書きます。

#!/usr/bin/python3
# -*- coding: utf-8 -*-
from pyquery import PyQuery as pq
import os

def notify(subject, message, email):
    os.system("echo '{message}' | /bin/mailx -s '{subject}' {email}".format(message=message, subject=subject, email=email))

def parse_price(doc):
    price_tag = doc.find("#priceblock_ourprice")
    price_text = price_tag.text().replace("￥ ", "").replace(",", "");
    return int(price_text)

def check_price(url):
    doc = pq(url)
    price = parse_price(doc)
    subject = "switch price - " + str(price)
    message = url
    email = "foo@example.com"
    if price <= 33000:
        notify(subject, message, email)

if __name__ == '__main__':
    urls = [
        "https://www.amazon.co.jp/dp/B01NCXFWIZ", 
        "https://www.amazon.co.jp/dp/B01N5QLLT3"
    ]
    for url in urls:
        check_price(url)

「正規価格で売られていたらメールする」というだけのプログラムです。

これを適当なレンタルサーバーで、2分おきに実行させます。

crontab -e

2/* * * * * /usr/local/bin/chkswitch.py

最後に、今まで一度も使ったことのないamazonの「1click注文」を有効にしました。

「カートに入れる」「配送方法の選択」「購入」なんてことをやってたら、その間に売り切れちゃう気がしたので…

結果

さっそく今日、5回ほどメールが届いて、即座に1clickで購入を試みてみましたが…

結果は全敗でした！

この程度の工夫では買わせてくれないみたいです。

とりあえず知見

  • 1click購入は必須だと思います（わざわざカートに入れてたら間に合わない）
  • 巡回頻度は1分ですら遅いのかも？
  • 木曜日と金曜日が狙い目と聞いてましたが、木曜日は確かにヒットしました

追記

なんか11月頃から普通に定価（3万2000円ぐらい）で買える感じになってます（自分も無事に定価で買うことができました）。

クロスドメインで子フレームから親ドキュメントのwidth:100%を取得する方法

programming

ひょんなことからviewportのdevice-widthがbodyタグから適用される事を知りました。

別の言い方をすれば「bodyより上位のタグには適用されない」ということみたいです。

例えば次のようなページ（parent.html）をiPhone5（device-width = 320px）で開き、iframeを使ってchild.htmlを読み込ませます。

<!-- parent.html -->
<html>
  <head>
    <meta viewport content="max-width=device-width">
  </head>
  <body style="margin:10px">
    <iframe width="100%" src="https://other-domain.com/child.html"></iframe>
  </body>
</html>

<!-- child.html -->
<html>
  <head>
    <meta viewport content="max-width=device-width">
  </head>
  <body>
    this is child!
  </body>
</html>

このときchild.htmlで、bodyとhtmlの横幅をそれぞれ確認すると…

$("html").width(); // 300px
$("body").width(); // 320px(device-width)

htmlの横幅 < bodyの横幅

という結果になりました。

つまりchild.htmlのbodyにはdevice-widthが設定されていますが、htmlには親（parent.html）のコンテキストを考慮したサイズ（width:100%）が生きているのです。

クロスドメインだと子フレームから親ドキュメントの情報を取得する処理は（セキュリティー上の理由で）ブロックされますが、この情報を使えば少なくとも親ドキュメントの横幅は取得できる、ということになります。

もちろんchild.htmlのmetaにmax-width=device-widthが設定されている必要がありますが。

縦書き文庫のビューアーの外部サイトへの埋め込み機能を再開しました

縦書き文庫

問い合わせが多かったからなのですが…

どうせ新しく作り直すなら！ということで、埋め込みビューアーから表示設定の変更などもできるようにしました。

あとレスポンシブ対応なので、ブラウザのサイズを変えても、それに追従してビューアーのサイズが変わります。

サンプル

実際に貼り付けると、こうなります。スクリーンの左右のクリック（タッチ）でもページ送りすることができます。

使い方

ビューアーの右メニューにある「作品情報」のエリアに「埋め込みコード」という欄があるので、中のコードをコピーして、ブログやホームページなどに貼り付けてください。

カスタマイズ

初期設定を変えたい場合は、縦書き文庫のヘルプを参考に、埋め込みコードの修正をしてください。

注意

埋め込みビューアーでは「脚注機能」や「台詞記法」などは表示できません。

追記

2018年に、再びこの機能は廃止されました。

既に埋め込みを利用している作品についても、現状は表示されていますが、いずれ廃止される予定です。

縦書き文庫のビューアーがテキストファイルのドラッグ＆ドロップに対応しました

縦書き文庫

縦書き文庫のビューアーでドラッグ＆ドロップしたテキストファイルが読めるようになりました。

適当な作品を開いて、小説本文の領域にテキストファイルをドロップすると、原稿フォーマットや文字コードを聞かれるので、適切なものを選択してください。

f:id:convertical:20170405092104p:plain

「決定」を押すと、テキストの内容が縦書き文庫のビューアーで表示されます。

Responsivook ver1.2.2をリリース

nehan.js responsivook

Responsivook ver1.2.2をリリースしました。

Responsivookはnehan.jsを使って、縦書き横書きのページ送り、段組み、レスポンシブレイアウトなどを実現するjavascriptライブラリです。

動作デモ

主な変更点

  • Windowsの場合に縦書きのベースラインがずれてしまっていた問題が修正されました。
  • ボットによるアクセスのときは組版せずに平文のまま表示するようにしました（SEO対策）。

関連記事

nehan.jsのfunctional styleでタグの内容に動的な制限をつける

nehan.js 縦書き文庫

縦書き文庫では比較的自由にHTMLタグを使用できるのですが、たまにエディターの文字サイズ変更ボタンをテキスト全体に反映させてしまう人がいます。

例えばこういう感じです。

<span class='larger'>
（作品全体のテキスト）
</span>

これの何が困るのかというと、ユーザーが「表示設定」で変更できるはずのフォントサイズが、内側のspanに邪魔されて変更できなくなくなってしまうことです。

縦書き文庫では、ユーザーの表示環境やパソコンの解像度はそれぞれ異なることを踏まえ、それぞれの環境にあわせてビューアーのサイズや文字サイズが変わるようになっています。

その上で、各種サイズは各自が自分好みに設定できるようにしているので、その特徴を破壊するようなマークアップは、あまり望ましくありません。

よって注意事項でも、そういうマークアップを禁止行為であると明記しているのですが、こういう規則って読む人が少ないので、あんまり周知されていないというのが実情です。

というわけで、少し強引なのですがnehan.jsのfunctional styleを使って、良くない装飾タグの使い方には、動的な警告を出すようにしてみました。

例えば、部分的なテキストの装飾に使われるspanタグならcontentを以下のように設定し、制限字数を超えていたらエラーメッセージに置き換えます。

Nehan.setStyle("span", {
  content:function(ctx){
    var limit = 100; // 制限字数
    var cont = ctx.getMarkup().getContent();
    return (cont.length > limit)? "error:too long!!" : cont;
  }
});

色々なタグにまとめて長さ制限を付けたいときは、こんな感じでしょうか。

// 動的にcontent制限するstyle valueを作成する関数
var content_with_limit = function(limit){
  return function(ctx){
     var cont = ctx.getMarkup().getContent();
     return (cont.length > limit)? "error:too long!!" : cont;
  };
};

// 長さ制限を付けるタグ一覧
var LIMIT_LENGTH = {
  b:100,
  em:30,
  span:50,
  strong:100
};

Object.keys(LIMIT_LENGTH).forEach(function(tag_name){
  var limit = LIMIT_LENGTH[tag_name];
  
  Nehan.setStyles(tag_name, {
    content:content_with_limit(limit)
  });
});

もちろん細切れにspanタグを区切られたら効き目は無いわけですが…

縦書き文庫の組版スピードを計測するページを公開しました

縦書き文庫 nehan.js

縦書き文庫の組版スピードを計測するページを公開しました。

縦書き文庫 - 組版スピードテスト

ハイスコアも計測されますので、ご自身のブラウザのスピードを試してみたい方は使ってみてください。

ちなみに以下は自分の環境で計測した結果で、Safariが圧倒的に速かったです。

f:id:convertical:20170210133706p:plain