コーダー必見!複数のバージョンのブラウザを共存させる方法

Web サイトのコーディングをしていると、複数のブラウザ・バージョンでの表示・動作チェックは必須です。異なるブラウザをインストールしておくのはごくごく当たり前のことなので全く問題ありませんが、同じブラウザで違うバージョンを共存させるとなるとまた話は別です。

ということで、コーダーなら知っておきたい同じブラウザで複数のバージョンを共存させる方法を調べてみました。

まずは Windows 向けに IE と Firefox と Chrome から
My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10


厳密には複数バージョンをインストールしているわけではありませんが、複数のバージョンの InternetEplorer を起動することが出来ます。

複数のFirefoxをインストールする方法 | public static void main

複数のバージョンのGoogle Chromeを同時に動かす方法 – 0xFF

次に Mac 向けの情報です。
異なるバージョンのFirefoxを共存させる方法 | Macの手書き説明書

Firefox ならこんな方法もあります。
Rriver » 複数バージョンのFirefoxをMacにインストールする方法

Mac で 複数バージョン、複数プロファイルの Chrome を使う – techlog

最後に、 JavaScript 等のチェックは出来ませんが、かなり多くの環境(OS、ブラウザ)でチェックの出来る Adobe のサービスもご紹介します。
ブラウザーテスト | Adobe BrowserLab


こちらは4月から有料になるようですが、このサービス単体での利用は出来るのでしょうか・・・。

InsyncでGoogleドキュメントをオンラインストレージ化

Google ドキュメントを Dropbox のように Finder で(Windowsならマイコンピュータから)操作できるようにしてくれる Insync と言うものがあるそうです。

GoogleドキュメントをDropboxのように扱える「Insync」が容量無制限で無料化! * 男子ハック

Google ドキュメントは無料でも数GB の容量を使えますが、年間5ドルで20GB、年間20ドルで80GB、年間50ドルで200GB と他のオンラインストレージサービスよりもかなり安い金額で容量を増やすことが出来るので、この保存エリアを気軽に使うことが出来るのはかなりのメリットではないでしょうか。

ちなみに、同期させるフォルダはシンボリックリンクを使うことも出来るので、Dropbox と同じようにフォルダ指定をすることが可能です。

なお、Dropbox にはある履歴機能がこちらには無いので、その点はご注意ください。
ちなみにDropbox と同じようにシンボリックリンクで同期させるフォルダを設定することは出来ますが、最初のフォルダ構成やファイルが同期されるだけで、ファイルの更新などは反映されないようです。

確定申告前なので経理と確定申告についてまとめてみました。

先日 MacOS X 10.7 Lion では確定申告の e-Tax が使えないよ!という話を紹介しましたが、今回は確定申告そのもののお話です。

会社勤めで給料を貰っている人でも、前年に医療費がかかってしまったりして医療費控除を受ける際には確定申告をしなければなりません。普段は年末調整で何気なく還付金を貰っている人も、確定申告をするとどんな感じで所得税が決まっていくのか、数字の流れがわかるので一度やってみると面白いですよ。

確定申告で、税金を取り戻そう! [起業・独立のノウハウ] All About

フリーランスの場合は仕事を依頼してくれた会社からだいたい1月末ぐらいに支払調書が送られてきます。源泉徴収票みたいなものですが、確定申告の際に支払調書は添付する必要はありません。

支払調書は前年に会社がいくら報酬として払って、いくら源泉徴収で納めたかが記載されています。注意点として、一昨年の末までにその会社へ請求は出した(売り上げが発生・売掛)けれど、報酬は翌年に振り込まれた、と言うとき、支払調書の支払額と経理上の前の年の売上金額が一致しなくなります。

例)2010年12月に105,000円(100,000円+消費税)を請求して、2011年1月に入金があった場合

