サイト構築で画像関連機能

ウォーターマークをいれた画像を半自動で用意する

Gist

ウォーターマークのベースはさすがに自動生成できるレベルにはなかったので、Inkscapeで作成した。
縦と横の二種類を用意している。

fig/にはオリジナルサイズの、thumb/にはサムネイルサイズの画像を配置するが、この時にcompositeを使ってウォーターマークを合成している。

また、幅1600pxを越える画像はリサイズしている。

@figbaseuriの不完全さ

PureDocにもわずかな変更を加えたが、これはattrを排除するためにすぎない。

大きいのはParser::PureDocにおける

        # Other settings for PureDoc
        begin
        if config[:purebuilder_config][:puredoc_tune].kind_of? Proc
          config[:purebuilder_config][:puredoc_tune].call(::DOC)
        end
        rescue
          STDERR.puts "!!ERROR in PureDoc TUNE:" + $!
        end

という変更だろう。

これによって、@config[:puredoc_tune]を使って各PureDocオブジェクトに対して設定が可能になった。
これはMarkdownドキュメントに対しては無効となる。

Gist

「各article要素を取得してループ→各要素に対して各figure要素を取得してループ→イベントリスナー追加」という単純な構造ではある。

ライトボックス用に用意されたimg要素のsrcを変更し、さらに最大幅と最大高をウィンドウサイズに合わせてから表示する、という処理が追加され、ちゃんと機能するものになった。

figure要素に入っていないものはサムネイルの構造を持っていないとみなす方式。

新 Aki SI&Eサイト構築と、納得できないCSS解釈

作り直してるよという話はしていたが、ついに全面刷新となったAki SI&Eの作成に着手した。

昨日1日でlightboxプログラムを作り、さらにメニューボタンアニメーションを作った。

Lightboxアプリケーションは作った時点で1kBを切っており、相当軽量な内容になっていた。
JQueryなどは使っていない。

(function() {
  if (! document.addEventListener ) { return false; }
  
  var wrapper = document.getElementById("WrapWindow") /* ModalWindow */
  var fadingTimer = false /* IntervalTimer */
  var alpha = 0.0 /* ModalWindows's alpha number */

  /* draw content */
  var displayContent = function() {
  }
  
  /* fading out (interval callback) */
  var fadeout = function() {
    if (alpha < 0.8) {
      alpha = alpha + 0.05
      wrapper.style.backgroundColor = "rgba(0,0,0," + alpha + ")"
    } else {
      clearInterval(fadingTimer)
      fadingTimer = false
      displayContent()
    }
  }
  
  /* set this for event callback */
  var setLightboxTrigger = function(e) {
    wrapper.style.visibility = "visible"
    fadingTimer = setInterval(fadeout, 30)
  }

  /* Return from lightbox */
  wrapper.addEventListener("click", function(e) {
    if (fadingTimer) {
      clearInterval(fadingTimer)
    }
    wrapper.style.backgroundColor = "transparent"
    wrapper.style.visibility = "hidden"
    alpha = 0.0
  }, false)

  
  document.getElementById("SideNotes").addEventListener("click", setLightboxTrigger, false)


  
})()

基本的な作りはごく単純だ。
htmlbodyheight: 100%;を持っていて、

<section id="WrapWindow">
</section>

#WrapWindow {
  visibility: hidden;
  z-index: 10000;
  background-color: #000; /* for RGBa Unsupported browseres */
  background-color: rgba(0,0,0,0);
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0px;
  bottom: 0px;
}

となっている。これにより見えていないし触れることもできないが見えている画面より手前に全体を覆うブロックがあり、これがvisibleになることで全体を覆って操作不能にする。

プログラム全体を関数で書こうことで、全体でアクセスできるプロパティを外側に伝播しないように閉じ込めることができる。「クロージャを作ることで変数をローカル化し直ちに呼び出す」というテクニックは、オライリーのJavaScriptで紹介されている。

グローバルな値としてfadingTimeralphaが定義されている。
fadingTimersetInterval()オブジェクトを格納するためのものだ。これをどこかにとっておかないとclearInterval()することができずに困ってしまう。

