Web制作情報

thum

GitにPushすれば自動でデプロイできる「dploy」を試してみました

テスト環境や本番環境へのデプロイ(ファイルのアップロード)をGitのプッシュに連動できる「dploy」というツールを使ってみました。

やりたい事

  • 環境は2つ、テスト(1)と本番(2)
  • Git(GitHub)でソースコード管理
  • 開発段階はdevelopブランチにて作業、本番公開時にmasterにマージ(featureなどは適宜)
  • developブランチにプッシュすると(1)に自動デプロイ
  • (2)はmasterブランチにプッシュ後ブラウザ上で操作してデプロイ

使ったツールがこちら

dploy.io – Continuous deployment for everyone http://dploy.io/

img-1-1

無料で作成できるレポジトリはひとつ、以降10レポジトリ毎に有料になってきます。
10個で月$15は若干高いですね。

以下テストを行った手順をまとめてみます。

まずはアカウント登録

img-1-2

サブドメイン名やメールアドレスなどを登録します。

テスト用のGitレポジトリを作成

img-2-1

テスト環境用にdevelopブランチを作成してリモートにプッシュしておきます。

レポジトリ、サーバーの設定

img-3-1

登録後、自分のアカウントにログインすると連携させるレポジトリとデプロイ先のサーバーの設定に移ります。

img-3-2

今回はGitHubでテストしました。テスト用のリモートレポジトリを選択し名前を付けます。

img-3-3

img-3-4

続いて環境設定。名前やラベルカラー、デプロイの自動/手動の設定、他Webフックなどのオプションを設定します。
ここでブランチをdevelopに設定し、developにプッシュされるとデプロイするという設定にします。

img-3-5

最後にサーバー設定。

img-3-6

完了するとこんな画面になります。

img-3-7

同様に本番用の設定も行います。ここでのブランチはmasterを設定。一旦自動でデプロイにしておきます。

img-3-8

これで準備完了。

レポジトリにプッシュしてみる

img-4-1

developをプッシュ

img-4-2

dployを見てみるとコミットした内容が表示されています。

img-4-3

プッシュ(デプロイ)する毎に履歴が残るような形ですね。

img-4-4

もちろんテスト環境にもファイルはアップされています。

img-4-5

最新のレビジョンが.revisionというファイルで確認できるようになっていますね。

masterもプッシュしてみる

img-5-1

masterにコミットをマージしてプッシュ。このへんは手動。

img-5-2

dployにも反映されています。この場合は3コミット分まとめてデプロイしてるのでレビジョンとしてはひとつ。

masterを手動デプロイに変更

img-6-1 dployの設定画面に戻り、Development Modeを”Manual”に変更します。

img-6-2

すると次のコミットをmasterにプッシュしてもデプロイされなくなります。
ここからは手動でのデプロイになるので、画面上にある”Deploy”ボタンを押してデプロイします。

img-6-3

こちらが手動でのデプロイ画面。deployment noteという個別のコメントを記載できます。

img-6-4

[Start Deployment]を押すと無事にデプロイできました。

まとめ

dployは設定が非常に簡単で、画面もわかりやすいので特に迷う事なく使えました。
1レポジトリ無料のフリーミアムなので気軽に使ってみるのも良いですね。

参考サイト

thum

BootstrapベースのシンプルなWordPressのテーマを作成

サイト設計段階で使用するモックアップの制作にBootstrapを利用する事は多々あるかと思います。

Jadeなどのテンプレートエンジン+スニペットを駆使すれば全て静的なHTMLでも割と簡単に作成できますが、
ページの概念や検索機能、記事管理、メニュー管理の面で、いきなりWordpressに乗っけたものがあっても良いかと思い、シンプルなテーマファイルを作成してみました。

https://github.com/kotaro-co/bootstrap-wp-template

レイアウトとして4パターンを制作しました。以下は確認用の静的なページ

img-single1.シングルカラムのページ

img-multi2.マルチカラムのページ

img-masonry3.カード型レイアウトのページ

img-allparts4.Bootstrapの全パーツをまとめたページ

フルスクリーンのページやもっとグリッド感を強めたレイアウトまであっても良かったかもしれませんが、とりあえずレイアウトは1.〜3.である程度賄えると思います。
また、4.のパーツ一覧ページはオリジナルでCSSを作った際にパーツを1ページでまとめて確認するためのものです。※こちらのサイトから拝借しました。

WordPressのテーマとして設定した場合は、[Page-Single],[Page-Multi],[Page-Masonry],[Page-AllParts]の固定ページ用テンプレートが同じものになります。
この固定ページ用テンプレートは特に記事の連動はかけていないので、必要に応じて設定するという想定です。

img-page-wp

