HTML+CSS エラーメモ

※追記：書いてから見てみると出来てますね。
　　　　え、なんで？
※さらに追記：原因(？)がわかりました。
　　　　　　　別のCSSファイルに書いたCSSをclass名で当てていたものが、
　　　　　　　うまく反映されていないようです。
　　　　　　　理由が分からないから余計に混乱します・・・。
作ってるうちにムカついてきたので、頭を冷やすついでにメモ。

HTMLとCSSを組み合わせてとあるページサンプルを作っている途中なのですが、テーブルのセル内でのレイアウトについて困っています。
それは、1行内に左右両端にそれぞれオブジェクトを配置して表示するということ。
物体1
物体2
とすると、ご覧の通り物体2が1行下に表示されます。
<div>
 <div style="float:left;">物体1</div>
 <div style="text-align:right;">物体2</div>
</div>
原因は、＜div＞を使用しているせいです。
＜DIV＞－HTMLタグリファレンス
＜div＞は、自動的にその前後で改行を行う「ブロック要素」なのです。

それでは困ってしまうので、改行されない＜span＞を使います。
物体1物体2
すると今度は、物体2が左に並べられてしまいます。
<div>
 <span style="float:left;">物体1</span>
 <span style="text-align:right;">物体2</span>
</div>
これも原因は＜span＞を使用しているせいで、「text-align」が適用されないのです。
text-align - CSS Dencitie
こちらにある通り、「text-align」は「ブロック要素」に適用されるものであり、＜span＞のような「インライン要素」には適用されないのです。

んー、これはどうしたものか・・・。
1行に左右両端とも表示出来るような違うやり方があるのか、はたまたこれに似た方法があるのかわからないです。
もう少し考えてみることにします。

PC修理講義メモ

PCの修理に関しての講義があったのでメモ。

先に書いた記事で、マシンやネットワークの管理をしている組織があるという話をしました。
マシンの管理といえど、マザーボード上の異変までは流石に検知できない状態ではあります。
そんな「マザーボードのエラー専門」の先生なんて居ない事も含め、「修理するためのマシンがないと講義もできない」事も、知識不足となる原因ではあります。
今回は良い機会に恵まれたので、特別詳しい先生をお呼びして講義をしていただきました。
上の画像は、その時の説明に使われた図です。

赤線に囲まれている領域が、最低限の状態で起動する場合。
その時に起動出来なかったら、マザーボードの何らかのエラーである可能性が高いと言えます。

今回講義に使用したマシンは、LANケーブルを接続するとフリーズしてしまうという問題がありました。
ですので、起動したマシンにLANケーブルを挿してみます。
すると、BIOS画面でもフリーズするマシンがちらほら。
マザーボードを覗くと、コンデンサが少し膨らんでいるのが目視できました。
この事より「コンデンサの不良・破損による暴走」が、LANケーブル接続時フリーズの原因であることがわかりました。

こういった現象は、実際に知っている人に聞かないと分からないですし、調べようの無い事じゃないかと思います。
ネットワークがより活発化してるこの時代なのにと思うかも知れませんが、マザーボードが原因だと予想は付いても検証できないのが現実でした。
このような講義はこれからも多数していきたいなと思います。

「根拠」と「ぐらい」

別にグチを書くつもりはないですが、僕にしては重要な事なのでメモ。
誰かが見て「へぇー」程度に思える内容で。


学校の授業とは別に、校内のマシンやネットワークを管理している組織があり、放課後に業務を行っています。
僕はその組織のリーダーで、業務を振り分ける際に重要にしている事があります。
それは「根拠」。
「この作業は、こういうために必要だから行う」といった事です。

例えば、部屋に並べてあるマシンを全て部屋の後ろに片付ける、という作業。
それだけの情報では、ただ単に片付ければ済む話で、作業する人にとっては「片付ければいい」だけです。
そこに「根拠」を付ければ、この作業に対する意識も大幅に変わります。
今回の「根拠」は、「その部屋を保護者会時に使用するため」なので、作業する人は「その為にはどういう事をすべきか」を考えて行動する必要があります。
保護者会で部屋を使用するということは、その学校に通っている生徒の保護者がその部屋を見るということ。
後ろに並べられたマシンを見て、「印象の良い学校」と思うか「印象の悪い学校」と思うかは、マシンを片付ける人に委ねられます。

