HTML、CSS、JavaScriptのデバッガツール「Firebug」のインストール手順

通常ブラウザにはF12押下でブラウザ標準の開発ツールが使用可能となりますが、今回紹介する「Firebug」は高性能なJavaScriptデバッガツールです。JavaScriptだけではなくHTMLやスタイルシートの値をリアルタイムに変更して確認したり、非同期通信状況やDOMの状態などの詳細情報確認も簡単に可能となります。

Firebugの特徴

  • Firefox専用のアドオン
  • JavaScriptのデバッグ
  • 非同期通信の状況確認
  • DOMやスタイルシートの設定状況確認

Firebugのインストール手順

  1. FireFoxを起動し、メニューの「ツール」→「アドオン」を選択します。
  2. アドオンマネージャのメニュー「アドオン入手」画面で検索ボックスへ「firebug」と入力して検索します。
  3. 検索結果に「Firebug x.xx.x」と表示されますので「インストール」ボタンを押下してインストールします。
  4. インストール終了後、デバッグしたい画面を開いてブラウザの右上に追加された「虫アイコン」をクリックすれば虫アイコンに色がついてFirebugが起動します。

marginとpaddingの違い

CSSでスタイルを設定していると「margin」と「padding」の基礎知識が曖昧だと使用する際に混乱しがちなので今回は両者の違いをまとめてみます。

marginとpaddingの関係図

marginの特徴

  • borderの外側にスペース(余白)が設けられる
  • スペース(余白)に背景色は適用不可
  • marginに負数(-5pxなど)が使用可能
  • 隣接した要素と相殺される(されないケースもあります)

paddingの特徴

  • borderの内側にスペース(余白)が設けられる
  • スペース(余白)に背景色を適用可能
  • paddingに負数(-5pxなど)は使用不可
  • 隣接した要素と相殺されない

Windows7とWindows8の違い

Windows XPのサポートが「2014年04月09日」で打ち切られた事もあり、OSのバージョンアップで「Windows7」と「Windows8」のどちらにしようか迷っている方も多いかと思います。今回は両者の違いについてまとめてみます。現状ではインターフェース面でXPと違和感なく操作出来ることから、個人・企業共にWindows7へ切り替えてるユーザーが圧倒的に多いようです。

項目            Windows7   Windows8 備考
インターフェース(UI)インストール後そのままXPと違和感なく使用可能Padなどのタブレット操作を想定しているので、慣れるまで相当な時間を要する
XPモード×サードパーティーの仮想化ソフト(VMwareやVirtualBoxなど)を使用すれば可能。但し、XPモードは使用出来ないのでライセンス的に使用可能なWindows XPが別途必要。
スタートボタン×Windos8.1から標準復活
SSDを最適化する「トリム」機能別途ソフトウェアをインストールする必要あり標準装備
起動時間×起動時間については40%程Windows8の方が早くなるが、Windows7でもSSDを利用すればあまり違和感はない
サポート期間(2014年04月12日時点)2020年01月14 日2023年1月10日
※Windows8.xに常にアップデートし続けることが前提

ざっと特徴をまとめてみましたが、結論としてあくまで業務などでWindowXPからのバージョンアップを望むならWindows7を選択するべきでしょう。
これはOffice2013にも共通していることですが、Windows8はMicrosoft社の提供するクラウドサービス「SkyDrive」を半強制的に利用させようとしている節が伺えます。個人利用や業務で利用しているPCでのクラウドサービスの利用は当然セキュリティリスク面で不安になるのが当然ですし、「SkyDrive」に保存されているデータが某国の情報機関へ横流しされているなんて噂も出ている程です。クラウドサービスを利用することでデータ共有などの利便性が向上するのは確かですが、それゆえに発生するリスク面にも目を向けて利用するように心がけましょう。

URLとURIの違い

ホームページのアドレス部分「http://www.~」を指す場合、「URL」と言ったり「URI」と言ったりしてるのを聞いた事がないでしょうか?一体どちらを使用するのが正しいのか疑問に思う方もいらっしゃると思うので整理しておこうかと思います。

URLとは

  • URLは「Uniform Resource Locator」の略称。
  • URLはURIの部分集合。

URIとは

  • URIは「Uniform Resource Identifier」の略称。
  • RFC3986で規定されている。
  • URIはURLとリソース名を示すURN「Uniform Resource Name」を含む言葉。