WordPressでBootstrapのパーツを組み立てようと思った時に、ショートコード系のプラグインを入れて記事本文エリアで作成する事もできなくはなかったのですが、 結局タグの入れ子が多くなってHTMLを組むのと大差が無い事と、細かいクラス指定ができないなどプラグイン上の制限があるため、あくまでパーツの組み立ては使い慣れたコードエディタで直打ちするのがベストだと判断しました。
ですのでWordpressもローカルにインストールしてローカルでテンプレートを組んで行くイメージですね。

スクリーンショット 2015-05-09 17.25.39

Amebaの無料Webサイト作成サービス「Ameba Ownd」を使ってみました

アメブロを運営するAmebaが昨年リリースした無料Webサイト作成サービス「Ameba Ownd」を使ってみましたので簡単にレビューしてみます。

スクリーンショット 2015-05-09 17.34.15 作ったページ

Ameba Owndの詳細
“わずか3ステップで誰でもカンタンにウェブサイトを作成することができます。”という事で、ページ自体は数クリックで立ち上がります。
掲載する写真を選んだり、簡単にプロフィールを作って1,2時間で作成し終わります。

良い点

  • レスポンシブに対応した綺麗なテンプレート
  • 色やフォントなど細かすぎないデザイン設定
  • SNSとの簡単な連携

イマイチ、わかりにくい点

  • 項目のラベリングや管理画面の構成(慣れればOK)
  • ページのレイアウトでカラム分けできない(スマホメインならOK)
  • 文字のスタイル(太字やリンク、アライン)を設定するWYSIWYGのメニューの出し方がわからない
  • 画像のアップロード時にサイズの大きい画像で上下反転する
  • 文字の変換時にWYSIWYGが出た場合文字が消える時がある(Safariだけ?)
  • 投稿を新規追加する際に右上のアイコンを押すという点に気づきづらい、「投稿を管理」のメニューに並べてあった良い

簡単な操作でサイトを作れるサービスですが、ちょっと細かく設定したいという人にはやや物足りないかもしれません。あと上記変換文字が消えるなど、編集画面の使いにくさは慣れるまで気になる点です。

あと、アメブロのアカウントを使いますが、投稿も別になるので本体のブログと特に連携は無くアメブロとは別物という扱いです。

【随時更新】Bootstrapに役立つ便利なリソースまとめ

bxSlider実装まとめ

jQueryスライドショーライブラリ「bxSlider」の実装方法や細かな注意点、カスタマイズの方法などをまとめます。

bxSliderのウリ

  • 軽量、シンプルで使いやすい
  • 画像だけで無く、HTML要素もまとめてスライド可能
  • タッチデバイスのスワイプによる切り替えに対応
  • レスポンシブ(幅100%に拡縮)対応
  • IE8より動作
  • 各種オプションが充実、カスタマイズしやすい

ダウンロード、設置

本家サイトにアクセスし”Download”ボタンからデータをダウンロード。
jQueryも必要になるので、HTMLには下記のように読み込みを記述。

必要なファイル(ディレクトリ js/bxslider は任意):

HTMLの指定

関数の呼び出し

この場合’slider’のクラスを付けた要素の子要素がスライドするアイテムとなります。
※bxSlider-setting.js等と別ファイルにまとめておくと良いです。

オプションについて

バグ等の対処

前後ボタンやページングをクリック後、自動切替が効かなくなる場合の対処

呼び出した関数をオブジェクトに格納し、startAutoコマンドを時間差で実行させる、という仕組みです。

1ページ内に複数設置する場合

縦スライド版(vertical)設定時にうまく動かない時の対処

jquery.bxslider.js内の下記の箇所をfalseにします。

IE9以降で動かない時の確認事項

jQueryのバージョンは1.8.2以上になっているかを確認します。 http://wind-mill.co.jp/iwashiblog/2014/05/bxslider-ie-notwork/

Sublime Textで一つのキーバインドに複数のコマンドを登録する方法

Sublime Textはデフォルトで一つのキーバインドに一つしかコマンドを登録できません。
複数登録できるようにするには別途プラグインを追加する必要がありますので、その方法と、キーバインドの設定をまとめます。

プラグインの設定

  • [Tools]>[New Plugin…]と選択
  • untitledのファイルが開かれるので、下記のコードをコピペ。
  • ファイルを未保存の状態で開いておく
  1. パッケージのフォルダをfinderで開く([Sublime Text]>[Preferences]>[Browse Packages…])
  2. 1.の 〜〜/Packages/直下に”Run Multiple Commands”という名前でフォルダを作る
  3. untitledのファイルを名前を付けて保存。↑の/Run Multiple Commands/内に”run_multiple_commands.py”という名前で保存する(run_multiple_commands.pycも同時に作られる)
  4. ↑のrun_multiple_commands.pyをSublime Textで開いた状態で、Package Controlを開く[cmd+shift+P]
  5. “Create Package File”を入力して選択
  6. “Run Multiple Commands”と入力して”Default”を選択してEnter
  7. デスクトップに”Run Multiple Commands.sublime-package”というファイルができるのでユーザーのパッケージフォルダ(/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User)に移動