そこまで大げさな事を言うのかと思うかも知れませんが、このぐらいの考え方を組織のメンバーにも持っていてもらいたいです。
今回の例はマシンを片付けるという事でしたが、他の作業でも重要になることですし、就職活動での「志望動機」などにも応用できる考え方です。
そういったモノの考え方をして、もしそれが見当違いのミスであるとしても僕は咎めないですし、むしろ学生でそういう事を勉強しておく良い機会ですから。


それに加えてして欲しいこと。
組織の業務を行う上で、必要になる備品を置いてある棚には当然鍵を掛けていて、組織の人しか触れられないようになっています。
部屋の鍵をかける時には、棚の鍵をかけ窓の鍵を確認し、さらにマシンとモニタの電源が付いていないかを確認する必要があります。
困ったことに、それが出来ないメンバーが少なくないのが現状です。
こういった事は、現場を押さえて注意することが重要になりますが、何せ帰った後には注意できないので悩んでしまいます。
そもそも、組織で「しなければならない事」として話してあるので、「それぐらい」はして欲しいのです。
普通に始業時間に学校にいるように、「当たり前の事を当たり前」にして欲しいのです。

学生であるからまだしも、社会に出れば「常識」が「当たり前」なので、上の「根拠」と同様に学生の間に知っておいてもらえたらなぁと。
そういう組織に入っているのだから、技術だけでなくこういう事も勉強してもらっていても良いと思うのです。

んー、結局グチみたいになってしまいました・・・。

珍しい画像

珍しい画像が取得出来たのでメモ。

どうも、モニタの情報が取得出来ない場合に発生するようです。
実際には、解像度が800*600で4ビット表示だったと思います。
表示された時にはド肝を抜かれ「うおあぁー！」と叫んでしまいましたが、モニタケーブルを挿し直すと元の設定に戻せました。

細かい話ですが、最近のモニタは「プラグアンドプレイ」形式なので、USBメモリなどのようにドライバが不要・自動でドライバを割り当てる事により、複雑な割り当て設定は不要です。
なので、何も知らない人からしてみたら、僕以上に困惑して「パソコンに詳しい人」に泣きつくんだろうなぁと思います。
再起動して急にこんな画面になっても、ケーブルのせいだとは思わないでしょうし。

Amazonプライム やめました

一ヶ月前ほどにAmazonプライムでの迅速な宅配ライフをエンジョイしていましたが、年会費を払う時期に差し掛かったので停止しました。
実はもうすでに請求が着ていて、キャンセルすることによる返金が発生しています。
気付くのに3日遅かったのです。

やめた理由としては、2つあります。
1つは「宅配が届く時間に家にいない」こと。
いくら早く届こうとも、いくら時間を正確に持ってこようとも家にいなければ受け取れませんし、宅配便のお兄さんに迷惑ですから。
もう1つは、「そもそもAmazonを多用しない」こと。
この1ヶ月間で、Amazon店内で商品を買ったのが2つ、マーケットプレイスで1つです。
そのうちAmazon店内での商品しかプライム対象にならないので、あまりにも利用回数が少ないのが明白です。

大きなものを買ったりなど、別途送料がかかるものであれば、やはりお得なのかなぁと思いました。

表示エラーについて

追記：右メニューを見てみると「読者」がうまく表示されていなかったので、
　　　ひとまず削除しました。
　　　これで落ち着けばいいのですが・・・。

今日友達から聞いた症状なのですが、このブログを表示しようとすると「ブラクラ的」な事が起こってしまうようです。
ここで言う「ブラクラ的」とは、同じページを複数自動で生成しようとする動作のことです。
僕の方では全く感じていなかったことですが、「Sleipnirで表示してもIEで開こうとする」など、不思議な動作も起こるようです。

当方ではそういった症状は起こっていないものの、時折「開けません」のエラーは表示されます。
閲覧環境が「IE8」で、上に挙げた動作は「IE6,7」で起こっているとの情報をもらったので、その間に何か動作の差が起こっているような気がしないでもないです。