正式名称を見てみると「URI」、「URL」、「URN」どれもリソースを表していますが、リソースを識別する意味で使用するのなら「URI」を使用すべきです。

Windows XPを使い続けるリスクについて

ニュースなどでも取り上げられていますが、いよいよ本日「2014年04月09日」を持って長らくサポートしていた「Windows XP」や「Microsoft Office 2003」のサポートが打ち切られます。発売してから10年以上もサポートし続けていたのだから、まあこの辺が頃合いなのかなあと個人的には感じています。むしろ10年以上もよく持ったものだと関心する位ですが。しかし、個人ユーザから一般企業に至るまで広く使用されていたOSのサポート打ち切りとなると、世間的にインパクトはかなり大きいです。Windows7や8に以降するにしても無料ではないので、まだ移行出来していない方というのは特に資金面で厳しいユーザが多いのではないかと思われます。そこで、今後もWindow XPを使用し続けることのリスクについてまとめてみました。

サポートが打ち切られるとどうなるの?

    ⇒今後、セキュリティホールが発見されてもMicrosoftは一切パッチを提供しませんので、Window Updateを実行してもパッチは当てられなくなります。

ウィルス対策ソフトを最新にしていれば問題ないのでは?

    ⇒いくらウィルス対策ソフトを最新にしていても、OSそのものにセキュリティホールが残っている状態というのは、玄関の鍵は掛けてるけど窓ガラスは割れているという状態なのでハッカーなどからの攻撃は防げません。

それでも資金的に厳しいのでXPを使い続けたい場合はどうすればいいの?

    ⇒サポートが切れるだけでOSはこれまで通り動作しますので使用し続ける事は可能です。ですが以下の対策は必須と思われます。
  • インターネット環境に接続せず、完全オフライン状態で使用する。
  • USBなどの外部媒体は極力使用しない。
  • ウイルス対策ソフトを常に最新にしておく。
  • クレジットカード情報などの個人情報はPC上に保存しない。

WinShotのインストール手順と使用方法

画面キャプチャを1操作で簡単に保存出来るソフト「WinShot」のインストール手順と使用方法をご紹介します。
「WinShot」を起動するとタスクトレイに常駐しますので、事前にホットキーを設定しておけばCtrl+PrintScreen押下だけで画面キャプチャを連番付で自動保存という事も可能となります。開発現場などでテスト証跡を取得する際に重宝されるソフトの一つです。

WinShotの特徴

  • フリーソフト
  • 対応OS:Windows 95/98/Me/NT/2000/XP ※Windows7でも問題なく動作してます。
  • 画面キャプチャーを撮った直後に印刷・保存
  • 撮った直後のキャプチャー画像を専用ビューワーで表示し、印刷/加工処理を行うことも可能

ダウンロード先

    下記サイトへアクセスし、セットアップ版をクリックしてダウンロードします。
    WinShot公式サイト

インストール手順

  1. ダウンロードしたexeファイルをダブルクリックしてインストーラを起動します。
  2. 「次へ」ボタンを押下します。
  3. インストール先を選択して「次へ」ボタンを押下します。
  4. ショートカットを作成するフォルダを指定し「次へ」ボタンを押下します。
  5. 「デスクトップにアイコンを作成する」へチェックし、「次へ」ボタンを押下します。
  6. 「インストール」ボタンを押下しインストールを開始します。
  7. 「終了」ボタンを押下すればインストール完了です。

WinShot設定例

  1. WinShotを起動し、タスクバーのWinShotアイコンを右クリックして「環境設定」を選択します。
  2. 「基本設定」タブを選択し、ファイル自動保存の保存先をデフォルトの保存先を削除し、任意の保存先を追加します。また、保存ファイル名の接頭語、連番の桁数、連番の開始番号もここで指定します。
  3. 「ホットキー」タブを選択し、「JPEGで保存(アクティブウィンドウ)」、ホットキー「Alt + PrintScreen」を選択して「OK」ボタンを押下すれば設定終了です。
  4. 後は何かアクティブウィンドウを表示して「Alt + PrintScreen」を何度か押下すれば指定したフォルダへ画面キャプチャが連番付で保存されます。

エスケープとエンコードの違い

ふとエスケープとエンコードの違いって何だろうと思ったので整理してみました。
どちらも「一定の規則に従い別の記号や文字列に置換する」という点では同義語に見えますが、根本的にその性質は全く異なるものです。

