うえぽんSW局

古いタイプの日記ブログです。気まぐれに更新してます。

カテゴリ: ウェブ

 当ブログで使われている画像の一部をデータURIスキームにしました。
 Internet Explorerの8より前のバージョンを使っている人はもういないと思うので、ほとんどの環境の人が以前と変わらずに閲覧できていると思います。


◆データURIスキームとは
 簡単にいうと、下のようにしてURIに直接データを埋め込むものです。バイナリは直接埋め込めないのでbase64に変換して埋め込みます。

<img src="data:image/gif;base64,R0lGODlhKAAoAIAAAP8AAAAAACwAAAAAKAAoAAACJ4SPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s4jBQA7">

 
 上はこんな赤い画像を表示します。
 

◆長所
 HTTPのリクエスト数を少なくすることでオーバーヘッドが減り、結果的に表示が速くなる。

◆短所
 Internet Explorerの古いバージョンが未対応。
 しかし、使っている人はほとんどいないはずなので、この短所は考えなくていいと思う。

◆キャッシュされない問題
 画像ファイルならブラウザにキャッシュされるが、HTMLに埋め込みだと毎回その分もダウンロードすることとなる。
 この問題を回避する方法としては、スタイルシートの背景画像にするなどしてCSSファイルに埋め込んでしまう手がある。CSSファイルをキャッシュするということです。

◆base64に変換するツール
 ツールは沢山あるが、自分はfirefoxのアドオン「Stylish」についてるエディタを使用してる。本来はユーザースタイルシートを管理するものだが、変換専用のツールを探すのが面倒くさいので、これで間に合わせた。
 [追記]stylishのこの機能はバージョンアップとともに無くなってしまいました…。
 dataURI_stylish
このエントリーをはてなブックマークに追加

 自分が2ch閲覧用に使ってる正規表現を4つのNGワードです。割と単純ですが幅広く使えるかと思います。

【シンプル版】
<>/( <br> [^ ]?){9}/

<>/( <br> ){3,}[ ]{4}/

<>/([  ][^  ]){9}/

<>/(( <br> )+ <br> [^ ]+){3}/