画面の表示を見ている限り、どこかでJavaScriptのエラーが起こっている気がします。
こちらとしては、ブラクラ的なスクリプトを仕組むことはありませんし、意図的にエラーを発生させようとはしませんので、もしそのようなエラーが発生した場合には出来ればキャプチャを添えて連絡してもらえたらと思います。

Sleipnirプラグイン Hawkeye

常日頃使っているWebタブブラウザ「Sleipnir」での、便利な機能を紹介します。
Sleipnirでは、Firefoxなどに比べてまだプラグインやスキンは少ないです。
ただし、少ないゆえ(?)のシンプルさもあり、個人的にはSleipnir使いならば使うべきだと思います。

で。
今回紹介するのは、プラグイン「Hawkeye」。以下からダウンロードできます。
Sleipnir｜プラグイン｜レイアウトの調整、CSS・HTML のエラー修正などの Web 開発補助ツール Hawkeye
Hawkeyeは開いているページ内のHTMLを解析し、情報を抽出することが出来るプラグインです。


インストールすると、通常左にあるエクスプローラバーに緑色のタカのアイコンが表示され、そのアイコンを選択することでメニューを表示出来ます。
上のキャプチャは「デザイン」メニューで、他には「校正」「アクセシビリティ」「SEO」「デバッグ」「解析」があります。
何が便利か、と言うのが今回書きたい内容ですが、量が多すぎる事とまだ全部使えていない事を踏まえて、今回は「デザイン」のみの解説を。


「解析：クリックした要素の詳細を表示」
その名の通り、クリックした部分のオブジェクトの情報を表示します。
上のキャプチャはBlogger投稿画面の、タイトル横のINPUTを選択した時の情報です。
HTML内の階層のどこにいるか、そのオブジェクトが持つスタイルの情報などの表示がされます。
わざわざINPUTを立体的に見せるために、枠線も1本ずつ違う色に選択してるのが分かりますね。


「枠線」
この中で選択したものに対応して、HTML内の要素に枠線を付加して分かりやすくします。
上のキャプチャでは、「要素名も表示」して「H要素」に枠線を付加した状態です。
どの部分に＜H1＞～＜H6＞要素が使われているかが一目でわかります。


「CSS」
HTML内にあるCSSに関する情報を操ることが出来ます。
上は、このブログの「すべてのCSSを無効」にした状態です。
外部から呼んでいるCSSだけでなく、要素にStyleとして付加したCSSも無効化され、ページを作成する際などの解析に応用できます。
ブログではいかにCSSを多用しているかが分かりますね。


「HTML」
ここでは、表示されているHTMLを編集することや構造をGUI的に表示することが出来ます。
上のように、階層を色分けして表示出来ますが、階層が深すぎると訳が分からなくなります。
「HTMLを編集」することで、リアルタイムにページに書き換えが反映され、「ここにこれを入れるとこうなる」といったデモンストレーションとして利用できます。



「表示」
今回一番推したい機能です。
HTML内の要素のidや色の情報を取得出来ます。
キャプチャ1枚目が「id,class属性値」、2枚目が「色情報」をそれぞれ表示した状態です。
idが分かれば便利な時と言えば、JavaScriptで要素を操作する時ですね。
idさえ分かれば、あとはその大きさもスタイルも中の値も変え放題ですから。
「色情報」が1発で表示出来るのも嬉しいです。
サイトを見ていて「この色が欲しい」と思った時にさっと使えます。
欲しい情報を局部的に即座に出せる機能は本当に便利だと思います。


「画面」
ウィンドウのサイズの表示と変更が出来ます。
あまりブラウザを細かく表示したりはしないので、使い道が分からないです。
キャプチャする時に「どうしてもこのサイズじゃないとダメ！」というぐらいじゃないかと。


以上で、「Hawkeye」メニュー「デザイン」の解説は終わりです。
適当にサイトで有効/無効に機能を切り替えるだけでも、思わぬ発見があったりします。
特に最近のウェブサイトは入り組みすぎて「どうやってこの構造を生み出してるの？」というのが多々ありますから。
そういう意味では、テクニックを奪う為の1つの案としてもいかがでしょう。