イベントが発生した時にfadingTimerが真か偽か、によって判断を変えることができる。
fadingTimerが真の状態で呼ばれる可能性があるのは、#WrapWindowに対するクリックイベントだけだ。
なぜならば、fadingTimerがセットされる前に透明なだけでvisibilityはvisibleになっているので、クリックイベントは必ず#WrapWindowが取る。もちろん、なんらかのブラウザの不備でクリックされる可能性はないではないが。
では、「これから真になる、まだ偽の状態で発生するか」というと、真になる関数が走った時点で、JavaScriptはシングルスレッドなので、真になるまで他のイベントを発生させても実行されないので関係ない。
操作に対するフリーズタイムを短くするためにsetTimeout()を使うこともあるくらいだ。

文字列(evalされる)の登録でなくコールバック関数の登録をするためには、intervalで呼ばれるコールバックで繰り返し使われる値を覚えておくことができないので、これはコールバック関数に対してグローバルでなくてはいけない。
そのための値がalphaだ。

1.0になれば終了なのでその時点でclearIntervalだが、まだインターバルタイマーが動作している状態で#WrapWindowがクリックされる可能性はある。これが真の場合だ。

では、その場合どうするかというと、インターバルタイマーの状態に関わらずオーバーレイを消す。そのため、インターバルタイマーが働いていればclearIntervalしてしまう。

なお、最後に追加しているイベントは本番用ではなくテスト用だ。

CSS

今回の目玉のひとつが、main, article, section, header, footer, asideといった「HTML5への対応」だ。
私のサイトにある大量のdivを少しでも減らしたいからなのだが、HTML5への対応は様々なメリットがある。
一方でレガシー環境を切り捨てることになりそうだったので慎重に対応してきたが、NN 4.6相当でも動作しそうな見通しがたったので採用となった。

それはともかく、納得できない振る舞いに随分悩まされた。

        <div id="SideContent">
      	<section>
             <nav id="Toc" class="toc marginbox_main contentbox">
               <h1>目次</h1>
               <ul>
                 <li>ページナビゲーション</li>
               </ul>
             </nav>
        ...
        </section>
        </div>

div, section, nav、あるいはそれらが内包する全てのテキストに対してfont-sizeの相対的変更(80%など)をすると、ボックスが上下とも縮まり、左カラムと位置が揃わなくなる。
インスペクタで見ると、table-cell要素の#SideContentの位置は正しいが、sectionのマージン上辺と#SideContentの上辺の間に隙間ができる。

また、中に入っているボックスの上マージンを削ると、ボックスの高さがそれだけ減ってその分上に隙間が空く。
配置は関係ないらしく、またこれはpaddingが設定されている場合のみ発生する。
paddingを設定したボックスに内包されるブロック要素のmarginをいじるのは、高さを意識する必要がある場合は厳禁ということか。

        <section id="MainArticle">
          <article class="marginbox_main contentbox">
            <h1>記事のタイトル=章</h1>
                ...
          </article>

このh1のマージンを設定するとその分articleが下がる。
h1より上にボックスを置くとボックスは伸びるが、その分右カラムが下げられてしまう。

恐らくは「h1を特別扱いしている」のだろうと思う。
だが、このためにh1を修飾することが非常に難しい。

結局position: relativeにしてずらした。上以外のmarginについてはこうした問題はない。

PureBuilder2を使ったリニューアル(1)

PureBuilder1のサイトがPureBuilder2で動作するように調整すると共に、PureBuilder2の機能を検証する作業を開始した。
現在はサイトの更新が滞っているので、それが完了すれば効率的に更新できるようになる。

ただ、従来は設定ファイルにロジックを組み込む形だったため、変更点は大きく、そのまま持ってくるというわけにはいかない。
そもそも、PureBuilder1が十分なツールでなく、ツールをサイトごとに書いて完成というものだったのが問題なのだが。

まず、PureDocドキュメントはそのまま持ち込むことができる。
従来の.rebuild_rulesファイルや、ReasonSetにおけるglobal.rcファイルに変えて、.purenuilderrc.rbを用意することとなる。

おおよそそれでいいのだが、既にrcファイルで組み込んでテンプレートで利用していたような情報は.purebuilderrc.rbファイルに組み込まなくてはいけない。
また、これによって従来環境変数で処理していた物を、DOC.pbenvを使うように整合性をとらなくてはいけない。