日付/貸方科目/貸方金額/借方科目/借方金額
2010/12/31/売掛金/105,000/売上高/105,000
———-(ここで2010年決算がされるので、売上は計上されるが報酬は支払われていないので源泉徴収もされていない)
2011/1/31/普通預金/95,000/売掛金/95,000
2011/1/31/事業主貸/10,000/売掛金/10,000(源泉徴収)

と言う感じになります。
2010年の時点でこちらからの売上は発生していますが、まだ報酬は支払われていないので源泉徴収もされず、支払調書も送られてきません。2010年分の確定申告では売上はあるけど、その分の源泉徴収はまだですよ、という状態になります。
2011年になって報酬が支払われ、その時に源泉徴収されるので、2011年分の支払調書は売上としては昨年分の決算で計上された分の報酬も含んだものになります。従って2011年の売上と支払調書に書かれている金額は合致しないこともあるということになります。

上の例に更に追加して

日付/貸方科目/貸方金額/借方科目/借方金額
2011/2/28/売掛金/210,000/売上高/210,000
2011/3/31/普通預金/200,000/売掛金/200,000
2011/3/31/事業主貸/20,000/売掛金/20,000(源泉徴収)

とした場合、2011年の売上高は \210,000 となりますが、支払調書の支払金額は \315,000、源泉徴収税額は \30,000 となります。

年に1回しかお目にかかることの無いことですが、しっかり理解しておきたいですね。

その他、確定申告とはちょっと違いますが経理をする上での便利な情報を見付けたのでご紹介しておきます。

勘定科目 一覧表

経理初心者おたすけ帳 – クレジットのリボ払いの処理

経理業務初心者です。振替伝票の書き方について教えて下さい。 – Yahoo!知恵袋

ちなみに、確定申告は源泉徴収されたお金が還付される場合は1月から受け付けているので、確定申告が本格化する2月中旬よりも早く手続きをすることが出来ます。還付金もその分早く戻ってきますよ。

テーブルだってオシャレしたい!テーブル(table)のデザインいろいろ

あまり凝ったデザインのものはお目にかかったことの無い table ですが、CSS などを駆使すればデザイン的にも優れていて機能的な table を作ることが出来ます。そんな色々な表現の出来る table のサンプルを色々紹介しているサイトを集めました。

テーブル(table)デザインいろいろ – E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介

TableをCSSでデザインするいろんなパターンのまとめ | CSS Lecture

Tableのデザインまとめ | DesignWalker

料金表のデザインいろいろ | DesignWalker

無理矢理 dl 要素でテーブルっぽく見せるテクニックもありますが、そのあたりは文書構造をしっかり考えて table の方がふさわしいと思ったら素直に table を使って、綺麗なデザインにしてあげたいですね。

ちょっとメモ:コーディングの基礎はこれ一つで十分。な練習用雛形

HTML+CSS コーディングの練習をする際に必ず必要なのが、そのコーディングする対象となるデザインとドキュメントです。でもこれを考えるのが意外と面倒で、そのためになかなか練習に手を付けられないと言う人もいるのではないでしょうか。

そんな人は、コーディングの勉強をしようとしている人なら(たぶん)みんな知っている「HTMLクイックリファレンス」の「HTML+CSSによるウェブページ制作例」を利用しましょう。

HTML+CSSによるウェブページ制作例

デザインは至ってシンプルなものですが、コーディングをする際の基本的なマークアップの仕方やレイアウトを組む際のテクニックなどのほとんどを練習することが出来ます。コーディングの手順やどの要素、プロパティを使うかなどかなり詳しく解説してくれているので、初心者の方はぜひ利用してもらいたい素材です。

練習も1回で終わらせるのではなく、何度も繰り返して練習して、最終的にはヒントを見ずに1時間ぐらいで出来るようになれば良いのではないでしょうか。何事も反復練習で慣れることが大事ですね。

できるクリエイター逆引きHTML+CSSデザイン事典

ページレイアウトやフォント、画像などの基本がじっくり学べる。次世代Webコーディングの要「HTML5」「CSS3」の最新動向がわかる。iPhone&Androi...