最終的に

  • /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Run Multiple Commands/ にrun_multiple_commands.pyとrun_multiple_commands.pyc がある
  • /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/ にRun Multiple Commands.sublime-package がある

状態になればOK。これでプラグインの設定が完了

キーバインドの設定

ここで複数キーバインドを設定するサンプルとして、複数のファイルを編集中にしている状態で「ファイルを全て保存」した後、「ファイルを全て閉じる」という二つのコマンドを実行する設定を作ってみます。

  1. [Sublime Text]>[Preferences]>[Key Bindings – User]を開く
  2. 下記サンプルのように記述する
  1. [alt] + [cmd]+ [shift] + [s] を押すと、
  2. “save_all”(ファイルを全て保存)した後、”close_all”(ファイルを全て閉じる)を実行する。
  3. commandを続けて書けば、同様にコマンドを実行できる。

参考

A Sublime Text 2 plugin to enable running multiple commands in any given context from a single key binding.

Sassのインポートをディレクトリ単位で指定する sass-globbing

Sassでimportを行う際は1ファイル毎に指定する必要があります。

例:

これだとモジュールが追加になった時等に都度importの記述を追加する必要があり手間になってしまいます。
以下のように指定できると便利ですよね。

こちらを実現するために「sass-globbing」というツールを使用します。

インストール方法

ターミナルを起動して、以下のコマンドを使ってインストール。

Compassを使う場合はconfig.rbに以下を追記

以上でOK

参考:
Automatic Sass Imports with Sass Globbing | Fuse Interactive | Drupal Web Design and Development in Vancouver
sass-globbingでSassファイルをお手軽管理 – Qiita

フロントエンド開発に必要な準備(アプリケーション編)

普段私がコーディング業務で使っているアプリケーションをご紹介します。

Sublime Text

まずはこれですね。DWやCoda、Brackets、Atomなんかも最近出てきましたが、

  • 強力なコード編集機能
  • 豊富なプラグイン
  • 軽量さ

この利点でまだまだSublime Textは使っていけそうです。

MAMP

SassやGitなどの普及によりローカル環境での作業の割合がより大きくなりました。
無料で十分使えますし必要な機能は揃っています。(他のアプリは試していませんが)

iTerm2

Macでターミナル作業を行う際にちょっと見やすくするアプリ。
背景が黒くなってコードがシンタックスハイライトしてわかりやすくなります。あとタブで実行環境をスッキリ管理できます。

また、Sublime Textの”Terminal”のパッケージでデフォルトで起動するアプリをiTermに設定する方法ですが、
[Package Setting] > [Terminal] > [Setting – User] を選択して以下を追記すればOKです。

Transmit

高性能なFTPクライアント。

  • Dropboxに設定を同期
  • Macのfinderのような見た目。クイックルックも使えます。

Source Tree

GUIでGitを使うならコレ。最近インプレスジャパンさんから刊行された「Web制作者のためのGitHubの教科書」でも標準で使うアプリとして取り上げられました。

CopyPath

これはコーディングの作業というよりはチームで作業する際にファイルやフォルダのパスをやりとりする時に使っています。
以前は無料でしたが、今はappstoreで有料(100円)になっていましたね。

Sublime Textの初期設定

Sublime Textをインストールしたらまずやる事のまとめ。
パッケージのインストールや覚えておきたい操作など。

インストール・初期設定

概要など

まずはインストール

本家サイト
有償ですが、試用版でも機能制限なし。
Sublime Text2もありますが、最新バージョンの3を使います。

オレオレユーザー設定

[Preference] > [Setting – User] に以下を記載

オレオレスニペット

https://github.com/WebNAUT-BW/snippets-st-frontend

インストール方法

/Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/snippet/
に***.sublime-snippetファイルを格納。このディレクトリ以下であれば自由にフォルダに分けてOK。

呼び出し方

[cmd] + [shift] + [p] → 各スニペットファイルのtabTriggerで設定した名前を入力(予測変換するので途中までの入力でOK)

押さえておきたい基本機能

操作・表示系

名前 詳細
Multiple Selections [cmd](windowsなら[ctrl])を押しながら、複数ヶ所を同時に選択して編集することが出来る
SoftUndo [cmd] + [u] 「選択」「カーソルの位置」なども戻すことができる、便利な「戻る」機能
フォルダによるファイル管理 基本的な作業はフォルダをアプリにドラッグしてサイドバーに設定から行う
Minimap コードの全体像が把握可能

ショートカット

