読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

Web

ubuntuにaptでインストールしたnginxをstableからmainlineに切り替える

ガラクタIT創作活動へのモチベーションも回復してきたので、私が活動の場としているサイトやブログ・SNSの再構築に取り掛かることにした。 まずはWebサーバーのnginxをstableからmainlineのバージョンにアップデートすることにした。 作業はaptでバイナリイ…

コンテンツの修復と整理をしようとしている。

私はいろいろなところにコンテンツを作っては放置しているが、Webは常に進化しており、気がつくと動かなくなっていたりする。 https://www.sfpgmr.net/ http://bl.ocks.org/sfpgmr/ https://github.sfpgmr.net/graphics/ その修復と、サイトの再構築を行おう…

jxckさんのブログサイトが恐ろしくスマートな件について

Web

いやーこういうブログサイトを作りたいんだよね。やっぱり。 blog.jxck.io ブログ自体が技術の実験場になっているという。私がやりたいのはこういうのなのだ。ただデザインの好みは少し違うけどね。 HTTP/2に対応したり、AMPに対応したり、自分でATOMを吐い…

nginx上でHTTP/2のALPNを有効化することができた。原因はopensslのバージョンが古かったから。

HTTP/2 TestでALPNがサポートされていないと表示されるので、原因を探ったところどうもopensslのバージョンが古いらしいということが分かった。 なので、opensslの1.0.2hをインストールした。インストール方法は下記の情報を参考にした。 qiita.com インスト…

自サーバーのHTTP/2対応は完了した。静的サイトジェネレータ制作のモチベーションが上がってきている。

自サーバーのHTTP/2の対応は完了した。Web上での情報を参考にしながらLet's Encryptで証明書を取得し、nginxに設定を追加したらあっけなく動作した。 ただALPNが非サポートとなってしまっている。これを今調べているところだ。 SSL Labのテストでは「A」とな…

ChromeのSVGPathSegListが削除されていた。