販売価格: 2,415 円 (2012/1/27 12:37 更新)

販売店舗: 楽天ブックス


ちょっとメモ:Pogoplugを使うときは要注意。な隠しファイルたち。

Pogoplug を使い始めて数ヶ月が経ちました。TimeMachine や Dropbox、ASUS Web Storage との組み合わせでこれでバックアップ体制も万全?と思っていましたが、どうも ASUS Web Storage のバックアップがなかなか終わらないので、怪しい隠しファイルを調べていたら原因は Pogoplug にあったようです。

[N] 「Pogoplug」の「.cedata」フォルダを削除する方法

犯人は ".cedata" フォルダでした。その他にも ".ceid" と言うファイルがありますが、これはちょっとしたファイルなのでおまけみたいなもんです。".cedata" の中のファイルは一つ一つは容量が少ないのですが、何しろ膨大な量のファイルなので、100MB ぐらいは平気で越えてきます。

Pogoplug はとても便利なのですが、オンラインバックアップでは出来るだけアップロードするファイルを減らしたいので残念ながら使用を停止することに決めました。幸い ASUS Web Storage の Mac 版クライアントが(まだ Dropbox 的な使い方だけでバックアップには対応していませんが)それなりにしっかり動くようになったので、そちらに希望を託すことにします。

しかしソフトバンクの絡むサービスはろくなことがないな!

Dropbox Perfect GuideBook

外出先からも、どのPCからも最新ファイルを閲覧。iPhone/iPad/Androidアプリも詳細に解説。拡張アプリやスマホアプリとの連携ワザまで。基本操作から...

販売価格: 1,449 円 (2012/1/27 18:12 更新)

販売店舗: 楽天ブックス

ちょっとメモ:JavaScriptをimportしよう

JavaScriptを読み込む時は <script> 要素を使うのが一般的です。

しかし、もしかすると <script> を使わずに動的に JavaScript ファイルを読み込みたい!ということもあるかもしれない、と言うことで、JavaScript で動的に外部 js ファイルを読み込む方法を調べてみました。

JavaScriptファイルを動的に読み込む(require)(import.js)JavaScriptプログラムメモ|プログラムメモ

JavaScript は Perl や PHP などで言う import 的な動きをする命令が無いようなのですが、まあ無理矢理やれば出来ないことは無いということですね。

ただ Win IE では動作が不安定と言うことなので、余程のことがない限りは普通に <script> 要素を使いましょう。

JavaScript&jQueryレッスンブック

JavaScriptの知識がゼロでも基礎から覚えられる。Webのデザインに必須のJQueryもわかりやすく解説。非同期通信やWebアプリなど最新の技術もこれでわ...

販売価格: 2,814 円 (2012/1/27 18:12 更新)

販売店舗: 楽天ブックス

ちょっとメモ:MacOS X 10.7 Lionでe-Taxは出来ないとか

そろそろ確定申告の時期が迫ってきましたね。

昨年はフリーランスになって初めて税務署へ確定申告に行ったんですが、案の定かなり込んでいて、ちょっとした質問をするだけなのに1時間近く並んで、5分ぐらいであっさり終わって書類を提出する。といった調子でした。

ですが最近では e-Tax という、パソコンで確定申告が出来る仕組みがあるんですね。
【e‐Tax】国税電子申告・納税システム(イータックス)


簡単に言うと自宅で確定申告が出来て、添付書類も省略できる一見すると便利な方法です。

しかし大事な税金を扱うシステムというだけあって、色々と準備しなければいけません。特に面倒なのが住民基本台帳カードを手に入れるのと、電子証明書の発行を受けること。これは当然ですが役所で手続きをする必要があります。

次に IC カードのリーダ・ライタを購入します。これは家電量販店や Amazon でも売っているので、買うことそのものには手間はかかりませんが、住民基本台帳カードの IC 部分の種類によって「接触型」「非接触型」「共用型」のいずれかを選択します。少し値は張るかもしれませんが「共用型」を選んでおけば間違いないでしょう。