WinXPにおけるフォルダ共有

ひとまずは、就職活動は落ち着きました。
昨日の東京散歩の甲斐あって、無事に1つ内定を得ましたので、会社から通知書が届き次第正式な雇用の段取りに進みます。
やっと一張羅のスーツもクリーニングに出せます。

さて、今日の授業の中での一コマ。
WindowsXPのマシンにみんなが接続するOracleが入っていて、そのマシンのフォルダ共有についての話がありました。
まずは「C:」ルートに入れたら良いのですが、「C:」の共有の設定内「アクセス許可」を開こうとするとエラーが表示されました。

内容は「このリソースは管理のために共有されています。アクセス許可は設定出来ません。」。

実際、LANでは共有「C$」に入れたので問題は無いのですが、エラーが気になったので調べてみました。
するとトップにそのまま出てきたサイトが教えてくれました。
Windows NT/2000/XP/2003 管理共有を無効にする方法

どうも、ハードディスクに自動で付加される共有は「管理共有」と言われているらしいです。
システムでの必要性からOSが勝手に作る共有のようですね。
ただ、「フォルダオプション」内「表示」タブ→「簡易ファイルの共有」を一度無効にしないと管理共有は作成されないようなので、必ずとも必要というわけでは無いよう。
結果として、システムが自動で作成した共有なので、システムが知らないうちに設定を書き換えられるのを防ぐためにエラーを吐いて変更出来ないようにしている、という事です。

はぁー、勉強になった。

東京レビューVol.6

秋葉原から東京に戻り、夕食です。
東京らしい食べ物と言ってもそうそう無く、たまたま通りかかった「どんぶり子」さんで、ぜいたく丼をいただきました。
この時点で、面接を受けた会社から素早い「内定通知」をもらっていたので、自分へのご褒美（笑）です。

東京レビューVol.5

面接が終わりました。
予想よりも早くかつ「元気がない」宣言をくらい落ち込んでいます。
帰りの7時の新幹線までかなり時間があるので、秋葉原を探索します。

東京レビューVol.4

とりあえず東京に到着。
まだ時間があるのでぶらぶらしておきます。

東京レビューVol.3

少し早く腹ごしらえです。
名古屋を通り過ぎたので、豚みそ焼き弁当です。

東京レビューVol.2

無事に乗車しました。あとは2時間半かけて東京まで行くだけです。

東京レビューVol.1

新大阪に着きました。
ワクワクがヤバいです。

明日は東京です

別に観光というわけではないのですが。
就職活動の一環で、面接を東京にある本社で行うことになったので、日帰りですが東京へ向かうことになりました。
家族となら何度か行ったことはあるのですが、一人で東京に行くことはおろか新幹線も一人で乗ったことはないので、少しの恐怖とワクワク感に襲われます。
もうこの時点であまり面接の事を気にしていないので、ホントに観光気分で行ってきます。

東京での面接後の時間もたっぷりと取ってあるので、ぶーらぶらと歩き回ってみたいですね。
秋葉原とか、別にメイドに興味はありませんが、「名所」というなら見てみる価値はありますね。
まぁ、大阪もど派手で奇抜なファッションセンスの持ち主なら結構歩き回ってますが。

社会人アドバイスサイト

就職活動関連での調べものをしているうちに見つけたのでメモ。

社会人応援・アドバイスサイト【デジセン商事.com】
対象は社会人ですが、新入社員系のお話や名刺の受け渡し方、「こんなときはどうするか」をイラストを含めて分かりやすく解説されています。
地味に社内だけでなく学校生活内でも使えそうな事ばかりですし、校内での業務上しておくことも多々あるので、全部眺めてみても損はなさそうです。

Oracle接続メモ

この間入れた無料版のOracleを使用して、授業課題を進めようしたところ、サーバ機に接続出来なかったのでメモ。

