カテゴリー別アーカイブ: 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など個別にコマンドを実行する際にターミナルからも動かせるようにしておきます。
参考サイト