さてこの e-Tax。これまでの公的手続きはだいたい Mac は対応していないことがほとんどでしたが、e-Tax では頑張ったようで、Mac でも利用することが出来ました。しかし MacOS X 10.7 Lion の登場でその努力がまたも残念なことになってしまっています。
>Mac OS X 10.7 Lionでは公的個人認証サービスを利用できません


どうやら Lion では電子署名をデータに付与することができなくなったらしいです。クライアントソフト側の改修で何とかできるようになれば良いのですが、もし出来ないようなら今後は Mac での e-Tax 利用は無理、ということになるかも。

MacOS X 10.6 Snow Leopard では問題なくできるようなので、このバージョンを持っている人は大事に使いましょう。もし Lion にしてしまった場合は、BootCamp や Parallels Desktop などで Windows を動かして、そこからやってみると良いと思います。

ま、僕は住民基本台帳カードの手続きや IC カードリーダ・ライタを買いに行く手間を考えると、税務署に行くのとほどんど変わらないので今年も印刷をして税務署に行くことにします。もっともっと便利になれば利用してみたいですね。


就職活動のポートフォリオ制作に役立ちそうな本

専門学校の講師をやっていると学生のポートフォリオ制作の面倒も見ることになります。こういうポートフォリオが良いですよ~、とアドバイスをしたりするわけですが、じゃああんたはどうなのさ、と言うと実はちゃんとしたポートフォリオを作った記憶が無いんですね。困ったことに。

僕がこの業界に入ったのは1997年でした。ご存知の方はご存知かと思いますが、当時はネットバブルが始まりつつある時代な上に必要なスキルも、とりあえず Photoshop と Illustrator が使えてメモ帳で HTML 書ければ OK という感じだったので、結構簡単にアルバイト出来たんですね。まあそこで初めて Mac と出会って「クソ Mac」と言っていたぐらいに最悪な印象を植え付けられたんですが。

つまり当時はポートフォリオが無くてもアルバイト程度なら採用してもらえました。その後別の会社に就職した際も、冊子のポートフォリオは用意せずに関わったサイトの URL を履歴書に書いたりメールで送るといった形で行っていましたし、ある程度キャリアを積むとディレクターとしての転職になったので、職務経歴書で応募して面接で仕留める!と言う流れが自分の中で確立したので、結局まともな冊子としてのポートフォリオは今までに作っていません(多分)。

しかしまあ学生にはそういうノリで行け!というわけにも行かないので、どんなポートフォリオが良いんだろうね、と言うのを具体的に解説してくれている本がこの2冊です。



「ポートフォリオの教科書」は、ポートフォリオの実例は少ないですが作成の流れや考え方、作り方をかなり詳しく解説していて、「ポートフォリオ見本帳」は逆に実例を多く紹介しています。

前者だけでは具体的にどういったポートフォリオが良いのかが少しわかりにくいのですが、後者と組み合わせることでそれをうまくフォローできるように感じました。

それぞれの本では企業の採用担当者の声も紹介されていますが、特に Web 業界では技術云々ではなく考え方や伝える力、コミュニケーション能力を重要視しているところが多いですね。学校でいま習っている技術が卒業する頃にはもう古いものになっている、と言うことも十分に有り得る世界なので、技術的な部分は基礎をしっかりと身に付けておいてもらえばそれで良いのでしょう。

でも一番必要で大事なスキルは、この業界が好きだということでしょうね。

ちょっとメモ:レスポンシブWebデザインに挑戦してみました。

年も明けたので、KRYPTOの業務案内サイトをリニューアルしました。

ただ単純にリニューアルしても仕方ないので、CSS3 の Media Query を利用したレスポンシブ Web デザインに挑戦したのですが、これがなかなか大変だったので少しメモを残しておきます。
続きを読む