Sublime Textのキーボードショートカット一覧 (Mac OS X)

よく使うショートカット:

名前 詳細
[cmd] + [d] 一回で単語を選択、二回目から選択中の文字列を検索して順次選択
[cmd] + [alt]+ (数字キー) ウィンドウを横n等分
[cmd]+ [/] コメントアウト(コメント解除)
[ctrl]+ [t] 選択された二箇所の文字を交換する
[cmd] + [shift]+ [a] 親のタグまで選択
[cmd] + [shift]+ [d] カーソル位置の行を下に複製
[cmd] + [alt]+ [f] 置換パネルを開く
検索パネルで[enter] 次を検索
検索パネルで[shift]+ enter 前を検索
[tab]/[shift] + [tab] インデント/アンインデント

パッケージ

Package Control

パッケージを管理しやすくするパッケージ。まずはこれを入れないと始まらない。

機能概要:

設定方法:

  • 公式サイトにアクセス(必ず最新の情報でインストールすること)
  • Sublime Text3のタブが選択されているのを確認して、Installationの項目の「import urllib〜」で始まるコードをコピー。
  • [View] > [Show Console] をクリック
  • コピーしたインストール用のコマンドを貼り付けて[enter]
  • インストールが走っている間しばし待つ
  • 「Package Control: No updated packages」と表示されて処理が止まった所で完了

Package Controlを使ったパッケージのインストール方法:

  • [command] + [shift] + [p] > 「Install Package」 と入力(変換候補が出るので”install”まででOK)
  • [enter] を押してしばらく待つ(ステータスバーがLoading中の動きになります。)
  • インストールしたいパッケージの名前を入力して [enter]

Emmet

Zen-codingの現行版

使い方:

1.ショートコードでタグを展開([ctl] + [e])
例:

↓[ctl] + [e]で展開

2.wrap with abbreviation(後からタグで括る)

  • 括りたい範囲を選択して、[ctl] + [alt] + [enter]
  • ウィンドウの下に「Enter abbreviation」が出るので、指定したいタグを入力して[enter]
  • 複数行をliなどで括る場合はul>li#と入れると行単位でliを指定可能
  • クラスやIDも1.のショートコード同様指定可能

Emmet Cheat Sheet

http://docs.emmet.io/cheat-sheet/

Bracket Highlighter

htmlのタグ、jsの括弧のペアをハイライトしてくれる

SideBarEnhancements

サイドバーの強化、右クリックで操作できる事が増える

AutoFileName

imgタグやcssなどで、パスを入力する時に、ファイル名を補完してくれる素晴らしいパッケージ

※ユーザ設定に下記を追加するとimgタグのwidthとheightの順番がwidthが先になります。
[Preference] > [Setting – User]

Abacus

イコールとかコロンとかを綺麗に揃える

▼例:使い方

↓整えたい行を選択して、[cmd] + [alt] + [ctrl] + ]

ConvertToUTF8

Sublime TextはデフォルトでShift-JISやEUCに対応しておらず、そのまま開くと文字化けしてしまいます。
それらのファイルを開いた時に文字エンコードをUTF8に変換し、保存時にまたエンコードを戻してくれるというパッケージです。

各種シンタックス

  • SCSS(SASSを入れてしまうと.scssでemmetを使った時にセミコロンが自動で付かない)
  • Compass
  • LESS

各種スニペット

  • HTML Snippets
  • CSS Snippets
  • jQuery Snippets pack
  • JavaScript Snippets

JSHint

JavaScriptのリアルタイム構文チェックを行うパッケージです。
なお、これを使うためには別途Node.js経由でJSHintをインストールする必要があります。

紹介記事

追加するパッケージ

  • SublimeLinter
  • SublimeLinter-jshint

TrailingSpaces

全角スペースをハイライト表示するパッケージ
インストールしただけではうまく動かず、

[PackageSetting] > [TrailingSpaces] > [Setting – User] に

を記載します。これでOK

参考サイト

上記設定を追記する先が
[PackageSetting] > [Package Control] > [Setting – User] と書かれていますが、正しくは
[PackageSetting] > [TrailingSpaces] > [Setting – User] ですのでご注意。

カラーテーマ設定

おすすめ

[Monokai Dark]、[Flatland]
参考サイト

オリジナルなテーマ設定を行う方法

紹介記事:Sublime Textのテーマをカスタマイズできる「Color Scheme Editor for Sublime」 – へっぽこプログラマーの日記