気が付くと、下記のサンプルがChromeで動かなくなっていた。ちなみにFirefoxやEdgeでは問題なく動作したのだが。 three.jsのPathのシリアライズ(2) - bl.ocks.org paths.each(function(){ // 馬セルの取り出しと座標補正 var path = d3.select(this); consol…

Chameleonという古いWebブラウザ

Web

ChameleonというWebブラウザをご存じだろうか。実は私のWWWとの最初の接点はこのWebブラウザだった。 The Chameleon Web Browser 1994年か1995年ころだったと思うが、とあるWindowsユーザーにモデムでインターネットにつなぐという仕事を請けて(当時はSEと…

Cascading Style Sheetの記法はなぜあのような形になったのか。(2)

続き。 blog.sfpgmr.net 前回CSSがほぼ今の形になったのは1995/11/1版だと言ったが、違っていた。1995/11/1はassignmentの属性と値を結びつける記号が'='だったのが':'に変わっただけだった。 下の一覧はCSS Level 1が勧告となるまでの版を一覧である。ほぼ…

Cascading Style Sheetの記法はなぜあのような形になったのか。

CSSの記法ってなぜこんな風になったのだろうとちょっと疑問に思った。なんとなくJSON風でだけどそうではない独特の記法だ。セレクタにマッチするスタイルの内容をブレス({})中に記述するという記法はどのようにして生み出されたのか。 h1 { font-size:10pt; …

ブラウザ上で動くx86エミュレータ上で動くWindows 98とIE4

これもたまげたなぁ。。JSで動くエミュレータ上で動くWindows 98。IE 4.0が懐かしい。。Dynamic HTMLとか、Netscapeと競っていたころだよね。。それとアクティブ・デスクトップね。 Virtual x86 ネットワークはつながらないので、IE4でブラウジングすること…

ブログの見た目を作る

ちょっとずつではあるが、新しいブログシステムの見た目を作りはじめている。正直このあたり苦手なので試行錯誤している。ようやくモバイル用のハンバーガーメニューみたいなものができたところだ。 レスポンシブ・デザインなんていうのは今ではごく当たり前…

CSS-ボックス内のテキストの縦方向のセンタリングが思いのほか難しい

CSSのテキストの縦方向のセンタリングは簡単にできそうで難しい。 <html lang="ja"> <head> <title>縦方向のセンタリング</title> <meta charset="UTF-8" /> <style> body { height:250px; } .va { margin:auto; display:block; width:200px; height:200px; text-align:center; vertical-align:middle; word-break: normal; backg</meta></head></html>…

マイクロサービスについて思うこと

Web

マイクロサービスとかいうワードを見聞きして「Webサービスのジャンルでもモノリシックかマイクロとかいうくらい成熟してきたか。」と思った。 一昔前のOSのカーネルもマイクロカーネルかモノリシックカーネルかというのがあった。世の中のOSはほぼモノリシ…

レスポンシブUIフレームワークを作りはじめる - 勉強しながら実装しつつ、軽量フレームワークを研究しようかなと

軽量なレスポンシブUIフレームワークをいちから作ろうかなと手を動かし始めた。もうタスクランナー周りの設定でおなか一杯になっている。何も出来ていないのに趣味としては十分な満足度が得られるという、おかしなことになっている。レポジトリの状態は以下…

cssnext(postCSS)を使ってみることにする。

自分でブログシステムを作ろうとしているが、UIをどうしようかと考えていた。 Bootstrapを使おうと思っていたけど、もれなくjqueryがついてくるのでそれがちょっと無駄に思えてくる。Bootstrapもナビゲーションあたりしか使っていないし、DOM操作は最近はd3.…

Lorem ipsum

Web

よくUIライブラリのサンプルテキストとして使用される下記のテキストって何語なんだろうっていつも思っていた。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim a…

script要素中のHTMLデータのエスケープと、JSON-LDデータのエスケープを考える。

自前ブログシステムのデータの持たせ方を考えている。 アイデアとしては以下のような、HTML中にJSON-LDデータを埋め込む形を考えている。 JSON-LDにコンテンツデータを持ち、それをスクリプトでレンダリングして表示するのである。で、コンテンツデータは当…

W3Cのグッズをもらった

Web

JSON-LDの翻訳をしたら、思いがけないプレゼントをいただいた。W3CのTシャツとステッカーである。ちょっとうれしい。 ちょうどジョギングを始めたところなので、使わせていただくことにしよう。

JSON-LD 1.0の日本語訳に取り組む(12)

推敲は相変わらずのペースだが、誤字・脱字や訳し漏れはかなり解消した。 W3Cには一応翻訳が完了したと伝えておいたが、先日返答があり、W3Cのページに掲載したとのことだった。 Japanese Translations of W3C Documents Translations of JSON-LD 仕様をいく…

JSON-LD 1.0の日本語訳に取り組む(11)

ただいま推敲中である。 JSON-LD 1.0 結構記述ミスや原文を残しっぱなしであったのでその修正に追われあまり推敲できていない。 読み返すとわかるけどやっぱり翻訳文は直訳では読みにくい。日本語には日本語らしい言い回しというのがあって、英語そのままの…

JSON-LD 1.0の日本語訳に取り組む(10)

ようやくJSON-LD 1.0の翻訳が一通り完了した。 JSON-LD 1.0 続いて本文を読んで推敲に入ることにするが、とりあえず全部翻訳したのでW3Cに連絡をすることにした。一応下のルールに従って進めている。 W3C Translations もっとすらすらと翻訳できたらなぁと思…

JSON-LD 1.0の日本語訳に取り組む(9)

ようやくA.の翻訳が終わった。 http://sfpgmr.github.io/jsonld/JSON-LD1.0.html#relationship-to-other-linked-data-formats あとB. C. D.の3つを訳せばようやく一段落だ。推敲がまだ残っているが。 この翻訳のペースで分かる通り私は英語が苦手だ。と…

JSON-LD 1.0の日本語訳に取り組む(8)

ようやく9.の翻訳が終わった。 http://sfpgmr.github.io/jsonld/JSON-LD1.0.html#relationship-to-rdf やっぱり英訳というのは難しくて、直訳ではどうにも意味不明となってしまう。というか直訳できているのかも不明だが。 この節の内容はRDFに疎い私にと…

JSON-LD 1.0の日本語訳に取り組む(7)

ようやく8の翻訳が完了した。次の9.がまた長い。今週中に完成できるであろうか。 JSON-LD 1.0 5、6、7、8についてはJSON-LDのまさに核心部分が記載されている。その部分の翻訳内容については原文も合わせて読むことをお勧めする。 ここまで読んできた…

JSON-LD 1.0の日本語訳に取り組む(6)

Google翻訳の精度を上げる方法を見つけたおかげで多少翻訳がはかどっているような気もする。とりあえず今日は7.までの翻訳を終えた。 JSON-LD 1.0 残り1/4程度となってきた。訳がおかしいところがそこそこあるし、同じ単語やセンテンスを違う言葉で書いてし…

JSON-LD 1.0の日本語訳に取り組む(5)

ようやく6.20までの翻訳を完了した。残りは1/3くらいある。 JSON-LD 1.0 Google翻訳だけど、Webページを丸ごと翻訳すると支離滅裂になるけれども、文章をコピーして段落ごとに翻訳すると結構正確になることが分かった。 おそらくHTML文書だと翻訳するのに関…

JSON-LD 1.0の日本語訳に取り組む(4)

ようやく6.11まで翻訳完了。ようやく半分くらいまで来た。 JSON-LD 1.0 語彙が貧困なせいで翻訳の精度が低いため、意味不明な個所もあちこちにできてしまっている。一度通して翻訳して読み直し、原文と比較しながら推敲しなくてはいけないと思う。 どうやっ…

JSON-LD 1.0の日本語訳に取り組む(3)

6.8の途中まで何とか翻訳 JSON-LD 1.0 翻訳にテンパっており、内容理解がいまいちなのが悲しいところである。 この6.のパートが結構重要なのでちゃんと翻訳したいのだがいまいち自信がない。。 しかし結構長いな。後1週間は確実にかかりそうだ。

JSON-LD 1.0の日本語訳に取り組む(2)

JSON-LDの日本語訳であるが連休中に少しでも進めようとして取り組んでいて、ようやく6章にかかるところまで来た。 JSON-LD 1.0 しかしまだ全体の1/4程度を訳したに過ぎないし、素人なので誤訳も多いと思う。 ブログを引っ越すために静的コンテンツジェネレー…

Project Spartan(Edge)のHTML5の準拠度をチェックする

Project Spartanの今のHTML5準拠度ってどれくらいなのか。ということでHTML5 Testを実施し、他のブラウザと比較してみることにした。 総合 まずは総合ポイント。満点は555ポイント。 項目 Spartan Internet Explorer 11 Chrome 39 Firefox 35 総合 390 348 5…

bl.ocks.orgへの対応

gistupという強力なツールを得たので、bl.ocks.orgのフォーマットに合わせてgistにファイルをアップロードしてみた。サンプルとしては稚拙なものではあるが、これで容易にサンプルおよびソースコードを表示できますな。。。 これからYoutube Data APIいじり…

gistjsをforkしてみる。 gistへの画像アップロード。

www.sfpgmr.netの自己キュレーションサイト化に取り組んでいて、Youtube Data APIを勉強がてら叩いてみているところ。その経過をブログで報告するのにソースコード部分をgistにアップして置いてそれをブログにエンベッドしようかなと思った。ソースコードの…

OAuth2

現在のWeb APIはOAuth2.0を基本認証としているものが多い。例えばYoutube Data APIではOAuth2.0認証でないと読み書きができなかったりする。このOAuth2.0というのはそもそも「ユーザーがWebアプリケーションに対してユーザー自身のリソース提供を許認可する…

ぼちぼちとwww.enoie.netサイトページの改造に取り組む

ようやくやる気が出てきた。のでwww.sfpgmr.netページの改造に取り組むことにした。 当初考えていた通りnode.jsでYoutube API,Twitter API,Tumblr API,はてなブログAPI,etc..を叩いて自己キュレーションサイトのようなものを作る。今は各SNSのAPIのコードを…

www.enoie.netのリニューアル - 開発環境の整備やJSON-LDの導入に備える

Web

環境整備 www.sfpgmr.netのリニューアルにあたりまずは環境整備を行った。 ちょうどVS2013 Community Editionがリリースされたのでそれに入れ替え、NTVSやWeb Essentialsをインストールした。そしてgithubにリポジトリを作った。 この環境を使って以下のサイ…

http://www.enoie.net/ のテコ入れ

Web

東京メトロの件はとりあえず一段落したので、http://www.sfpgmr.net/のリニューアルを行うことにした。下図のような自己コンテンツまとめサイトのようなものを考えている。 各SNSやBlogから自前のコンテンツを集めてきて体裁の良いページにできないかなと。 …

Bootstrap 3.2のresponsive embedは何気に便利である。

Bootstrapのresponsive embedは何気に便利である。Youtubeの動画を貼りつけるとモバイル画面だとうまく縮小してくれないが、それをうまい具合に縮小してくれるのが、responsive embed機能である。この機能を使用するには、 Youtubeの動画<iframe>を <div>で囲む <div</iframe>…

はてなブログのカスタマイズ - Adsenseの配置

Adsenseコードを配置した はてなブログProでは広告コードの表示を非表示にすることができ、代わりに自分の広告コードを通常ではサイドバーなどに表示することができる。ただ自由度は低くて、記事と記事の間とかに広告コードは貼りつけられない。 Adsenseって…

Bootstrapによるはてなブログのカスタマイズ - なんとなく方向は固まったかな。

カスタマイズしたものに変更 昨日カスタマイズしたものを実際に反映した。今見えている「見てくれ」がそうである。 LESSファイルはここにある。ソースコード自体は「boilerplate」をベースにしている。 実際行った手順は下記の通りである。 Hatena-Blog-Them…

LESS - extendの書き方と@import (reference)

ブログテーマをBootstrapベースでカスタマイズしている。 今日はLESSの知識を深めるためにLanguage Features | Less.jsを読んでいたのだけれども、extendの書き方や@importも機能が拡張されていることを知った。日本語のLESSの情報はこの辺りアップデートさ…

LESS - &:extend()と引数なしMixinの違い

LESSでクラス定義を&:extend()と引数なしMixinした場合の結果がどう違うのかテストしてみた。どちらも事前定義したクラス定義を適用するものである。 .btn-test { text-align:center; border:1px solid gray; color:black; &:hover { background-color:red; …

はてなブログをBootstrapベースでカスタマイズする

今日はBootstrapをおさらいしながら、「boilerplate」テーマのカスタマイズを行っていた。 どのようにカスタマイズするのかをもう少し具体的に言うと boilerplate.lessの@import部分をすべてリマークする。 代わりにbootstrap.lessを@importする。 boilerpla…

ブログ・システム構成

システム構成 ここ数日システム構成をぼやっと考えていたが、まとまってきたので図にしてみた。 UAとの静的コンテンツのやり取りは基本NGINXを経由して行う。UAからのコンテンツ要求はすべてNGINXによりgzipで返す。ファイルシステム内のコンテンツはすべてg…

ブログシステムのアイデアを練る

ブログシステムの実装アイデアをここ2-3日ぼーっと考えている。 ここ何日かでまとまってきたのは、 ブログ記事をJSONデータで持つ HTMLをテンプレートとしてJSONデータをKnockoutでレンダリングする つまりはサーバーサイドではレンダリングせず、クライアン…

開発環境のセットアップ(2)

今日までに下記のインストールセットアップを行った。 仮想マシンの作成。 8.1のクライアントHyper-Vを使用して仮想サーバーを一台作成。VPSに合わせメモリ1GB、HDD 10GBで作成。 CentOS 5.2のインストール。 仮想マシンにVPS環境と同じCentOS 5.2をインスト…

開発環境のセットアップ

とりあえずCentOSを入れ、nginxを入れ、php-fpmを入れ、MySQLを入れ、VPSのconfigを投入し、、と続けているがまだVPSと同じ環境までには至っていない。nginxは動くものの、phpとの連携がうまくいっていない状態だ。まあ数日のうちに解決するだろう。 メモリ8…

うーんしかし悩むな。。

最近いろいろなWeb技術を顔は思い出すが名前は思い出せないレベルに衰えた脳みそに詰め込みすぎたせいか、脳内はWeb技術のキーワードでごちゃごちゃした状態となっており、今後どう進めるべきか決めあぐねている。 WordpressのテーマをBootstrapベースで作ろ…

Tumblrブラウザを作る(1)

node.jsの勉強用として作り始めたが、機能をクライアントサイドのjQueryにほぼ移行してしまったのでタイトルを変更した。 一番大きいブロックにに動画が表示された時だけ、YouTube Player APIを使ってプレーヤーを表示するようにしてみた。 ソースコード

IEの行く末

Web

「小さなスタートアップが、IEを捨てて10万ドル以上節約した」の記事に賛同するものの、今私が普段使っているブラウザはIE10である。 実はWindows8がリリースされる前まではChromeブラウザを主に使用していた。シンプル・軽い・速い・しかもネイティヴコード…

node.jsというのが面白そう

Tumblrブログのカスタマイズを考えていて、PHPでAPIでどうこうとか考えていたらふと目についたnode.jsというもの。サーバーサイドJavaScript実行環境らしい。名前だけは以前から知っていたものの、リソースを漁ってみるとこれがなかなか面白いものである。本…