エスケープ

  • HTMLでは「< 」を「&gt;」へ変換することをエスケープ処理と呼称します。この場合、画面上はエスケープしても「

エンコード

  • 情報を暗号や通信に適した形式(コード)に変換すること。動画などの場合、この「形式」のことをコーデックと呼びます。
    例えばURLコードへエンコードすると「半角スペース」は「%20」へ置換されます。そしてURLを見てみるとエンコード後の文字列がそのまま表示されています。

WinMergeのインストール手順

テキストベースのファイルやフォルダの相違点を比較出来るソフト「WinMerge」のインストール手順です。
※2014年04月06時点での最新バージョンは「2.14.0+-jp-37」になるようです。

WinMergeのインストール手順

  1. 以下サイトへアクセスし、WinMergeのインストーラ用exeファイルをダウンロードします。
    WinMerge日本語サイト
  2. ダウンロードした「WinMerge-2.14.0+-jp-37-x64-Setup.exe」をダブルクリックしてインストーラを起動します。
  3. セットアップウィザードが表示されたら「次へ」ボタンを選択します。
  4. 「次へ」ボタンを選択します。
  5. インストール先のフォルダを指定して「次へ」ボタンを選択します。
  6. インストールするコンポーネント(今回は「フルインストール」を選択します。)を選択し、「次へ」ボタンを選択します。
  7. プログラムグループを指定(デフォルトのままでOK)し、「次へ」ボタンを選択します。
  8. お好みに応じて追加タスクを選択し、「次へ」ボタンを選択します。
    ※通常は「エクスプローラのコンテキストメニューに追加」と「デスクトップ上にアイコンを作成」にチェックすれば十分です。
  9. 「インストール」ボタンを選択します。
  10. 「次へ」ボタンを選択します。
  11. 「完了」ボタンを選択すればインストール作業は完了となります。

Microsoft Office 2013のインストール手順

先日購入した「Windows Office Professional 2013(パッケージ版)」が届いたので早速インストールしてみました。
パッケージ版と言ってもDVDなどのメディアは一切なくプロダクトキーのみでしたが・・・。

Microsoft Office 2013のインストール手順

  1. Microsoftアカウントを取得していない場合は、下記サイトから事前に登録しておきます。
    https://signup.live.com/
  2. https://www.office.com/setup/へアクセスします。
  3. プロダクトキーを入力して「開始」ボタンを選択します。
  4. マイクロソフトアカウントへログインします。
  5. 言語欄で日本語を選択し、「続行」ボタンを選択します。
  6. ようこそ画面が表示されたら、「インストール」ボタンを選択します。(セットアップ用ファイルがダウンロードされます。)
    ※デフォルト状態では32bit版がインストールされる為、64bit版をインストールしたい方は「追加のインストールオプション」を選択して64bit版を選択してからイントールを実行して下さい。
  7. ダウンロードされたセットアップ用のexeファイルをダブルクリックして実行すれば、Office 2013のダウンロードとインストールが自動的に実行されます。
    ※office2013ではインストールドライブは選択出来ないようです。

    ダウンロードに時間がかかる場合、以下の様なダイアログが表示されます。(私の環境ではインストール完了まで20分程掛かりました)
  8. インストール完了後、Officeが起動したらMicrosoftアカウントへサイインすればセットアップ完了です。

Microsoft Office 2013 エディションの違い

いよいよ2014年04月09日で長らく続いたWindows XPやMicrosoft Office 2003のサポートが打ち切られます。
私のPCもOSは既にWindows7になっていますが、Officeだけは2003のままなのでこの機会に更新しようかと思います。どうせ買うなら最新版のOffice 2013にしたいのでエディション別の違いをまとめておきます。

エディション参考価格
(Amazon)
WordExcelOutlookPowerPointOneNoteAccessPublisher
Personal 2013
¥24,116
Home and Business 2013
¥27,352
Professional 2013
¥46,553
Professional 2013
アカデミック
¥23,370

やっぱりどのエディションも2万以上するので高い!
正直、自宅で使用する方はフリーのOfficeソフトで十分な気がします。
私の場合は、仕事でも使用するのである程度慣れる必要もある為、PowerPoint、Accessが入っている「Professional 2013」を購入する事にしました。