このデバッグ作業に伴って、Purebuild Allに.rebuild_all_timeを無視して全てを対象とする-cを追加した。

そして、問題になったのがプロフィール部分だ。

これまで、プロフィールは単独のRubyスクリプトだった。rebuild_rulesから呼ばれることを爽亭しているため、設定は環境変数を通じて受け取ってはいるが、ドキュメントの生成、テンプレートへの埋め込み、そしてファイルの出力までプロフィール自体で行っていた。

しかし、これをそのままにできるわけではない。
設計上、これをPureDocであるとみなした処理したほうが早い。
だが、問題として、設定はあくまでもドキュメントを生成したあとに使えるようになっているため、ドキュメント内で使うことができない。PureDocを拡張してPureBuilder向けスクリプトにすることがかなり難しいのだ。

DOC内の@bodyStringまたはArrayという扱いだったが、実際にStringだと参照時に@body.joinを呼ぶためエラーになってしまう。この点については、PureDocのほうを修正することとなった。

こうした拡張がいまいちしづらいことを考えると、修正が必要かもしれない。
また、既存のPurebuildスクリプトを用いるのではなく、DSLによってビルドを指示できる仕組みも追加すべきだろう。

ウィルスバスターでサイトがブロックされる件の顛末

かの有名なtrendmicro社による誤認検知に巻き込まれてしばらくが経った。

発覚が遅かったが、恐らくtrendmicro社は最初にクレームがあった2014年4月から10ヶ月にわたってReasonSetをブロックしてきたのだろう。

他の方の事例

トレンドマイクロの誤検知、フリーソフトの開発を停止に追い込む

そしてそれが発覚し、申し入れをしたのが2月18日。 だが、何の連絡もない。一週間後の2月25日にもう一度申し入れ、それでも対応されないため3月5日にさらにもう一度申し入れをした。

そしてようやく3月5日に返信が来た。

トレンドマイクロ製品をご利用いただきありがとうございます。

弊社が提供するWebサイト評価について、評価内容変更のリクエストをお送りいただきありがとうございました。

対応が完了しましたので、結果をご連絡いたします。

修正されたが、それで済む話だろうか。

当然ながら、重大な営業妨害だ。

Aki SI&Eにコンタクトを約束したものの、その後連絡がない方はとても多い。 その中のすべてとは言わないまでも、サイトをみようとしたらウィルスバスターに阻まれ、 私、あるいはAki SI&Eを警戒して離れた方も多いはず。

さらに、発覚後はその対応のためにインフォメーションの印刷や、それをホッチキスでとめる作業など、かなりのコストが生じた。

業務に著しい支障がでているので直ちに対応してほしい、ということを再三申し入れたにもかかわらず、3週間以上何の返信もなく、 それでテンプレートで返すとは何事か。

他者に損害を与えているという自覚もないのだろうか。 なんだか殿様気分でいるようだ

損害賠償請求でもしたほうがいいのだろうか。

トレンドマイクロ社に再度申し立て

先週水曜日にトレンドマイクロ社に、ReasonSetがスパムとウィルス配布を行っている危険なサイトである、という判定によりブロックされている問題を受けてその反論をしたためて申し立てを行ったのだが、一週間経って以前回答がない。

そこで今日、再び申し立てを行った。

業務に大変な支障が出ているので早急に対応してほしい、という内容。 少し強く言うことにした。

こういうのは早急に対応されるべきだと思うのだが…

当サイトがウィルスバスターにブロックされる件について

当サイトがウィルスバスターによってブロックされる、という話は去年にもう聞き及んでいたのだが、その時点ではSSL証明書がルート認証局の署名をとっていないのが原因だろうと判断し、HTTPSでのアクセスをできないようにした。だが、2/16に依然としてブロックされるという情報が入り、調査したところ、どうやらウィルスバスターの「よくある誤検知」であるらしい。


同様に誤検知された方のブログ

このサイトはまだ、iPhoneのJailBreak(自身のiPhoneに標準でかけられている操作上の制約を解除し、iPhoneの管理者権限を取得する)に関する話題を取り扱っているのでわかるといえばわかるが、まっさらなサイトがターゲットにされることも。


新しく取得したドメインに初めてアクセスしたら、ウイルスバスターに「安全ではない」と警告された!