【上と同じだけど拡張・強化してある版(重いかも)】
<>/(<[bdpt][^>]*> ([  ]|&(#(x0*(20;|3000;|[aA]0;)|0*(32;|12288;|160;))|nbsp;))*[^  <>]?([  ]|&(#(x0*(20;|3000;|[aA]0;)|0*(32;|12288;|160;))|nbsp;))* ){8}/

<>/(<[bdpt][^>]*> ([  ]|&(#(x0*(20;|3000;|[aA]0;)|0*(32;|12288;|160;))|nbsp;))*){3,}(([ ]|&(#(x0*(20;|3000;|[aA]0;)|0*(32;|12288;|160;))|nbsp;))[ ]*){3,}[^ "#$%&'*+,\-\.\/:;=^`|~_ -◯─-╂]/

<>/(([ ]|[ ]+|&(#(x0*(20;|3000;|[aA]0;)|0*(32;|12288;|160;))|nbsp;))[^ \.,:;|<> ]){9}/

<>/((<[bdpt][^>]*> ([  ]|&(#(x0*(20;|3000;|[aA]0;)|0*(32;|12288;|160;))|nbsp;))*)+ <br> ([^ ]|[ ][^ <])+[ ]* ){4}<br> ([  ]|&(#(x0*(20;|3000;|[aA]0;)|0*(32;|12288;|160;))|nbsp;))* <[\/b]/

 このNGワードはかちゅーしゃ用の形式で書かれています。かちゅ+kageの形式は下のようになっているので、使用している専用ブラウザに合わせて設定して下さい。

 <>/正規表現/オプション

 強化版の方は、空白スペースを数値文字参照にしている場合を考慮したり、1行目もちゃんと解釈するようにしたり、誤爆を減らすようにしたりと色々と苦労しています。
  <[bdpt][^>]*> の部分は改行タグだけでなく開始部分のタグにもマッチさせてます。開始部分のタグはスキンごとに違いますが、<div class="hoge">、<dd>、<p>、<td>といったものにマッチします。

 あと、他の専用ブラウザで使う場合の注意点は、かちゅーしゃ(というかkage)の正規表現では全角文字を1文字として解釈しています(普通はそう解釈する)。その辺の仕様の違いで動作しない専用ブラウザもあるかもしれませんので悪しからず。


 以下解説です。

(1)連続改行や、縦1列に書くのをNG
 最後の{8}が改行の連続数。荒らし以外でも連続改行を使ったレスはつまらない傾向があるので誤爆しても困らないと思います。
【例1】












【例2】
禿同









あじゃらかもくれん!


(2)複数改行のあとインデントして書き込むのをNG
 最初の{3,}が改行の回数、あとの{4}がインデント数。強化版ではAAになるべく誤爆しないようにしています。
【例】


    あじゃらかもくれん!




(3)文字間にスペースを置いて目立たせるのをNG
 {9}が文字数。強化版ではAAの陰影でよく使う「.,:;|」を除外してます。
【例】

 あ じ ゃ ら か も く れ ん !



(4)行間にスペースを置いて目立たせるのをNG
 最後の{3}が連続数。誤爆が多い場合は数値を増やして下さい。強化版ではかちゅが最短一致に対応していないので苦労しました。
【例】
>>1
禿同

ベロベロバァー

オッペケペッポー

ペッポッポー

アジャラカモクレン!!




このエントリーをはてなブックマークに追加

 以前作った「Amazon.co.jp検索結果へのリンク作成フォーム」の改良版です。アマゾンのアソシエイトIDが入った検索結果へのテキストリンクを一度にたくさん作成できます。
 動作させるにはJavaScriptを有効にして下さい。

アソシエイトID:
ストア:  インプレッション用の画像を付ける




↓検索結果確認用(私のアソシエイトIDになってます)
ここに確認用リンクが表示される


以前の物との違い&解説など
  • URLの形式は新しい形式(2007年3月現在)のものにしました。
  • 作成されるHTMLはアソシエイト・セントラルで作成したものとほとんど同じです。アソシエイト・セントラルはページが重たいので、この作成フォームの方が便利だと思います。
  • 念のためインプレッション用の画像も付けました。チェックボックスを外せば付けません。
【追記&更新】2014年8月7日
  • ストアの数を増やしました。Kindleなどを追加し、ビデオ(VHS)は除外してます。
  • 2014年8月現在でもURLの形式は基本的に同じようですが、ストア指定の文字列が変更されたりしているものもあります。「すべての商品」を選んでおくのが無難かもしれません。
【更新】2021年4月19日
  • httpからhttpsにしました。
このエントリーをはてなブックマークに追加

 ※このブログ記事は古いものです。2021年現在、パスワードに記号を使うよりも、とにかく長くするのが重要とされています。


 「パスワードには記号を使え」とよく言われるが、サービスごとに使える記号がマチマチだったりする。これは結構困る。なぜかというと、自分は、パスワードをいくつも覚えるのではなく、パスワード生成ルール(ブックマークレットにしてる)を作り、共通のキーワードで各サービスで違うパスワードを生成するようにしている。このときサービスによって使えない記号があったりすると、パスワード生成ルールを見直したり、その場で適当なパスワードを作らなければいけない。これは面倒くさい。

 そこで、各種サービスで使える記号を収集し、最低でも使えそうな記号を調べてみた。以下がその記号。

# $ - = ? @ [ ] _


 記号は全部で33種もあるのに、確実に使えそうなのはこの9個だけ。さらに「@」が使えないところもあったりするし、パスワードとして使える記号が明記されていないところも多い。

 一応、下が今回調べたサンプルの状況です。もっとサンプルがあった方が良いかもしれませんが、これ以上集めると、全部の記号が使えなくなりそうだから止めました。

 !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~  記号33種

 !"#$%&'()*+,-./:; =>?@[\]^_`{|}~  Yahoo!JAPAN
 ! #$%& ()*+,-./:;<=>?@[\]^_`{|}~  NET-INFO
   #$      + -./:  = ?@[ ]^_` |    三菱東京UFJ銀行
 !"#$%& ()*+,-./:;<=>?@[\]^_ {|}~  大阪市立大学
 ! #$%&'()*+ -./:;<=>?@[\]^_`{|}~  筑波大学
 ! #$  '()*  -. :; = ?@[ ] _`{ }~  BIGLOBE(ADSL回線)
 ! #$%& () + -    <=>?@[\]^_ {|}   東京理科大学


 Yahoo!JAPANはスペースが使えたりとかなり優秀。でも、< と文字列の &{ が使えないのが謎。あと、Yahoo!JAPANのこのヘルプには使える記号にアンダーバー(_)がなかったりする(使えない記号にも無い)。これについてYahoo!JAPANに問い合わせたところ、「アンダーバーも使用可能」とのこと。記述漏れだったらしい。

このエントリーをはてなブックマークに追加

↑このページのトップヘ