flint blog
www.flint.jp/blog/
flint blog: RSS
-
HTMLテーブルのデータ部スクロール
http://www.flint.jp/blog/?entry=142
<div class="entry-image" style="background-color: #ffffff; padding: 0 0 1ex 1ex; margin: 0;">
<a href="/temp/table_scroll/img/0.png"><img src="http://www.flint.jp/blog/image.cgi?entry=142&index=0" alt="部分スクロール" title="部分スクロール" /></a>
</div>
<p>
<a href="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">HTML</a>でテーブルを記述するには <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/table"><table>要素</a> (タグ) を使用します。
その際、「行」を表す <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/tr"><tr>要素</a> を<table> 要素の直下に配置しても構わないのですが、セマンティクス、すなわち
</p>
<div class="whiteboard">
それが「見出し行」と「データ行」のいずれであるのかを<a href="https://ja.wikipedia.org/wiki/ウェブブラウザ">ブラウザ</a>に明示する
</div>
<p>
という観点から、<table> 要素の下に「見出し」セクションを表す <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/thead"><thead>要素</a> および <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody"><tbody>要素</a> を配置し、<tr> 要素はそれらの中に記述するのが好ましいとされています。
現状では <thead>, <tbody> 要素を使用してもしなくても、レンダリングにおける差異はないのですが、MDNのページにある以下の記述:
</p>
<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody">
<p>
表が (ウィンドウのような) 画面に表示される場合で、表全体を表示するのに十分な大きさがないとき、ユーザーエージェントは <thead>, <tbody>, <tfoot>, <caption> ブロックを親である表から独立してユーザーがスクロールさせることができるようにするかもしれません。
</p>
<div class="cite">
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody"><tbody>: テーブル本体要素 - HTML: HyperText Markup Language | MDN</a>
</div>
</blockquote>
<p>
を読んで「それは素晴らしい!」と感動して以来、テーブルを書く際は可能な限り <tbody> を記述するようにしているのですが、それから十余年経ってもテーブルデータ部の独立スクロールがWeb標準として実装されるという話は寡聞にして一切聞こえてきません。
面倒くさいのを我慢して律儀に <tbody> タグを記述し続けた俺の10年を返せ。
......などと言っても詮無き事。
せっかく <tbody> タグを記述したのだから、スクロール機能も自分で実装すればいいじゃない。
</p>
<p>
というわけで、今回は <a href="https://ja.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a> と <a href="https://ja.wikipedia.org/wiki/JavaScript">JavaScript</a> を駆使してテーブルデータ部の独立スクロールに挑戦しようと思います。
</p>
<div style="clear: both;"></div>
2022-12-04T15:59:59Z
-
テーブル設計アンチパターン
http://www.flint.jp/blog/?entry=135
<div class="entry-image">
<img src="http://www.flint.jp/blog/image.cgi?entry=135&index=0" alt="" />
</div>
<p>
6月下旬から連日40℃近い酷暑に見舞われ、最高気温が35℃を下回ると「今日はちょっと涼しいね」などという会話が交わされている<a href="https://ja.wikipedia.org/wiki/甲府盆地">甲府盆地</a>よりお届け致します。
皆様におかれましては熱中症対策などを十分に講じ、体調に気を付けてお過ごし頂ください。
</p>
<p>
これまたいつものことですが、現在の仕事は既存システムの改修がメイン。
先月までは <a href="https://www.ipa.go.jp/security/announce/ie_eos.html" title="Microsoft 社 Internet Explorer のサポート終了について : IPA 独立行政法人 情報処理推進機構">Internet Explorer のサポート終了</a>に備え、<a href="https://www.sophia-it.com/content/モダンブラウザ" title="モダンブラウザ (modern browser) とは - IT用語辞典バイナリ">モダンブラウザ</a>で動作しない <a href="https://ja.wikipedia.org/wiki/JavaScript">JavaScript</a> の書き直しや、<a href="https://ja.wikipedia.org/wiki/VBScript">VBScript</a> による機能のサーバ側への移設といった作業に忙殺されておりました。
ブラウザの移行に伴って発生する動作不良への対応なので、問題が発生するのは基本的にクライアント側なのですが、その原因や対処法を探る際にはサーバ側の動作を含め、対象システムのすべての挙動を調査・把握する必要があります。
</p>
<p>
そうした分析業務を妨げる要因のひとつに「低品質な<a href="https://ja.wikipedia.org/wiki/プログラム_(コンピュータ)">プログラム</a>」の存在であることは以前の記事で述べた通り:</a>
</p>
<blockquote cite="http://www.flint.jp/blog/?entry=133">
<p>
それでも、よく管理されているプロジェクト、よくメンテナンスされているシステムではプログラムの質も比較的優良であり、その改修・拡張といった作業は開発元企業に属する人員によって行われている場合が多いようです。
一方、私のような「外注」に改修依頼が出されるようなプログラムというのは、開発元の「正規部隊」が手を付けられない、あるいは<b>手を付けたくない</b>ほどに低品質なものであるというのが相場。
</p>
<div class="cite">
<a href="http://www.flint.jp/blog/?entry=133">低品質コードの成長過程</a>
</div>
</blockquote>
<p>
今回の記事では、これと双璧を成す「低品質な<a href="https://ja.wikipedia.org/wiki/データベース設計">データベース設計</a>」について、事例ごとに問題点とその背景について解説してみたいと思います。
</p>
<div style="clear: both;"></div>
2022-07-04T15:30:00Z
-
野菜の肉巻き・生姜ソース
http://www.flint.jp/blog/?entry=141
<div class="entry-image">
<img src="http://www.flint.jp/blog/image.cgi?entry=141&index=0" alt="" />
</div>
<p>
一人で暮らしている私は外食をする機会も多かったのですが、<a href="https://ja.wikipedia.org/wiki/新型コロナウイルス感染症の世界的流行_(2019年-)">新型コロナウイルスが流行</a>し始めて以降は、その頻度は顕著に低下しました。
外食をする場合でも、
</p>
<ul>
<li>混む店には行かない</li>
<li>混む時間帯には行かない</li>
<li>店の前まで来ても混雑していたら入らない</li>
</ul>
<p>
など、感染リスクを抑えるよう心掛けてはいますが、自分の後からマスクを外した状態で大声で話す<span style="text-decoration: line-through;">迷惑きわまりない</span>団体が入店してきた場合などは、有効な対処をすることは困難。
目の前の料理を掻き込むように平らげて、可能な限り速やかに店を出るしかありません。
</p>
<p>
そんなわけで、必然的に食事は自宅でということが多くなるわけですが、コンビニエンスストアやスーパマーケットで購入する総菜に対して自分の好みにぴったり一致する材料, 切り方, 味付け, ...等々を期待するのは詮無きこと。
飽きずに自宅での食事を続けるには、自炊技術を向上させる必要があります。
</p>
<p>
そこで今回は、自分が作る料理のレパートリーの中で「定番」の位置を占める一品「野菜の肉巻き・生姜ソース」を紹介します。
</p>
<div style="clear: both;"></div>
2022-03-20T17:00:00Z
-
The 10th Anniversary
http://www.flint.jp/blog/?entry=140
<div class="entry-image">
<img src="http://www.flint.jp/blog/image.cgi?entry=140&index=0" alt="" />
</div>
<p>
日本中で<a href="https://ja.wikipedia.org/wiki/新型コロナウイルス感染症_(2019年)">新型コロナウイルス感染症</a>が拡大する中、<a href="https://ja.wikipedia.org/wiki/新幹線">新幹線</a>も<a href="https://ja.wikipedia.org/wiki/空港">空港</a>もない<s>ド田舎</s><a href="https://kotobank.jp/word/陸の孤島">陸の孤島</a>ぶりが幸いして奇跡的な清浄さを保っていた<a href="https://ja.wikipedia.org/wiki/山梨県">山梨県</a>の、ゴールデンウィーク明け頃からの感染者数急増に恐れ慄いている昨今、皆様は如何お過ごしでしょうか。
タイトルにもある通り、独立して今年で10年。
8年目, 9年目は<s>面倒くさい</s>特段書くこともなかったためアニバーサリー記事の執筆をサボってしまいましたが、さすがに10年の節目には何か書いておかないと、読む人がいるかどうかはともかく自分の意識が緩み切ってしまいそうなので、アップロード予定日の2週間前からポツポツと認 (したた) めている次第です。
</p>
<p>
肝心の仕事の方はどうかと言えば、この4月からとある大手企業のオフィスに入り、そちらの業務システムの改修に携わらせて頂いております。
使用する言語も <a href="https://ja.wikipedia.org/wiki/Visual_Basic_.NET">VB.NET</a> および、<a href="https://ja.wikipedia.org/wiki/レガシーシステム">レガシーシステム</a>を構成する<a href="https://ja.wikipedia.org/wiki/VBScript">VBScript</a>とこれまでに縁のなかったもので、<a hrf="https://ja.wikipedia.org/wiki/BASIC">BASIC</a> を扱うのは <a href="https://ja.wikipedia.org/wiki/N88-BASIC">PC-98 時代</a>以来となる私は昔を懐かしみつつも、仕事の傍ら勉強に励んでおりました。
そうそう、<a href="https://docs.microsoft.com/ja-jp/dotnet/visual-basic/language-reference/statements/for-next-statement" title="For...Next ステートメント">For ループは Next で閉じる</a>んだったねぇ......。
まぁ、私ほどのプログラマともなれば、使い始めて2ヵ月経った頃には<b>完全に理解</b>できてしまっていたわけですが。
</p>
<blockquote cite="whiteboard">
<div style="margin: 1em;">【エンジニア用語解説】</div>
<dl style="margin: 1em;">
<dt><b>「完全に理解した」</b></dt>
<dd>製品を利用をするためのチュートリアルを完了できたという意味。</dd>
<dt>「なにもわからない」</dt>
<dd>製品が本質的に抱える問題に直面するほど熟知が進んだという意味。</dd>
<dt>「チョットデキル」</dt>
<dd>同じ製品を自分でも1から作れるという意味。または開発者本人。</dd>
</dl>
<div class="cite">
<a href="https://togetter.com/li/1268851">エンジニアの言う「完全に理解した」「なにもわからない」「チョットデキル」って本当はこういう意味?「わかる」の声多数 - Togetter</a>
</div>
</blockquote>
<div style="clear: both;"></div>
2021-07-03T09:00:00Z
-
ゲームを通じて英語に触れる
http://www.flint.jp/blog/?entry=139
<div class="entry-image">
<a href="https://news.denfaminicogamer.jp/news/200410k"><img src="http://www.flint.jp/blog/image.cgi?entry=139&index=1" alt="Skyrim on Quarantine" title="Skyrim on Quarantine" /></a>
</div>
<p>
<a href="https://ja.wikipedia.org/wiki/新型コロナウイルス感染症_(2019年)">新型コロナウイルス感染症</a>の蔓延への対応として日本で最初の<a href="https://ja.wikipedia.org/wiki/緊急事態宣言">緊急事態宣言</a>が発令されてから一年余り。
この間、程度の変化はあれど、基本的には<a href="https://ja.wikipedia.org/wiki/3つの密">三密</a>の発生を避けるべく、公的・私的を問わず人が寄り集まることは禁忌とされてきました。
これにより、友人らと遊び歩くことができなくなった人々のストレスはすさまじいものがあります。
我々のような大人については「社会人として理性と責任が求められる立場なのだから我慢してみせろよと」と思うところですが、友人らと共に学び、語り、競い合うことで社会性を身につけていく年代の子供たちは大変に気の毒であり、また、社会制度の変更を含めた継続的な公的ケアが必要になるだろうと考えています。
</p>
<p>
その一方で、私個人の生活の変化について言うならば、未だ限定的ではあるものの、<a href="https://ja.wikipedia.org/wiki/テレワーク">在宅勤務</a>の導入が進み、人と会うために家から出ていく機会が減った現在の状況は非常に快適であるというのが正直なところです。
趣味といえば<a href="https://ja.wikipedia.org/wiki/プログラミング">プログラミング</a>, <a href="https://ja.wikipedia.org/wiki/数学">数学</a>, <a href="https://ja.wikipedia.org/wiki/物理学">物理学</a>, <a href="https://ja.wikipedia.org/wiki/読書">読書</a>に<a href="https://ja.wikipedia.org/wiki/料理">料理</a>と、どれも一人でできるものばかりという引きこもり気質の影響も大きいでしょう。
それら孤独に楽しむ趣味の中でも、とりわけ<a href="https://ja.wikipedia.org/wiki/コンピュータゲーム" style="font-weight: bold;">ゲーム</a>に費やす時間は大きく増加。
ゲームのコンテンツそのものを楽しんでいることはもちろんですが、その副次的な作用として、独立して以来めっきりと使用頻度が減っていた<a href="https://ja.wikipedia.org/wiki/英語">英語</a>の読み書きをする機会が増えるという意外な効果が現れました。
</p>
<p>
というわけで今回は、本エントリを通じてこれらのゲームに興味を持ってプレイを始め、それによって外出制限下でも楽しく時間をつぶすことできる人が増えることを願って、このコロナ禍の期間であるかないかに関わらず私がゲームの中で出会い感銘を受けた英語表現について紹介していきます。
</p>
<div style="clear: both;"></div>
2021-06-06T12:59:59Z
-
二地点間の距離の計算
http://www.flint.jp/blog/?entry=138
<div class="entry-image" style="overflow: hidden; border: solid 1px #c0c0c0; border-radius: 1em;">
<img src="http://www.flint.jp/blog/image.cgi?entry=138&index=0" alt="" />
</div>
<p>
近年の<a href="https://ja.wikipedia.org/wiki/スマートフォン">スマートフォン</a>普及の勢いは目覚ましく、日本においてはほとんどすべての人がこれを持ち歩く社会となりました。
そのため、私が開発・改修を手掛けるシステムの中にも、端末が備える<a href="https://ja.wikipedia.org/wiki/グローバル・ポジショニング・システム">GPS</a>モジュールによって取得された利用者の位置情報を利用するものが多々出てくるようになっています。
位置情報の利用方法は様々ですが、その中で最も大きな割合を占めるのが、システムに登録された施設 (店舗やATM等) と利用者の間の距離を計算して近いものを提案するというもの。
単純な直線距離ではなく、道路や線路などに沿った実際の移動距離を求める場合もありますが、その場合も連続する線分 (折れ線) で近似された経路の長さを計算することになるので、結局は二点間の直線距離の計算に行き着きます。
</p>
<p>
2地点の座標 (λ<sub>A</sub>, φ<sub>A</sub>), (λ<sub>B</sub>, φ<sub>B</sub>) (λ は<a href="https://ja.wikipedia.org/wiki/緯度">緯度</a>、φ は<a href="https://ja.wikipedia.org/wiki/経度">経度</a>) からこれらの間の距離を求める計算はそれほど難しいものではありません。
まず、<a href="https://ja.wikipedia.org/wiki/地球">地球</a>を、<a href="https://ja.wikipedia.org/wiki/原点_(数学)">原点</a> o を中心とする半径1の<a href="https://ja.wikipedia.org/wiki/球体">球体</a> と仮定します。
<a href="https://ja.wikipedia.org/wiki/北極">北極</a>を (0, 0, 1)、<a href="https://ja.wikipedia.org/wiki/ヌル島">ヌル島</a>を (1, 0, 0) とすれば、A, B の座標はそれぞれ、
</p>
<div class="whiteboard">
x<sub>A</sub> = <b>cos</b> λ<sub>A</sub> <b>cos</b> φ<sub>A</sub><br />
y<sub>A</sub> = <b>cos</b> λ<sub>A</sub> <b>sin</b> φ<sub>A</sub><br />
z<sub>A</sub> = <b>sin</b> λ<sub>A</sub>
</div>
<div class="whiteboard">
x<sub>B</sub> = <b>cos</b> λ<sub>B</sub> <b>cos</b> φ<sub>B</sub><br />
y<sub>B</sub> = <b>cos</b> λ<sub>B</sub> <b>sin</b> φ<sub>B</sub><br />
z<sub>B</sub> = <b>sin</b> λ<sub>B</sub>
</div>
<p>
となります。
これらの位置ベクトル OA (x<sub>A</sub>, y<sub>A</sub>, z<sub>A</sub>) と OB (x<sub>B</sub>, y<sub>B</sub>, z<sub>B</sub>) が成す角の<a href="https://ja.wikipedia.org/wiki/三角関数">余弦</a>値 <b>cos</b> χ は<a href="https://ja.wikipedia.org/wiki/%E5%86%85%E7%A9%8D">内積</a>として
</p>
<div class="whiteboard">
<b>cos</b> χ = OA ⋅ OB = x<sub>A</sub> x<sub>B</sub> + y<sub>A</sub> y<sub>B</sub> + z<sub>A</sub> z<sub>B</sub>
</div>
<p>
と計算されるので、χ そのものの値は<a href="https://ja.wikipedia.org/wiki/逆三角関数">逆余弦</a> <b>cos</b><sup>-1</sup> を用いて、
</p>
<div class="whiteboard">
χ = <b>cos</b><sup>-1</sup>( x<sub>A</sub> x<sub>B</sub> + y<sub>A</sub> y<sub>B</sub> + z<sub>A</sub> z<sub>B</sub> )
</div>
<p>
と求めることができます。
</p>
<p>
2点ABを結ぶ単位球面上の最短距離すなわち<a href="https://ja.wikipedia.org/wiki/測地線">測地線</a>の長さは、全周 2<a href="https://ja.wikipedia.org/wiki/円周率">π</a> に対する角度 χ の比 χ/2π でなので、これを<a href="https://ja.wikipedia.org/wiki/地球半径">地球の半径</a> R 倍だけ拡大してやれば、実際の二点間の距離 δ が得られます。
</p>
<div class="whiteboard">
δ = 2πRχ/(2π) = Rχ
</div>
<p>
以上のプロセスを JavaScript で書き下したならば、以下のようになるでしょうか:
</p>
<div class="code">
<pre><!--
--><em class="cmt">//地球半径 (単位: m)</em>
<em class="kwd">const</em> EARTH_RADIUS = <em class="lit">6378100;</em>
<em class="cmt">//2点 (srcLat, srcLong), (dstLat, dstLong) 間の距離を計算</em>
<em class="kwd">function</em> calcDistance(srcLat, srcLong, dstLat, dstLong){
<em class="kwd">var</em> srcX = <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/cos">Math.cos</a>(srcLat)*Math.cos(srcLong);
<em class="kwd">var</em> srcY = Math.cos(srcLat)*<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/sin">Math.sin</a>(srcLong);
<em class="kwd">var</em> srcZ = Math.sin(srcLat);
<em class="kwd">var</em> dstX = Math.cos(dstLat)*Math.cos(dstLong);
<em class="kwd">var</em> dstY = Math.cos(dstLat)*Math.sin(dstLong);
<em class="kwd">var</em> dstZ = Math.sin(dstLat);
<em class="kwd">return</em> EARTH_RADIUS*<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/acos">Math.acos</a>(srcX*dstX + srcY*dstY + srcZ*dstZ);
}<!--
--></pre>
</div>
<p>
ただし、関数 calcDistance の引数 srcLat, srcLong, dstLat, dstLong の単位は一般的に用いられる<a href="https://ja.wikipedia.org/wiki/度_(角度)">度</a>ではなく、<a href="https://ja.wikipedia.org/wiki/ラジアン">ラジアン</a>であることに注意してください。
</p>
<div class="clear: both;"></div>
2021-02-25T09:00:00Z
-
文理の境界
http://www.flint.jp/blog/?entry=137
<div class="entry-image">
<img src="http://www.flint.jp/blog/image.cgi?entry=137&index=0" alt="" />
</div>
<p>
明けましておめでとうございます。
この年末年始は、<a href="https://ja.wikipedia.org/wiki/新型コロナウイルス感染症_(2019年)">新型コロナウイルス</a>感染拡大の影響を勘案して宮城県への帰省を控え、甲府市で過ごしております。
それにより、こちらへ移り住んでから9年目にして初めて元日の富士山を拝むことができました。
</p>
<p>
さて、その新型コロナウイルスは昨年の初めより世界中で猛威を振るっており、1年以上が経過した今もなお終息の気配すら見えてきていないというのは皆様ご存知の通り。
その原因もまた様々なところに求められてはいますが、その中でもとりわけ大きな要因のひとつが「多くの人々が "移動", "密集", "対面での会話" を充分に抑制しなかった」ことにあるのは間違いのないところでしょう。
個人的には政府および自治体のこれまでの取り組みおよび示されている今後の展望は無為無策の誹りを免れ得ないものだと考えていますが、その一方、他の先進国の状況についての報道を見る限り「日本はまだマシな部類である」というのも事実ではあるようで、この世界的な災害の背後には特定の国の事情に因らない、より普遍的なメカニズムがあるように感じられています。
</p>
<p>
生命, 健康, 財産が脅かされているにも関わらず、人々が自らの相互接触の抑制に消極的である理由について、<a href="https://ja.wikipedia.org/wiki/心理学">心理学</a>的な観点からは「正常性バイアス」や「認知的不協和」といった要因が指摘されています:
</p>
<blockquote site="https://ja.wikipedia.org/wiki/正常性バイアス">
<p>
正常性バイアス (Normalcy bias) とは、認知バイアスの一種。
社会心理学、災害心理学などで使用されている心理学用語で、自分にとって都合の悪い情報を無視したり、過小評価したりしてしまう人の特性のこと。
</p>
<p>
自然災害や火事、事故、事件などといった自分にとって何らかの被害が予想される状況下にあっても、それを正常な日常生活の延長上の出来事として捉えてしまい、都合の悪い情報を無視したり、「自分は大丈夫」「今回は大丈夫」「まだ大丈夫」などと過小評価するなどして、逃げ遅れの原因となる。
</p>
<div class="cite">
<a href="https://ja.wikipedia.org/wiki/正常性バイアス">正常性バイアス - Wikipedia</a>
</div>
</blockquote>
<blockquote cite="https://ja.wikipedia.org/wiki/認知的不協和">
<p>
認知的不協和 (cognitive dissonance) とは、人が自身の認知とは別の矛盾する認知を抱えた状態、またそのときに覚える不快感を表す社会心理学用語。
アメリカの心理学者レオン・フェスティンガーによって提唱された。
人はこれを解消するために、矛盾する認知の定義を変更したり、過小評価したり、自身の態度や行動を変更すると考えられている。
</p>
<div class="cite">
<a href="https://ja.wikipedia.org/wiki/認知的不協和">認知的不協和 - Wikipedia</a>
</div>
</blockquote>
<p>
いずれも妥当な分析でありますが、人々の言動を観察するうちに、これに加えてまた別の種類の認知の歪みが感染症対策への消極性の一因になっているのではないか、と考えるようになりました。
客観的な裏付けがあるわけでもなく、強く断言・主張できる類の理論ではないのですが、自分の業種とも関連した話題でもあるため、本エントリで述べてみることにした次第です。
</p>
<div style="clear: both;"></div>
2021-01-03T12:00:00Z
-
CSVにありがちなこと
http://www.flint.jp/blog/?entry=136
<div class="entry-image">
<img src="http://www.flint.jp/blog/image.cgi?entry=136&index=0" alt="" />
</div>
<p>
アプリケーションにおいてな持続的データを扱う場合は<a href="https://ja.wikipedia.org/wiki/データベース管理システム">データベース</a> (ほとんどの場合<a href="https://ja.wikipedia.org/wiki/関係データベース">RDB</a>) を使用するのが一般的ですが、その多くは他のアプリケーションとのデータ交換を行うためのインターフェイスとして<a href="https://ja.wikipedia.org/wiki/Comma-Separated_Values">CSV: <b>C</b>omma-<b>s</b>eparated <b>V</b>alues (カンマ区切り)</a> と呼ばれるフォーマットでのエクスポート/インポートをサポートしています。
</p>
<p>
このCSVという形式は (一見すると) 非常に単純で、「カンマ区切り」の呼称が示す通り、各行に個々のレコードに属するフィールドを<a href="https://ja.wikipedia.org/wiki/コンマ">カンマ</a>で区切って並べただけ。
例えば次に示すデータ:
</p>
<table>
<thead>
<tr>
<td>表題</td>
<td>著者</td>
<td>価格</td>
</tr>
<thead>
<tbody>
<tr>
<td>みずほ銀行システム統合、苦闘の19年史</td>
<td>日経コンピュータ</td>
<td>1800</td>
</tr>
<tr>
<td>大聖堂・製鉄・水車</td>
<td>ジョゼフ・ギース/フランシス・ギース</td>
<td>1210</td>
</tr>
<tr>
<td>彼女は一人で歩くのか?</td>
<td>森博嗣</td>
<td>660</td>
</tr>
<tbody>
</table>
<p>
これをCSVで表現すると、<a href="https://ja.wikipedia.org/wiki/メモ帳">メモ帳 (Notepad)</a> でも開くことのできる以下のようなテキストデータとなります:
</p>
<div class="code">
<pre><!--
--><em class="str">表題</em>,<em class="str">著者</em>,<em class="str">価格</em>
<em class="str">みずほ銀行システム統合、苦闘の19年史</em>,<em class="str">日経コンピュータ</em>,<em class="str">1800</em>
<em class="str">大聖堂・製鉄・水車</em>,<em class="str">ジョゼフ・ギース/フランシス・ギース</em>,<em class="str">1210</em>
<em class="str">彼女は一人で歩くのか?</em>,<em class="str">森博嗣</em>,<em class="str">660</em><!--
--></pre>
</div>
<p>
コンピュータあるいはプログラミングに詳しくない人であっても、一瞥してその内容を見て取ることができるでしょう。
</p>
<p>
この「単純さ」こそ、CSVが多くのアプリケーションのエクスポータ/インポータとして採用されている最大の理由であるわけですが、それはあくまでも表面的なもの。
このフォーマットを正しく扱うプログラムを作るとなると、なかなかに複雑な処理が要求されることとなり、一筋縄ではいきません。
実際、市販され広く普及している「CSVをサポートしている」ソフトウェアの中にさえ、厳密にはこれを正しく扱えておらず、そのためにデータ交換に際してトラブルを生じるものが数多く存在します。
</p>
2020-10-11T21:59:59Z
-
Catast (ウェブ復刻版) 公開
http://www.flint.jp/blog/?entry=134
<div class="entry-image">
<img src="http://www.flint.jp/blog/image.cgi?entry=134&index=0" alt="Catast" title="Catast" />
</div>
<p>
学生時代 (2003年) に作った Windows 用パズルアクションゲーム "Catast" を、何を思ったか、16年が経過した今頃になってウェブアプリとして作り直してみました。
</p>
<div class="whiteboard">
Catast<br />
<a href="/misc/catast/">http://www.flint.jp/misc/catast/</a> (<a href="/misc/catast/?lang=en">English</a>)
</div>
<p>
実はこのゲームのウェブ版を作るという構想はかなり前からあったのですが、その実現を阻むいくつかの要素がありました。
それらを影響の大きさに従って並べてみると、次のようになるでしょうか:
<p>
<ol style="margin-left: 2em;">
<li>当時の<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6">ウェブブラウザ</a>の貧弱あるいは互換性のない <a href="https://ja.wikipedia.org/wiki/JavaScript">JavaScript</a> および<a href="https://ja.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>の実装 (特に <a href="https://ja.wikipedia.org/wiki/Internet_Explorer">Internet Explorer</a>)</li>
<li>当時の<a href="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3">スマートフォン</a>の性能 (画面サイズ, <a href="https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%83%E3%83%81%E3%83%91%E3%83%8D%E3%83%AB">タッチパネルの反応精度) の低さ</a></li>
<li>私氏自身の JavaScript のコーディング技術の低さ</li>
</ol>
<p>
しかし、それから月日は流れ、殆どすべての人が (端末ベンダ謹製の得体の知れない「ブラウザ」ではなく) Chrome や Firefox がインストールされたスマートフォンを持つようになり、また世間的に「もう Internet Explorer はサポートしなくていいよね」という<ruby>雰囲気<rp> (</rp><rt>コンセンサス</rt>)</ruby> が形成されてきたこともあって、上記 1, 2 として挙げた外部的な要因はほぼ取り除かれたように思われます。
また、3 に挙げた私自身の JavaScript の腕前も、本業の方で JavaScript が絡む案件をこなしているうちにそこそこのレベルには達したと自負するに至り、ではここいらでちょっとチャレンジしてみようか、というわけで今回の Catast 復刻に着手した次第。
</p>
<p>
そこで今回は、この開発作業において苦労した点などについて話をしてみたいと思います。
</p>
<div style="clear: both;"></div>
2019-11-20T20:00:00Z
-
低品質コードの成長過程
http://www.flint.jp/blog/?entry=133
<div class="entry-image">
<img src="http://www.flint.jp/blog/image.cgi?entry=133&index=0" alt="" />
</div>
<p>
<a href="https://ja.wikipedia.org/wiki/%E5%AD%97%E4%B8%8B%E3%81%92">インデント</a>の深さや変数・関数の<a href="https://ja.wikipedia.org/wiki/%E5%91%BD%E5%90%8D%E8%A6%8F%E5%89%87_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)">命名規則</a>に関する信条の違いで殴り合いの喧嘩ができる我々プログラマにとって、他人の書いたコードを読んだり、それに手を入れたりすることは大変にストレスフルな作業。
しかしながら今日では、ビジネスとして作成されるプログラムがたった一人の人間によって書かれることは極稀なことであり、職業プログラマは誰もが多かれ少なかれ、そのストレスに耐えながら仕事をしています。
</p>
<p>
それでも、よく管理されているプロジェクト、よくメンテナンスされているシステムではプログラムの質も比較的優良であり、その改修・拡張といった作業は開発元企業に属する人員によって行われている場合が多いようです。
一方、私のような「外注」に改修依頼が出されるようなプログラムというのは、開発元の「正規部隊」が手を付けられない、あるいは<b>手を付けたくない</b>ほどに低品質なものであるというのが相場。
さすがに本記事のタイトルに入れることは思いとどまりましたが、そのようなコードは「糞コード (くそこーど)」と呼ばれ、ある種この業界の名物となっているとかいないとか。
</p>
<blockquote cite="http://unkode-mania.net/">
<p>
「なんだこの糞コードは! (怒)」「書いた奴出てこい!(怒)」<br />
こんな声を聞いたり、叫んだりしたことはありませんか?<br />
ウンコードについて学ぶことによってウンコードを撲滅しましょう!
</p>
<div class="cite">
<a href="http://unkode-mania.net/">ウンコード・マニア</a>
</div>
</blockquote>
<p>
私自身、既に本が書けそうなほどに糞コードを相手にしてきましたが、その中のひとつに、それ自体は非常に小さくシンプルなものでありながら、糞コードが生産されるプロセスを理解するのに大変有用な事例がありました。
</p>
<div class="code">
<pre><!--
--><em class="kwd">if</em> ($record->type != TYPE_A && $record->type != TYPE_B && $record->type != TYPE_C){
<em class="cmt">//一般的な処理</em>
}
<em class="kwd">else</em> <em class="kwd">if</em> ($record->type != TYPE_B && $record->type != TYPE_C){
<em class="cmt">//タイプAに対する処理</em>
}
<em class="kwd">else</em> <em class="kwd">if</em> ($record->type != TYPE_C){
<em class="cmt">//タイプBに対する処理</em>
}
<em class="kwd">else</em> {
<em class="cmt">//タイプCに対する処理</em>
}<!--
--></pre>
</div>
<p>
今回はこのコードを教本として、糞コードが出来上がるまでの過程を、読者の皆様と共に考察していきたいと思います。
</p>
2019-03-10T18:34:59Z