ウィルスバイターの(トレンドマイクロの)暴挙は有名で、

Slashdotで記事にもなっている

そもそも、スパムとウィルスの配布を行っているサイトだと言うのだが、当サイトはメールマガジンの配布すらしておらず、ドメインはスタッフのみが所有する。また、当サイトは何らソフトウェアの配布を行っていない。極めて言いがかりだ。

トレンドマイクロは頻繁に政治的圧力をかける。例えば2014年秋にはキュレーションサービス(2chやTwitterなどの発言をまとめたサイト)を一斉に有害なコンテンツのサイトと認定、そのほかWindowsの詳細設定を変更するツールをウィルスとみなし、最も危険なソフトウェアはCRPM解除ツールだと言う。

ちなみに、CRPM解除ツールを説明すると、いわゆるcopybreak、コピー防止機能を無効化するためのものである。日本においてはその配布、使用共に違法だが、本来私的複製は認められるべきものであり(日本ではデジタルデータの私的複製自体を禁止している)、これを禁止している先進国は日本くらいのものである。そして、トレンドマイクロは決して日本ローカルな企業ではない。

仮に倫理的側面で反対するという立場をとるにしても、それが「セキュリティ上脅威である」という判定は著しく不当である。「あいつのやり方は嫌いだ」という理由で「あいつは詐欺をしている」と社会的信用を背景として吹聴しているのだから。

風評被害を振りまいた上で「やめてほしければ金を払え」というやり方はひどいものだと思う。この「金を払え」はトレンドマイクロに直接支払うものではないが、かなりの金額である。当然ながらそのようなことができるのは大手だけであり、

そもそも風評被害を振りまいて、やめてほしければ金を払えというのは「反社会敵勢力のやり方」ではなかったのか?

まずは異議申し立てを行った。改善がみられなければ、訴訟しかあるまい。

HARUKA Sound/Aki SI&Eの正木と申します。

当サイトが危険である、との判定によって業務に多大な支障が出ております。

当サイトは所有するドメインによるメールアドレスは現在すべてスタッフ所有のものであり、メールマガジン、メーリングリストを含むマルチキャスティングは一切行っておりません。

また、サイト上でプログラムの配信を行っている事実もなく、技術的な内容の記載、業務のご案内を行っているものです。

早急に修正されますようお願い申し上げます。

サイト/サーバーに関する作業

HTTPSの無効化

HTTPでのアクセスを推奨しつつHTTPSのアクセスを可能にしていたのだが、証明書エラーを気にする方が多いので、そもそもHTTPSアクセスを無効にした。

HTTP推奨、HTTPS対応、SSL証明書無効というのは、実はUFJ銀行と同じなのだが(amakai.netの証明書を使用している。ゆうちょ銀行も似た方法。ちなみに、三井住友とりそなはNot Foundを返すようになっている。みずほはHTTPSが稼働していない)、どうしても警戒するらしい。

問題は、現代的なブラウザはスキームなしだとHTTPSから試してしまう上に、無効な証明書に対してセキュリティソフトが警告を出すこともあるためだ。

私の個人サイトだけなら別にいいのだが、仕事のほうのサイトでは受注に響く可能性が高い。そのため、そもそもHTTPSを無効化するという措置をとった。HTTPSは技術要求的な意味合いが強く有効にしてきたが、証明書の問題はコストの問題となるため、かなり難しい。もちろん、その構築が複雑である、という問題もある。

MozillaとEFFが、無料で簡単にHTTPSを使えるようにするためのものを用意しているらしいので、それに期待するしかない、といったところか。SSL証明書に関する悪質な利権主義が私は大嫌いだ。一部の人たちが「私達が認証局です」と名乗り、その身内か大金を払ったところが認証局となり、認証してほしかったら金を払えという。SSLの認証の仕組み自体が、利権を生むために作ったものだとしか思えないひどいものだ。

だからSSL証明書をとることは、金銭的にだけでなく、心理的にもかなり嫌だ。

PCの基礎知識の講座up-to-date

彼女にPCに関する知識をつけてもらわないといけないので、全然な人が日々覚えていくことで私の実務に使える知識が身につく講座をスタート。

メールで送っているものを転載している。

http://reasonset.net/chienomi/essay/articles/steady-study.html