普通にサーバ側でデータベースへ接続出来ますし、クライアント側のDSNもきちんと設定出来ているので、原因は究明できます。
学校のPCは、勉強のためにファイアウォールを無効にしているため問題無く使用出来ているのですが、ファイアウォールを有効にしている場合には当たり前に弾かれます。
ファイアウォールを使用したまま接続を通すには、ポート「1521」を解放します。
データベースへ接続するだけなら、これだけでいけます。
SQLの窓を使用したクライアント→サーバへのエクスポートも出来ました。

NAS調査メモ

とりあえず、学校で作る必要が出たので調べてみました。
NASは、ファイルを共有するためのサーバ及びハードウェアになります。

使用目的としては、各年度に作成した業務の資料や画像データなどを一括で保存すること。
以前までは、FedoraでのSambaを構築して運用していましたが、(恐らく)HDDの問題のおかげで一定期間のデータがクラッシュしました。
ここからSambaを構築し直すよりも、むしろ「ファイル共有」という意味合いでのNASを構築することで、サーバ構築の勉強と簡略化を進めたいと思います。
まぁ、僕が構築するわけでなく、後輩たちにしてもらうわけですが。
もう卒業する身ですし、後輩が率先して構築から運用までしてもらったほうが今後の為にもなりますから。

上でハードウェアと書きましたが、一般的にNASは、「共有HDD」としての認識が強いようです。
ネットワーク対応HDD（NAS） | BUFFALO バッファロー
ハードディスク(HDD)｜LAN接続型ハードディスク/NAS｜IODATA アイ・オー・データ機器
実際には、機器にOSが組み込まれているので、そのOSさえあれば他マシン構築と同じように進められるはずです。

今回は専用機を買うのではなく、低スペックマシンにHDDを2枚ほど挿し、NAS特化OSをインストールして構築しようと考えています。
ある程度調べてみた結果、以下のOSが人気なようです。
　・FreeNAS
　・Openfiler
それぞれに特徴はあるようですが、どちらを使っても大差は無いかと思います。
ごちらもRAIDの設定は出来るようなので、もしサーバのHDDの1つがクラッシュしても復旧出来ると思います。

とりあえず構築できたときにはまたレビューしたいと思います。
仮想マシンでも出来るようですので、テストで構築してみてもいいですね。

マクドナルドのコークグラス

今日はマクドナルドで夕食です。
Lサイズセットを買うとコークグラスをもらえると言うことで、せっかくなのでいただきました。
イベント詳細はこちら。
新色、もらえる！コーク®・グラス | メニュー情報 | McDonald's Japan


前回にももらいましたが、なかなか洒落ているうえに掴みやすくて飲みやすいのでとても重宝します。
ついでに、いつの間にか復活していたベーコンポテトパイもいただきます。


前回は緑、今回は青色です。
箱の裏に「B」の文字があるので、他のカラーもそこで判断できそうです。
だからってカラー指定は出来ないみたいですけれど。

チームいろは開発日記

学校の作品制作の過程で、チームを作って制作することになりました。
去年も同等の取り組みがありそこで生まれたのが、以前から右メニューのリンクリストにある「パラパラ漫画作成サイト あみゅぱら」です。
チーム名は「いぶし銀」で、エンジニア3人で作成しました。
Web上でパラパラ漫画を作成・保存・再生ができます。
少し表示・ロードが重い気がしますが、それは基本的にFlex3を用いて作成した結果、ほぼFlashで構成されているからです。

この作品制作ですが、チームでやるからこその意味というものもあるので、勉強としてとても良いと思います。
会社に就職したら多人数で絶対に動くはずですから、その練習にもなると思います。

で。
さっきも書いたように、作品制作は今年もありチームで1つの作品を作ります。
まだ使用するかわかりませんが、メモ程度に書けたらなぁという感覚で、
チームいろは開発日記というブログを作りました。
作品に関してのソースであったり連絡であったりなど、うまく活用出来たらなと思います。

Vista テクニックVol.01

さっき使ってて気付いたのでメモ。

VistaのエクスプローラはXPと違い、メニューバーが標準で出ていません。
マウスで出すならば、「整理」→「レイアウト」→「メニューバー」で出せます。
キーボードの「Alt」キーを1回叩くだけでも出せます。

ちょっと便利。