まずはこちらにアクセス

  • 左上の[Gallery]で既存のテーマを選択
  • 細かい色の調整(必要に応じて)
  • [download]して**.tmThemeファイルをダウンロード
  • [Preferences] > [Brouwse Packages] でFinderにPackage内容を表示
     /Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/**.tmTheme ここにファイルを格納
  • すると [Preferences] > [Color Scheme] > [User] にテーマ**が選択できるようになる

フロントエンド開発に必要な準備(ターミナル関連)

Sublime Textでサイドバーからターミナルを起動できるようにするパッケージ

参考サイト

iTermをデフォルトで設定する方法:

[Package Setting]>[Terminal]>[Setting – User]を選択してパッケージ設定ファイルに以下を追記

Sass/Compassのインストール

参考サイト

1.ターミナルを開いて以下を入力

2.以下で確認

3.Compassも同様に

Node.js

Grunt/Gulpを実行するために必要なサーバーサイドJavaScriptです。
「NPM」というNode.jsのパッケージマネージャにGrunt/Gulpが登録されているため、ターミナルでインストールを行い使えるようにします。

インストール手順:

  • 本家サイトにアクセス
  • Installボタンを押してpkgファイルをダウンロード、実行

Node.jsの動作確認

  • ターミナルを起動(iTerm)
  • nodeのバージョンを確認するコマンドを打つ

“v0.10.26″等のバージョンが返ってきたらOK

Grunt

ターミナルを開いて以下のコマンドを入力

Gruntの動作確認

ターミナルを開いて以下のコマンドを入力

以下のようなテキストが出てくればOK

参考サイト:

Gulp

Gruntと同様に以下のコマンドでインストール

Git

基本的にSource TreeのUIだけでGitを扱えますが、Git mvなど個別にコマンドを実行する際にターミナルからも動かせるようにしておきます。
参考サイト

More

ブログ

thum_500

サービスで振り返る2015年春の引越し

今年3月に東京から実家の長崎に引っ越しました。
その際に使用したいくつかのサービスと良かった点、反省点などを振り返ってみます。
書き始めるとあれもこれもと膨らんでしまいかなりの長文になってしまいましたが、何かしらお役に立てれば幸いです。

目次:

  • 輸送手段を決める: ヤマト運輸
  • 梱包資材など買っておくもの: Amazon
  • ダンボールのサイズ選び: アースダンボール
  • 売れるものはここで: ヤフオク
  • 不用品は「あげます」: mixi
  • いろいろTODO: Wunderlist

輸送手段を決める: ヤマト運輸

yamato
http://www.kuronekoyamato.co.jp/top.html

引越しでまず最初にやることとして輸送手段を決めるという工程があります。
これは予算や荷物の量、今後の生活スタイルに合わせて選ぶ事になりますが、主に以下3つで選ぶ形ですかね。

1.業者にお任せ
2.車で自走
3.宅急便

1.業者にお任せ

今回は利用しませんでしたが、一番メジャーで楽な方法。
関東内であればおすすめの業者は「スタームービング」です。
2トントラック、スタッフも3人付いて半日で搬出〜搬入まで済んで2万円ちょっとです。 梱包が不十分でもトラックが広いのでぼんぼん載せてもらえます。 若手スタッフの動きもとてもテキパキしていてまさに星のような動きであっという間に輸送が完了します。
安さの秘訣はこの動き速さなのだと納得しました。

2.車で自走

レンタカーでハイエースなどのバンを借りて自分で搬送する方法です。
距離が近くて荷物が少ないなら一番安く済むし、梱包もざっくりでいいので事前準備は楽ですね。自分も何度か使ったことがあります。
レンタカーを借りる際の一つポイントとしては、24時間空いてるお店を使う事ですかね。
渋滞や荷下ろしでちょっと時間オーバーした時も延滞金が少なくて済みます。これが20時閉店とかだと、動ける時間も限られるし、延長してしまうと次の朝までのお金がかかってしまいますので、家からちょっと遠くても24時間営業のお店があればそこを使うのがオススメです。

3.宅急便

私は今回この方法にしました。
九州までなので距離もあり、時期的に引っ越しシーズンピークだったため、業者に頼むと20万ほどかかってしまうため、予算を抑えたかったのが一番の理由です。
また、実家に戻るという事で家具家電など大物の荷物を処分したので、宅急便で送れるサイズの梱包にできました。

宅配業者は、ヤマトを使いましたが、使って良かったポイントとしては以下

  • ユーザー登録を行っておくと集荷の依頼が簡単。
  • 集荷時に登録した送り先宛の送り状を記載したものを用意してもらえる
  • 輸送状況の確認や配送完了の通知を送り先と送り元にそれぞれにできる(実家にいつ頃届くよーという連絡が不要)
  • ソファや布団など、宅急便で送れないサイズの荷物はらくらく家財宅急便で一つずつ配送できる

梱包資材など買っておくもの: Amazon

amazon
http://www.amazon.co.jp/

プチプチのロール

何かと必要なプチプチですが、極力幅の大きいものを選ぶのがポイントです。
箱に入れて梱包が難しいものはこれでぐるっと包めばそのまま発送できます。

プラテープ

箱の固定など全般的に使うもの。 茶色いガムテープでも良いですが、3Mのこのテープは頑丈で剥がした時の跡残りも少なく、透明なので見た目もきれいです。

養生テープ

後から剥がして使うものを巻く際にこれも多少必要です。

テープのローラー

これ!今回一押しがこのローラーです。
上記プラテープをこれにセットして使いましたが、とても便利です。
手で切れないような素材のテープでも片手で簡単に切れますし、何より断面が真っ直ぐになるのが無駄がなく仕上がりも綺麗。

ひも結束器

雑誌やダンボールをまとめる際にビニール紐を巻く事がありますが、手で結んでもすぐ緩くなったりなかなかうまく巻けない事が多いと思いますが、これを使えば簡単かつ頑丈に固定する事ができます。
紐をねじって固定するという発想がとてもナイスです。

その他、ダンボールも含め梱包資材を買う一番のポイントは多めに買うという事です。
余ったら捨ててしまえばいいですが、途中で足りなくなってしまうとその間作業が中断してしまったり梱包も不十分になってしまうなど、ロスが非常に多くなってしまいます。

ダンボールのサイズ選び: アースダンボール

earth-daball
ダンボールは基本的に同じサイズに統一すると個数が把握しやすくピッタリと収納できて良いです。
私が今回基本とするサイズに用意したダンボールがこれ↓ http://diskunion.net/acc/ct/detail/ACS-2

自分がアナログレコードの収納で多く持っていた事がきっかけだったのですが、これは発送100サイズぴったりで重いものでも手持ちで運べるちょうど良い大きさの箱です。
これを今回40個用意して、これを超えるイレギュラーなサイズのものはプチプチで巻くなどで対応しました。

また、これとは別でどうしてもジャストサイズで欲しかった箱があり、今回アースダンボールを利用しました。
4枚買って送料込みで3000円ぐらいでした。サイズや厚さなど細かく指定できて結構使えます。

売れるものはここで: ヤフオク

yafuoku
http://auctions.yahoo.co.jp/

言わずと知れた個人売買の最大手。
不要になったものを売りに出したい時はリサイクルショップは使いません。なぜなら、

  • 箱や説明書が不足してたり、年式が古いと買い取ってもらえない
  • タダ同然の値段にしかならない
  • 車がないと持ち込み自体が大変

多少手間はかかりますが、ブランド品、メーカー品などある程度お金になりそうなものであればヤフオクに出すのが一番です。
自分は今まで何度も出品した経験があり、細かいノウハウはいっぱい持っているのですが長くなるので要点だけまとめますと、

  • 競合の商品をリサーチしてちょい低めの金額設定にする
  • 1枚目の写真(サムネイルになる)を引きのあるものにする
  • 本文エリアにも写真を掲載しまくる
  • 目立ちアイコンなど有料オプションを惜しまない
  • 終了時間設定は日曜の夜にする

という感じです。
ヤフオクの売買を身につけると物を買う時の選択肢も広がります。
HTMLや写真の簡単な加工をする事もあるのでWeb制作のノウハウも生かせました。

不用品は「あげます」: mixi

mixi
http://mixi.jp/

はい、ここで何故mixi?という感じですが、今回の記事で一番オススメしたいのがこのサービスなのです。
mixiの匿名性膨大な掲示板コンテンツを活用します。
今回引越しに使うそのコンテンツはあげます/くださいコミュニティです。

地域別にコミュニティがあったりもしますし、自分が利用したこのコミュニティは参加者4万人もいます。
このようなコミュニティは基本的に金銭のやりとりは行わず、「あげます/ください」のやりとりだけを行うだけの場所なので、お金は1円もかからず、あげた物に対してクレームを言われるなど面倒な事は一切ありませんし、関東圏内であれば利用者も多く「発送無し、引き取りのみ」という条件を付けても引き取り手はどんどん見つかります。

  • ヤフオクに出すほど価値が少ないが、普通に使える品。
  • 粗大ゴミに出すにはお金がかかるが、リサイクルショップに持っていっても買い取ってもらえない品。

といったものは結構な量が出てきます。
私の場合は「押し入れ収納、突っ張り棒」「ヘルメット」「トレーニンググッズ」「ゴミ箱」「IKEAの家具」などです。

例えば私が出したのはこんなもの。
http://mixi.jp/view_bbs.pl?comm_id=32603&id=77916121

これによって自分の処分費用も浮かせる事ができて、貰った人のためにもなる。
Win-Winというやつです。素晴らしい。

今回自分は幸運にも複数の品を同じ人に何度も引き取りをお願いできて、「こんなにいろいろと頂けたので、他に処分するものなどあればもらって行きますよ」という有難いお言葉まで頂け、更にゴミ処分の手間まで省く事ができました。

いろいろTODO: Wunderlist

wunderlist
https://www.wunderlist.com/ja/

最後に挙げるものは引越しに限ったものではありませんが、TODO用のアプリです。
Webはもちろん、スマートフォンのアプリでも使えます。

引越しには荷物の配送の他に電気や水道などの契約処理や、お金のやりくり、転職のタイミングであれば挨拶まわりなど、短期間に重要なタスクが集中するものです。
引越しは段取りが命なので、職場のPCや移動中のスマートフォンなどでも手早くTODOをチェックできると無駄なく進められます。

もちろん引越し後も住所変更などの手続きや新たに買うものも出てくるので、引越し後の今でも使用しています。

wunderlist

反省点

以下やっておけば良かった事など、次回引越しの際に忘れないようにメモとして残しておきます。

単身パック

ヤマトと日通が提供している単身パック。少ない荷物を遠方に安く送るにはやはりこれが一番。今回は予約が間に合わず使えませんでした。

ヤマトのカード会員

ヤマトの発送に使えるプリペイドカードです。
5000円以上で10%オフ、5万円以上使うなら15%オフになるので、今回の予算なら確実に値引きが有効でした。
発行まで3週間ほどかかるという事で今回は間に合いませんでした。

時期の選択

実は今回3月末という時期はマストではなかったので、少し時期をずらしても良かったなと思います。このピーク時期を避ければ引っ越し業者の代金もぐっと安くできるので利用できたかもしれません。

まとめ

ダラダラと書いてしまいましたが、まとめを書くとすれば、引っ越しで大事なのは早めに動くという事に尽きますね。
業者の手配はもちろん、今回紹介したライフハック的な情報を集める時間も事前に確保して引っ越しに臨めると良いですね。

最後に収支。

IMG_9323_r

  • ダンボール100サイズ(33個): -¥53,460
  • ダンボール160サイズまで(13個): -¥25,596
  • ソファなどらくらく家財宅急便で送った大物(4個): -¥26,870
  • レンタカー(友人に家具を譲渡): -¥8,454
  • 資材購入: -¥16,960
  • 粗大ゴミ: -¥7,900
  • ヤフオク(5点)の売り上げ: +¥33,050

合計: -¥106,190

なんとか10万ちょいで収まりましたが、予算にも余裕があるのがなによりですね。。

thum

HTML5の認定資格を取ってみました。

年末年始の休暇を利用して資格を取ってみました。
HTML5 プロフェッショナル 認定資格レベル1というWEB制作者、特にデザイナーやコーダーに人気のある資格です。

内容としては

  • WEBの基礎知識(http、リクエスト、サーバーなど):15%
  • HTML(HTML5)タグの知識:40%
  • CSS(CSS3):30%
  • レスポンシブデザイン:10%
  • オフラインアプリケーション:5%

という感じで、HTMLだけでなくWEB制作全体の基礎知識が必要になるものでした。

学習した期間は約2週間。教材はこちらの認定教材1冊とWEBに上がっているリファレンスサイトを少々。

以前出ていたこちらの白い教材はやや内容が薄くてこの1冊だけでは合格が難しいと言われていたようですが、今回使った教材なら1冊まるっと頭に入れば十分合格できると思います。

合格点は70点/100点、自分は89点でした。
他に受験された方のブログ記事などで「教材に無かった問題がいっぱい出た」と言われていてかなり構えていましたが、自分の場合はほぼ教材と同じものでした。

受験は認定の試験場でPCを使う形式。
試験終了直後に結果がわかるというあっさりしたものですが、認定証や賞状は約3週後に郵送されます。

img1

今後のキャリアアップに少しでも役立つかと思って取ったものですが、改めてWEBの基本的な知識を学べたのは良い機会でした。
リクエストやプロトコルといったネットワーク系の言葉を始め、HTML5になってセマンティックになったタグの使い方も学びとしては非常に多く、今までよりタグ付けに迷いが無くなりました。

勉強のやり方については、普通に教材を頭から順に読み進めて、理解が弱い部分を何度か振り返るという普通な流れでやりましたが、本当は一回模擬テストをやった後で本を読み始めるようにしたかったのですが、教材についてくる模擬テストが1回分しか用意されていないため、最後の1回にテストするだけにしか使えなかったのが少々効率が悪かったように思います。

現在は新しい教材も出たようで、これから受験される方はこちらもお使い頂ければ完璧なのではないでしょうか。

img_markup_150107_04

「Print1」というツールを作りました

先日、会社のWeb制作ブログにてこんな記事をアップしました。ご存知の方いるかな?

▶︎縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」

「日頃ちょっとだけ困っている事を仕組みを作って改善する」という取り組みから生まれたツールと記事でした。
仕組みのシンプルさやWeb以外の用途に発展した事などが評価され話題となりました。

自分は普段は受託でWebを作っていて、直接ユーザーと関わる事も少ないため、今回のようにSNSでのビビットな反応もすごく新鮮でした。
スマートフォンアプリを始め、サービスを作っている会社はこのようなドキドキを毎日のように感じているのかと思うと羨ましくもあり、苦労の一端も感じられたという意味ですごく良い経験でした。

thum

2014年映画振り返り

2014年に劇場で鑑賞した新作映画はなんとか80本。
目標の100本には惜しくも届きませんでした。
以下ベスト10が絞りきれず12本です。

  • ほとりの朔子
  • ウルフオブウォールストリート
  • 新しき世界
  • LIFE!
  • LEGO(R)ムービー
  • アクトオブキリング
  • キャプテンアメリカウィンターソルジャー
  • her 世界でひとつの彼女
  • ガーディアンズオブギャラクシー
  • インターステラー
  • 6才のボクが大人になるまで
  • ゴーンガール

まとめると結構普通ですね。
どれも素晴らしくて甲乙つけるのは難しかったのでランキングにはしていませんが、唯一ベスト1として挙げたいのが「ガーディアンズオブギャラクシー」です。
音楽の使い方やキャラの立て方、話のテンポの良さ、画作りの新鮮さ、どれも自分のツボにハマっていて、この1年というよりはここ数年超えられないぐらいの傑作だったと思うぐらいでした。まあ、これもいろんな人がベストに挙げてるので普通っちゃあ普通ですね。

今年はアベンジャーズ、007、ミッションインポッシブル、スターウォーズ、ターミネーターと注目の続編も目白押しで楽しみ!
なのですが、、
さすがに80本以上を今年観るのはキツいのでほどほどにしようかと思います。
あとはサボっていたレビューもぼちぼち書いていけるペースにします。

poster2

【レビュー】新しき世界

ネタバレ注意!

この映画評は私自身の鑑賞メモという扱いで、基本的に本編の内容に触れる事が多いものです。
作品をご覧になっていない方は鑑賞後に読んで頂く事をオススメ致します。
最新情報はTwitter/Facebookにも更新していますので、良ければフォローしてみてください。

評判どおりの快作でした。
韓国の映画はこういったノワール(犯罪/暴力)系映画をよく観ますが、これまた名作が生まれたなという感じです。

ヤクザ映画でよくある展開として、
ちょっとしたイザコザからある時死人が出る→そこから復讐、復讐の振り子がだんだん大きくなる→最後はみんな殺し合って死んでしまう。
結局ヤクザという生き方の愚かさ、虚しさばかりが残ってしまう事が多いと思います。
北野武監督の「アウトレイジ」もそのような映画で、その直接的な暴力シーンを含めた争い自体をエンターテイメントにしているような作品でした。

対してこの「新しき世界」はヤクザの闘争+潜入捜査という要素が入って一つ厚みのある話になっています。
直接的な暴力シーンはそこまで多くはなく、どちらかと言うとセリフや間、そして”顔”によるせめぎ合いによって闘争を繰り返します。
潜入捜査におけるサスペンスさというのは自分が警官である事がバレて身の危険が迫ること、そして潜入している犯罪組織に情が生まれてしまい自らの正義感が揺らいでしまう事であり、
宣伝文句でもありますが、「父への忠誠か、兄との絆か。」
その主人公の”葛藤”がメインとなる話になっています。

潜入捜査官の主人公イ・ジャソンを演じるイ・ジョンジェ、
ジャソンが兄と慕う組織の幹部チョン・チョンを演じるファン・ジョンミン、
ジャソンを裏で操るカン課長を演じるチェ・ミンシク、
他役者陣の脂の乗った演技や顔の強さも見物ですし、刀を振り回しながらの乱戦や緊迫感のあるシーンの飛ばし方など撮影/編集もすごくうまいです。

ラストの1シーンは蛇足だとおっしゃる方もいるみたいですが、
主人公の最後の決断を裏付ける大事なエピソードであり、作中の主人公が終始「我慢」「苦しみ」「迷い」の表情しか見せていなかった中で最後にあの笑顔を見せるという構成はとても見事であったと思います。

More

このサイトについて

Trunkast(トランカスト)はWeb制作に関する様々な情報を発信するサイトです。 HTML/CSSを始めとするマークアップ技術をメインに様々なTipsや制作ツールを紹介しています。

著者について

霜田 広太郎
[Kotaro Shimoda]

1981年生まれ。前職は株式会社ビーワークス(東京都港区)にてWebディレクター/マークアップエンジニアとして働いていました。
現在は地元の九州に移り、フリーのWebエンジニアとして活動中です。