CSS

CSSを更新したのだが、気づいたことがある。pre-wrapに設定されている場合などで、「折り返した行をインデントする」ということができない。だからおそらくはJavaScriptで論理行に交互に色付けすることが一般的になっているのだろうと思うが、それはあまり好みではない。

wrapされた行を指定するセレクタ、あるいは要素中の論理行を表すセレクタが欲しい。

サイトの大幅手直し

ウェブサイトに直すべき点が大量にあったためにかなり手をいれることになった。

CSSグラデーション、デザインの修正

まずベンダープレフィクスを用いたCSS3のグラデーションを入れた。

/* headline level2 decoration */
h2 {
width: 100%;
background: -moz-linear-gradient(left -65deg, #fff, #acf);
background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#acf));
}

これはAki SI&Eのほうのもの。これを使い、サイトロゴは透過画像として(新規に作成した)、背景にグラデーションを入れた。画像はフォアグラウンドのイメージ

/* Header container (Top position of Main container) */
#Header {
background: #fff;
padding: 0 1.3em;
max-height: 125px;
}

#SITE_REASONSET #Header img.sitebanner {
margin-right : 40%;
width: 50%;
}

#SITE_REASONSET #Header {
background: -moz-linear-gradient(left -65deg, #f0f8ff, #acf);
background: -webkit-gradient(linear, left top, right bottom, from(#f0f8ff), to(#acf));
}

SI&Eのほうはメインコンテナが950pxとっているのに切り替えを750pxにしていたのでこれも修正。

Aki SI&Eのほうはキャプチャのスタイルを変更。

h1 {
border-top : double 5px;
border-bottom: double 5px;
color: #39f;
margin-left: -1em;
margin-right: -1em;
margin-top: -0.8em;
text-align: center;

}

マイナスのmarginはあまり見ない気がする。このようなデザインはほとんど見ることはないが、なかなかパッとみてすっきりと見えて目を引く良いデザインだと思う。このために、テキストインデントのマイナスは消した。テキストインデントのマイナスは一行目にのみ適用されるらしい(brで改行すればその都度適用されるのだろうが、折り返しには適用されない)。

サイトバーウィジットの変更

AKi SI&Eが先行で変更され、それがReasonSetに反映され、さらにReasonSetで追加された機能がAki SI&Eのほうに入った。

<!-- Sub column -->

<!-- Menu -->

-*- Menu -*-

<%= ENV["SUBCOLUMN_CONTENT"] || "" %>

<!-- Notes if any -->
% unless DOC.notes.empty?

-*- Notes -*-
    % DOC.notes.each do |note|

  1. <%= note %>
  2. %end

% end

<!-- Navigation links with PureDoc and PureBuilder template -->
% if DOC.meta["link"] && ( DOC.meta["link"]["next"] || DOC.meta["link"]["content"] || DOC.meta["link"]["prev"] || DOC.meta["link"]["start"] )|| ENV["reasonset_link_content"] || ENV["reasonset_link_start"]

-*- Referrances -*-

% end

<!-- / Sub column -->

このために、これまでSubCloumnコンテナ直下にメニューがあったが、それとcontent_boxクラスを分離して、同クラスのdiv要素を追加している。

/* White background */
.content_box {
background-color: #fff;
}

/* Padding for continuous content box. */
.content_box + .content_box {
margin-top: 11px;
}

Aki SI&Eのほうはもう少し手の込んだものになっている。

#SideBar .container {
padding : 1.28em;
}

#SideBar .container:last-child {
margin: 0;
}

CSS3の:last-child擬似プロパティを使うことで最後が間延びしてしまうことを防ぎながら、要素を分離してチェックをみせるようにしている。

注釈をサイドバー内にも表示するようにした他、内容的にはこれまでコンテンツ側にあったACCSのserial articleのreferranceをサイドバーに表示するように変更した。

レイアウト方法の変更

これでサイドバーが長くなったのだが、なぜかこれではメインコンテナが短縮されてしまう。あくまでメインカラムの高さに合わせるのだ。構造としては

なのでこの挙動は謎だが、MozillaでもBlinkでも同様の挙動を示す。

floatすると一見うまくいくようだが、逆にサイドカラムの高さに合わせてしまい、メインカラムが突き抜けてしまう。また、幅もきちんと規定しなくてはいけない。

