2015/01/10(土)<table> タグのレスポンシブＷｅｂデザイン対応
2017/10/12 18:48
筆者では主に３つの手法を使いました。
１）superTable.js (Javascript) を使って、横幅を一定に保ちつつ横スクロール。
表の左端や最初の行を固定表示にすることもできます。
表の部分を左フリック（指を画面上にて左にサッと滑らす）すると左に、
表の部分を右フリック（指を画面上にて右にサッと滑らす）すると右に、
スクロールします。
このJavascript は有名らしく、現在は Grid という名前に変わっていて、当方が取得したバージョンから見て、大幅に対応が改善されています。
＃このJavascript にて、非推奨のものが使われているため、後日 Grid.js へ換装しないといけないかなというところです。。
もちろん、横に表示させても大丈夫です。
設置方法は、提起サイトのソースコードを見れば参考になると思います。
２）CSS にて表示体裁を変更する。
左側はやや複雑なCSS で、汎用化するのはちょっと難しいかもしれません。
ちなみに元ネタ（ＰＣ版）はこんな感じ ↓
右側は、<thead> の左フロートと、<tbody> の block 表示で、これは CSS による <table> のレスポンシブ化手法では一般的なものの様です。
元ネタ（ＰＣ版）はこんな感じ ↓
探せば沢山出てくるのですが、いちいち検索するのも面倒なので、時間がとれるときにここにまとめておきたいと考えています。
2014/10/01(水)気象通報サイトを作ってみた
2017/10/12 17:43
未完成部分多いですが、一応見せられる状態になったので掲載します。
気象庁からＸＭＬデータにて情報を貰い、それをＨＴＭＬなどに変換して表示等を行う仕組みです。
XSLT や XSD などの知識が無いと作れませんでした。
現在のところ、天気予報・週間天気予報・警報／注意報・土砂災害警戒情報・竜巻注意情報を扱っています。
また、電子メール通知サービスと、ごく簡単なＸＭＬフィード（独自形式）を提供しています。
次は長期予報・地震情報を提供開始する予定ですが、このシステム開発は本業作業ではやれませんので、たぶん年末以降になりそうです。
こちらで提供しています → Ｗｅｂ気象通報
2014/06/30(月)PC-BSD10 を入れてみた(3)
2017/10/12 17:39
サーバ側でUA を見ると、 X11; FreeBSD amd64 とあるのですが、Linux 版というわけでもなさそうで、64bit版なのかも不明です。
しかも Firefox のバーションは 29.0 です。
ただ、PC-BSD は 64bit 版しかありません。
次回は、オフィス環境を検証したいと思います。
但し、すぐ出来ない可能性が高いです。orz
2014/06/30(月)PC-BSD10 を入れてみた(2)－日本語入力環境
2017/10/12 17:37
このあたりも面食らったのですが、言語や文化に依存するローカライズ環境ですので、ある程度ユーザ数が増えないと対応ということにはならないですね。。
以下、試行錯誤による記録ですので、余計なことや不足している内容があるかもしれません。
先ず、ログインページでロケールとキーボードレイアウトの設定をする必要があります。
ログイン画面の左下に注目すると・・・
ロケールとキーボードレイアウトを設定する項目があります。
ロケールは、
のように Japanese(ja) を選択、
キーボードレイアウトは、
のような選択をします。
これで、日本語の表示は出来るのですが、これだけでは日本語入力が出来ません。
何せ GUI 環境の知識・ノウハウが殆ど無いので、面食らったんですが、更に IBus の設定を行わなければなりません。
IBus というのは、Unix/Linux 系における「インプットメソッドフレームワーク」というもので、文字入力インタフェースをアプリケーションレベルで扱いやすくする仕組みのものらしいです。
IBus の設定は PC-BSD コントロールパネル → IBus の設定 で行います。
３つの画面全てに設定する必要があります。
先ず、最初の画面：
SHIFT キー + SPACE キーで入力切替を行う設定になります。
PC-BSD を以前から使っている人は、この設定がいいでしょう。
下の２つのチェックボックスは入れたままにすることをお勧めします。
次に、インプットメソッドの画面：
インプットメソッドの選択をクリックし、Japanase にマウスカーソルを選択すると、４つほど候補が出てきます。そのうちの２つを上記のように選択します。
最後に、詳細の画面：
システムキーボードレイアウトを使用する のチェックは外します。
これをチェックすると、英語圏のキーボードレイアウトになり、上手く入力できません。
設定を行ったあと、一旦ログアウトし再度ログインすることでこの設定が有効になります。
SHIFT + SPACE で IME 入力のON/OFF が出来るはずです。
また、PC-BSD 10 の日本語環境構築については、以下が参考になります：
PC-BSD 10 で日本語環境を整える。 〔ふうせん Fu-sen.〕
2014/06/29(日)PC-BSD10 を入れてみた(1)
2017/10/12 17:36
PC-BSD 8 以来ですが、PC-BSD 8 では、時折 GUI インタフェースの起動に失敗し、また日本語環境の構築が面倒だったのですが、PC-BSD 10 では、多少緩和されているようです。
正直なところ、まだ万人にお勧めできるレベルではありません。
だけれど、「もう少し」というところまで洗練されてきてはいます。
なにより、動作安定度が良くなっています。
インストールも正直面食らう内容があります。
まず、
・メモリ馬鹿食いで有名な ZFS ファイルシステムがデフォルト！
しかも UFS なんぞ選べない！
・ＨＤＤの空き容量が（クライアントモデルの場合）50GB 以上無いとインストールできない（？）
・インストール時に選んだ言語を本環境にまともに引き継がない（？）
ZFS というのは、サン・マイクロシステムズが開発したストレージ（ファイル）管理システムで、まともに性能発揮するには、少なくとも 4GByte、推奨で最低 6GByte の物理メモリが必要と言われる代物です。
なので、当方のメモリ 1GByte なマシンには使い物にならないか、に思われたわけです。
ですが、実際にインストールして、起動させてみると、
ZFS NOTICE: Prefetch is disabled by default if less than 4GB of RAM is present;
to enable, add "vfs.zfs.prefetch_disable=0" to /boot/loader.conf.
のようなメッセージが出て、どうやら支障がないようになっている模様。
実際に大量のファイルを移動させてみたりすると、少し遅いという感はあるが、実用上問題になるほどではありません。
FreeBSD 10 で導入された、高速なファイル圧縮・伸張アルゴリズムが効いているらしいです。
また、ZFS にすると、ディスク領域の有効利用や領域拡張、RAID やミラーリングの構築がとても簡単になります。
前書きが長いですが、インストール時には GPT パーティションにてインストールするようにします。そうすることで後々の苦労が半減します。
2TByte 超えの HDD をサポート或いはUEFIブートをサポートするマザーボードであれば、たぶん、もれなく GPT に対応しているはずです。
＃今どきは MBR ではなく、GPT に技術トレンドが移っているようです。
さて、無事にインストールして、パスワードなどの初期設定が済むと、以下のようになります。
インストールしたマシンのＨＤＤは 80GByte × 2 なので、どうにかしてディスクの増設をしたい。
以下の手順で追加できます。
ZFS だから、手順さえ判れば、UFS のHDD追加よりも簡単です。
先ず、お気に入り → コンソール で、CUI端末を開き、root になり、以下を実行します。
# gpart create -s GPT ada1
ＨＤＤデバイス ada1 に GPT パーティションレコードを生成します。
エラーになる場合は、
# gpart destroy -F ada1
として、パーティションを強制削除します。
# gpart add -t freebsd-zfs ada1
ＨＤＤデバイス ada1 に ZFS パーティションを作成します。
サイズを指定していないため、ディスク全体にZFSパーティションを生成します。
# zpool add tank ada1p1
ZFS のストレージプール名 tank にada1 の割り当て領域を追加します。
PC-BSD では、デフォルトの ZFS プール名に tank が使われています。
これだけで領域拡張完了です。
以下のように、領域が拡張したことがわかります。
但し、領域変更と削除は少し面倒です。
2014/06/26(木)tenki.jp のRSS サービスは 5/13 で終了していた・・
2017/10/12 17:33
元データを引っ張ってくるのに tenki.jp の RSS フィードを使っていました。
＃利用規約的には、グレーゾーンでした。
誰も指摘してくれませんし、色々と業務があるので、気付かなかったわけですが、
新たな取得元の目処が付いたところです。今度は利用規約的にも問題無し。
＃表向き法人サイトだし、データ取得に全くカネかけられないとなると、途端に提供元が限られるのが日本の現状・・・
そのうち、公表できると思います。
以下は、今まで使っていた RSS フィードの天気コード一覧。
報道機関各位に気象情報を提供する際、このコードが使われているようです。
今回、目処をつけた取得元では、天気コードではなくて、文字列で来るらしい。
正直、面倒くさいです。取得するためには、こちらで当該電文処理を行うサーバアプリケーションを先に構築しないといけません。。それも中身がかなり複雑だが情報は豊富。
自分メモとして天気コードを張っておきます。
| 100 晴れ 101 晴れ 時々 曇り 102 晴れ 一時 雨 103 晴れ 時々 雨 104 晴れ 一時 雪 105 晴れ 時々 雪 106 晴れ 一時 雨か雪 107 晴れ 時々 雨か雪 108 晴れ 一時 雨か雷雨 110 晴れ のち時々曇り 111 晴れ のち 曇り 112 晴れ のち一時 雨 113 晴れ のち時々 雨 114 晴れ のち 雨 115 晴れ のち一時 雪 116 晴れ のち時々 雪 117 晴れ のち 雪 118 晴れ のち 雨か雪 119 晴れ のち 雨か雷雨 120 晴れ 朝夕 一時 雨 121 晴れ 朝の内一時 雨 122 晴れ 夕方一時 雨 123 晴れ 山沿い 雷雨 124 晴れ 山沿い 雪 125 晴れ 午後は雷雨 126 晴れ 昼頃から雨 127 晴れ 夕方から雨 128 晴れ 夜は雨 129 晴れ 夜半から雨 130 朝の内 霧 後 晴れ 131 晴れ 明け方 霧 132 晴れ 朝夕 曇り 140 晴れ 時々 雨で雷を伴う 160 晴れ 一時 雪か雨 170 晴れ 時々 雪か雨 181 晴れ のち 雪か雨 | 200 曇り 201 曇り 時々 晴れ 202 曇り 一時 雨 203 曇り 時々 雨 204 曇り 一時 雪 205 曇り 時々 雪 206 曇り 一時 雨か雪 207 曇り 時々 雨か雪 208 曇り 一時 雨か雷雨 209 霧 210 曇り のち時々 晴れ 211 曇り のち 晴れ 212 曇り のち一時 雨 213 曇り のち時々 雨 214 曇り のち 雨 215 曇り のち一時 雪 216 曇り のち時々 雪 217 曇り のち 雪 218 曇り のち 雨か雪 219 曇 り のち 雨か雷雨 220 曇り 朝夕一時 雨 221 曇り 朝の内一時 雨 222 曇り 夕方一時 雨 223 曇り 日中時々 晴れ 224 曇り 昼頃から雨 225 曇り 夕方から雨 226 曇り 夜は雨 227 曇り 夜半から雨 228 曇り 昼頃から雪 229 曇り 夕方から雪 230 曇り 夜は雪 231 曇り海上海岸は霧か霧雨 240 曇り 時々雨で 雷を伴う 250 曇り 時々雪で 雷を伴う 260 曇り 一時 雪か雨 270 曇り 時々 雪か雨 281 曇り のち 雪か雨 | 300 雨 301 雨 時々 晴れ 302 雨 時々 止む 303 雨 時々 雪 304 雨か雪 306 大雨 307 風雨共に強い 308 雨で暴風を伴う 309 雨 一時 雪 311 雨 のち 晴れ 313 雨 のち 曇り 314 雨 のち時々 雪 315 雨 のち 雪 316 雨か雪 のち 晴れ 317 雨か雪 のち 曇り 320 朝の内雨 のち 晴れ 321 朝の内雨 のち 曇り 322 雨 朝晩一時 雪 323 雨 昼頃から 晴れ 324 雨 夕方から 晴れ 325 雨 夜は晴 326 雨 夕方から雪 327 雨 夜は雪 328 雨 一時強く降る 329 雨 一時 みぞれ 340 雪か雨 350 雨で雷を伴う 361 雪か雨 のち 晴れ 371 雪か雨 のち 曇り | 400 雪 401 雪 時々 晴れ 402 雪 時々止む 403 雪 時々 雨 405 大雪 406 風雪強い 407 暴風雪 409 雪 一時 雨 411 雪 のち 晴れ 413 雪 のち 曇り 414 雪 のち 雨 420 朝の内雪 のち 晴れ 421 朝の内雪 のち 曇り 422 雪 昼頃から雨 423 雪 夕方から雨 424 雪 夜半から雨 425 雪 一時強く降る 426 雪 のち みぞれ 427 雪 一時 みぞれ 450 雪で雷を伴う |
2014/03/13(木)トランジスタによる論理反転の無い 3.3V → 5V/12V etc.. レベルシフト
2017/10/12 17:11
ICを使うほどでも無いとか、使えないとか言う場合も多々あります。
今回は、ICを使うほどでも無いのと、電源電圧の問題でトランジスタによるレベルシフト（しかも、論理反転しないもの）が必要でした。
たぶん、一定の汎用性があると思います：
Vcc は、レベルシフト後のＨレベル電圧より若干高い電圧を与えます。
ここでは例示として、 6V としましょう。
Rc は、Ｈレベルのときに流れる電流で電圧降下を起こすので、その電流を加味して決めます。
ここで 100μA と仮定すると、10kΩでは1V の電圧降下になります。
RB1 と RB2 は、ベース電極の電圧が、Ｈレベルとして判定させたい電圧 + VBE(0.6V) になるように分圧するようにします。
ここでは、RB1 と RB2 は同じ 30kΩなので、ベース電極の電圧は 3V になり、エミッタ電極の電圧が 2.4V 以上になれば、Ｈレベルと判定されます。
ところで、提示の回路には、ダイオードが入れてあります。
これは、回路的にVEBOを超える逆電圧が加わる可能性があったために入れたもので、通常は不要と思います。ちなみにこのダイオードを入れると、エミッタ電圧がダイオードの順方向電圧分だけシフトした形になり、更に 0.6V 低い電圧 1.8V 以上でＨレベルと判定されることになります。
つまり、この回路は、トランジスタのベース・エミッタ間電圧(VBE)が 0.6V 以下なら、トランジスタは OFF(C-E間は非導通)するので、Vcc の電圧がそのまま OUT に現れ、
0.6V を超えると、トランジスタは ON (C-E間導通)するので、コレクタ電極の電圧がほぼゼロになるという動作を、エミッタ電極に与える電位差でコントロールしています。
Ｌレベルのとき、RC によって電流制限されるので、このときの電流にも留意する必要があります。この回路定数では、VCE(sat) を無視すると、600μA になります。
C-MOS IC の場合は問題ありませんが、TTL IC を接続する場合は、この回路定数では問題が起きると思います。RC を適宜変更してください。
RB1 と RB2 は、トランジスタの hFE分の１×10倍程度以上のアイドリング電流が流れれば十分です。あまり小さい抵抗だと、回路の消費電流が無駄になるだけですので、RC の数倍から10倍程度でいいでしょう。
2013/11/17(日)一段落する暇もなく・・・
2017/10/12 5:45
先月から溜まっていた作業を一部終えて、次は受注した装置の納品準備です。
＃携帯で投稿すると、画像が小さくなってしまう・・・orz
2013/09/19(木)Apache 2.4 では、HTMLヘッダの自動修正をする？？
2017/10/12 5:35
「頑丈な造りを」ということで、脱Windows、自動バックアップ付きの仕様です。
１台の機器にてRAID 構成にするよりは、２台の機器（うち、１台は既存機器）を使って、ＬＡＮを通して自動バックアップ構成をとったほうが安価で機能的にもほぼ同等で確実な構成に出来るのですが、この点、頑なに理解しない技術屋も結構居ます。
先日、新規サーバ１台とセットで設置しに行ったわけですが、現場でサーバ上で稼動させるデータベースに自動バックアップの構成を構築した後にデータを投入し、ＧＵＩインタフェースとなるＷｅｂブラウザのため のサーバ Apache 2.2（現行は 2.2.25） をサービス開始するわけですが、不可解な現象に数時間悩む・・・
通常、
のように、表示されるわけですが、何故か
のように、ＣＧＩが吐き出すＨＴＭＬをテキストでそのまんま出してしまう。。
要するに text/plain で表示されてしまうわけです。
何をやっても駄目で、どういうわけか IE8 ではきちんとページが表示されるが、手元の Firefox と Chrome は text/plain モードな表示です。
現場で数時間悩んだものの、とりあえず IE8 で簡単な説明をして（IE8 ではまともに表示しないので、アップデートをお願いしておいた）、現場を引き上げ、その後から仕事場でプロトコル解析です。
ほどなく原因が判りました。通常、ＣＧＩからＨＴＭＬなページを表示させるには、
Content-type: text/html; charset=utf-8
といったヘッダ行を（標準出力へ）最初に出し、更に（標準出力へ）空の行を１行出して、本体との区別を行い、そこからＨＴＭＬ本体を（標準出力へ）流し込む形を取ります。このヘッダ行に問題があって、
4637Content-type:
みたいな状態になっていました。問題の部分はここ
# ＨＴＭＬヘッダ出力
sub out_header {
my ($mimetype,$hstr) = @_ ;
print $hstr if ($hstr ne "") ;
print "Content-type: $mimetype\n\n" ;
}
これを呼び出すところで、
out_header('text/html; charset=utf-8',length($outstr),undef) ;のようになっていたわけです。
($outstr には、HTML ページ本体を文字列の形で格納している。length はその長さを返す）
構築作業中、Apache 2.4 上で制作していたためか、このような現象には一切遭遇せず、納品サーバで動作確認していなかったのが原因ですが、レベルの低いところで悩みまくっていましたorz
・この現象は、Apache 2.2.x で発生し、 Apacxhe 2.4.x では発生しないようです。
・Apache 2.4.x では、ＣＧＩが出すヘッダが狂っていても、本体部分をチェックして適切なヘッダに書き換えるようです。
・Apache 2.2.x でも、ブラウザが IE8 では発生せず、ＨＴＭＬなページが表示されます。しかし、IE9 以降では、text/plain な表示になります。
・IE8 では、不明ヘッダは text/html として処理するが、IE9 以降や Firefox,Chrome においては、text/plain の処理となるようです。
2013/07/09(火)PDFJ を Perl 5.16 で動作させることに成功
2017/10/12 5:29
相変わらず、原因を追いかけるほど暇もカネも無いので、ほったらかしだったですが、今般開発中の案件に使えたら使いたいと思い、諸般の事情も手伝って、無理やり時間割いてみました。。orz
Google 殿に尋ねると、Perl 5.12 でも動いているよという情報も・・・
「うーむ、ウチでは Perl 5.12 にしたら動作しなくなったんだけどな！！」と思いつつ・・
FreeBSD では、ports にも PDFJ-0.90 が入っていて、Perl 5.14 で動作するようなパッチが当てられているようです。なので、これを ports にてインストール。でも、相変わらず 「PDF ファイルが壊れています」とAdobe Reader に怒られます。。
テキストエディタで「壊れている PDFファイル」を覗いてみる。すると、エラー内容などがテキストで吐き出されている。orz こんな感じ：
error in 'BODY': error in 'Block': error in 'break': error in 'do': error in
'eval': eval error: 'print' trapped by operation mask at (eval 2122) line 2,
line 3873.
: '
print "page",$page->pagenum,"\n" if $Args{'XPDFJ:verbose'} >= 0;
$Args{hfpage} ||= $page->pagenum;
' at libs/XPDFJ.pm line 589, line 3873.
ここで再び Google殿に尋ねると、perl 5.10 にて同じ現象で嵌った方が、、PDFJをperl5.10で動かす 〔紀子さん＠へぼぷろぐらまの日常〕
もう４年前のものなんですが、例の Perl 5.10用パッチ入れても動作しないという現象。
「ウチでは、Perl 5.10 では動作したなぁ」と思いつつ、どう対処したかというと
『とりあえず該当行をコメントしてしまうという暴挙に出、まぁ解決』
ぉ、、・・・orz
でも、この暴挙を試そうと、該当箇所を探すが。。。
XPDFJ.pm 上に無い。。散々探したあげく、モジュールで提供されているインクルードファイルに stddef.inc というファイルがあり、その中にありました。orz
行番号なんかあてになりません。XPDFJ.pm にてインクルードした後の行番号が表示されている模様。。 stddef.inc の 1135行目あたりにありました。
# <eval>;
# print "page",$page->pagenum,"\n" if $Args{'XPDFJ:verbose'} >= 0;
# $Args{hfpage} ||= $page->pagenum;
# </eval>
こんな感じで「暴挙」を実施したところ・・・動作するようになりました。たぶん、ページ番号振る部分ですかね。。
ひょっとして、これも Safeモジュール絡みかも？？
エラーに print文の部分が含まれているからです。
追いかける暇なんぞ、なかなか持てないので、とりあえず文句言われない限りはこのままになると思います。。