結局、3者全てinline-blockにしてしまえば高さは正しく確保される。ただし、これでは2つのカラムはmarginがとられないためぴったりくっついてしまう。

そこでこれをmargin, padding, border-widthが全て0のコンテナとし、paddingは別のブロックで確保する。paddingは設定してもよかったのかもしれないが、このほうが管理しやすい。

エッセイ用のほうが先行して開発されたので、構造が甘かった。ReasonSetはもう少し安定しているが、やはり作りなおしたほうが良いと思われる。ちなみに、ReasonSetが安定しているのは、高さが規定されているためでもある。

ここまでしたのだが、inline-blockで幅を%指定だとGeckoでは見られるが、Blinkでは上下にレイアウトされてしまう。ピクセル指定にすれば大丈夫だが、relativeにした上でレイアウトし、さらにfloatすれば%指定でもBlinkで正常に表示される。

ACCSの修正

まず、TOC機能がエラーになるようになっていた。以前はRuby2.0でやっていたが、2.1になったからだろうか?どうも、クラスが違うオブジェクトを持つArrayを比較しようとしている、ということらしい。文字列しか格納しないように思うのだが、一応to_s

essaies.push [ sortitem.to_s, fp.to_s, meta["title"] ]

TOCに戻るリンクが間違っていた。これは、設定ファイルがreasonset_link_contentsとしているのに、テンプレートはreasonset_link_contentとしているという単純な理由だった。これは、HTMLのlink要素に対応するのでcontentsが正しい。ちなみに、Essayにはその機能がそもそも含まれていなかった。

そして、ACCS記事間のリンクが機能しない。Talkin’ About(Aki’s Palace)との違いが見つからず、一体…と思ったのだが、grepしてみるとその設定はrbutilに含まれており、chienomiが専用で使っている。chienomiのリンクが機能していたので、当然Talkin’ Aboutでも機能しているものと思い込んでいたが、実際はTalkin’ Aboutでは機能しないわけだ。単に記事がひとつしかないので気づかなかっただけだ。

基本的にはACCS記事内でそのスクリプトをロードすれば機能するのだが、ロードすべきスクリプトが存在しない。chienomiのものはパスがハードコーディングされている。そのため、それを修正したバージョンを用意した。

また、「最初の記事」だが、

export reasonset_link_start="si/$wd_element/${artdir:+${$(print $artdir/*.pdoc):r}.html}"

となっていた。Talkin’ Aboutでは機能していたが、これは記事がひとつしかないからだ。つまり、複数のファイルがあると、それが連なった文字列(スペース区切り)の最後だけpdocをhtmlに変えることになってしまう。

当然、先頭のファイル名のみをとり出さなくてはいけない。(#q[1])で機能しなかったので、

export reasonset_link_start="si/$wd_element/${artdir:+${$(print -l $artdir/*.pdoc | head -n 1):r}.html}"

と変更した。単純な方法だが、そこまで繰り返し呼び出すわけではないので、head(1)を呼び出す程度どうということはないだろう。

ノートインデックスの作成

ノートのインデックスを作るため、まずPureDoc側を修正。その機能をスーパークラスに追加。

### Notes ###
# Add note text to an array
def addnote(note)
@notes.push note
end

attr :notes

サブクラスで呼び出し

# Note
def n(text, ¬e)
puredoc_element(:n) do
note = note.call
addnote note
'%s</pure:note>' % [esc!(note), esc(text) ]
end
end

ちなみに、HTMLクラスタイプだけノートとテキストが逆になっていた。どちらが正しいのかよくわからなくなっている。仕様を規定すべきだろう。

そして今修正した。

def n(note, &text)
puredoc_element(:n) do
addnote esc!(note)
'%s</pure:note>' % [esc!(note), esc(text.call) ]
end
end

これでノートインデックスの作成が可能になった。だが、これに対応した表示が本文に必要だ。これはCSSに任せる。

body {
counter-reset : notes;
}

/* Note element */
.puredoc_note:after /*, puredoc|note:after */ {
vertical-align: super;
font-size: 80%;
content : "\002020" counter(notes);
counter-increment: notes;
text-decoration: none;
}

content中の文字参照はどうするのだろう、と思ったら、16進数にした上でクォート内で

codebreak;

GitHubに容量制限があるらしい、と知った。というのも、サイトのリポジトリはマルチメディアデータを含むため、サイズがかなり大きくなる。

そこで代わりとなるリポジトリとしてcodebreak;を試してみることにした。codebreakは「無制限!」と言っている。で、使ってみると使い心地は良いが、プレビュー機能がいまいち。ダウンロードできないので、リポジトリをcloneして使う前提か?

そして、無制限というが、容量に関しては「大きくなると拡張するために申請いただく」とあり「無制限」とはニュアンスが異なっている。無制限なのは

  • (Githubと違い)プライベートリポジトリの数が無制限
  • (BitBucketと違い)プロジェクトの参加ユーザー数が無制限

だが、「codebreak」で検索してみると興味深い記事がみつかる。

BIZREACHというIT系リクルートサイトがはじめたプログラミングSNSであるcodebreak;。これをみると、登録しようとするとウィザードが始まり、これが完全にリクルート登録的なものであること(職場、地位、年収など)、さらに使いはじめるには審査があり、審査に合格しないと使い始められないこと、しかもその審査がかなり「リクルート登録的に」厳しいことから相当不興を買っていた。ほとんど転職サイトで、gitホスティングサービスとしての体をなしていなかった、ということのようだ。

公開は2013-05となっていて、その頃話題となり、ぱっと消えてしまった、という感じだろうか。だが、今回登録した限りでは特にそのような入力項目自体がなく、ごくごく普通だった。審査がいる、というものも撤回され、誰にでも使える、とFAQで明記されている。コードブレイクは、IT・Webエンジニアの方向けのソフトウェア開発を行うためのツールです。特段アカウント作成に条件はありません。Webデザイナー、Webプロデューサー、ディレクターの方々など、Git関連サービスをご利用になられたい方なら誰でもご登録いただけます。

問題視されていた「httpsのみ」「pull request不可」「wikiなし」なども修正されている。もしかしたらバックが代わったのではないか、と思うくらいに「普通」だ。容量については200MB制限だったらしいのだが、それについてはパブリックリポジトリ、およびプライベートリポジトリの作成制限はありませんが、一定以上の大量のデータをホスティングした場合、さらに容量を拡張するために申請をしていただく必要がある場合があります。と言い方がやわらかい。

というわけで普通に使えるのだが、それでもちょっと容量が怖い。BitBucketも試したのだが、容量無制限ではあるものの、「コードだけだ!」とかなり強く書いてあるので、ドキュメントだとダメなのかもしれない。

そのため、結局マルチメディアファイルは.gitignoreでgitの管理から外して、Google Driveにアップして使用することにした。一応、データ自体は本サーバーにアップしてあるが、PDFに関してはもしもということがあるので。

DeleGateでHTTPSリバースプロキシ

私のサイトはずっとhttpsで接続できなかったのだけれど、ようやく手を入れることにした。

HTTPSによる接続自体はできるのでサーバーは動いているし、ファイアウォールも阻害していない。証明書関連の問題だと判断できる。

DeleGate + SSLについての情報は大概が古く、SSLwayについてしか言及されていない。DeleGateの最新マニュアルを見ると、STLSというビルトインTLSフィルタを持ち、またビルトイン匿名証明書を持つため証明書も不要であるように思える。ではどう使うのか??

jfuruyaのブログに答があった。DelegateのパラメータとしてSTLS=”fcl,fsv:https”を渡す必要があるのだ。しかしこれだとHTTPでアクセスするとはじかれる。ちなみに、SERVER=httpではhttpsで接続しろと言われる。マニュアルを確認、どうもSTLS=”-fcl,-fsv:https”であるべきであるということが分かった。

しかしそのままでいくとスタイルシートが表示されない。どうやら、httpsでページを表示しているのにhttpでスタイルシートをロードしているのが問題らしい。つまり、リンクはhref=”http://…”ではなく、一般には説明されない書式でスキームを維持するhref=”//…”形式にしなくてはいけないようだ。

とりあえずこのような特殊な接続をする人はいないと思うので、全体は修正していないが、ビルド時にテンプレートを変更するので、サイト全体をビルドする時には直る、はずである。