はてなブックマーク

Gitを使って複数人で開発を行う場合、自分の作業用に「ブランチ」を作る機会が多いと思います。 Git初心者の人であっても、はじめの方に触れる工程のひとつですよね。グランフェアズではブランチ作成のコマンドを次のように教えています。 $ git checkout -b {作成するブランチ名} {親にするブランチ名} ところが、この{親にするブランチ名}が正しく指定されない（=ブランチの派生元を間違える）と後々問題になってしまうことも…。実際にどんなことがあったのか、事例をもとに見ていきましょう。 「ブランチの派生元を間違える」とは 派生元の間違い方として思いつくのはこんなところでしょうか。 親にするブランチが古かった（ブランチ作成前にgit fetch originを忘れた） ブランチ作成時、予定と違うブランチを親にしてしまった。作業は進めてしまったが、まだコミットはしていない。 ブランチ作成

こんにちは。うっかりチカッパです。 Webの方ならば、ほとんどの方がGoogleアナリティクスをご存知だと思いますが、その中でも「どこから流入をしているのだろう？」「ユーザはどのコンテンツに興味を示すのだろう？」など、ユーザの動向を調査したい時がありますよね。 そんな時に便利なのが、Googleアナリティクスの「カスタムキャンペーン用のURLパラメータ」。 URLの末尾に付与するだけで、アクセス計測ができるスグレモノです。 今回は、このGoogleアナリティクスのURLパラメータについて書こうと思います。 GoogleアナリティクスのURLパラメータって？ 冒頭でもお話しした通り、URLの末尾に付与するパラメータなのですが、これを付与するとGoogleアナリティクス上で、どのリンクがクリックされたかを具体的に計測することが可能になります。 例えば、こんなケースで使用します。 上記以外にも、

使わなくなったブランチ、テストで作ったブランチを消したい。コマンドなら簡単だけど、TortoiseGitでどうやるんだ？ ぱっと見該当するメニューが見当たらないけど、こんな感じで削除することができます。 該当するコマンド： $ git branch -d sampleBranch この git branch -d sampleBranch をTortoiseGitでやる方法です。コマンドなら一行なのにっ。亀さんはちょっと手間ですね。 ワークスペースで右クリック コンテキストメニューから [TortoiseGit > リファレンスをブラウズ] 選択 リファレンスブラウザの画面で削除対象のブランチを右クリック [Delete branch] を選択 確認ダイアログが出るので [Yes] リファレンスブラウザの画面を [OK] して閉じる これで完了です！

Gitで必ず使う基本の操作「コミット」。慣れてくるとログの状態にも気が回るようになり、なるべくきれいにコミットしたくなってきます。 でも、時には作業途中に急遽別作業に移らなければならないケースもあったりして、「ブランチ移動の際にコミットを要求される。でもできればまだコミットはしたくない。かといって今の作業内容を捨てたくもない」という状況がしばしばあります。 そんなときは、コミット前の内容を一時的に退避させておけるgit stashが役立ちます。 git stashとは？ stashという単語には、” こっそりしまう、隠す “といった意味があります。 今はコミットしたくない変更を一旦しまっておく…というのが目的ですが、もう少し具体的にシーンを挙げてみます。 合わせて、実際のコマンドの流れも見ていきましょう。 ここではgit stashを使うときに必ず知っておきたい、2つのコマンドをご紹介しま

こんにちは、Quidamです。 前回の記事「「JSテンプレートエンジンとは？」まとめると大変だった基礎知識」から考察が進み、JSテンプレートエンジン「Nunjucks」を社内標準として使用していくことになりました。ちなみにNunjucksの読み方は「ナンジャックス」です。日本人には何とも言いにくい…。「ナンジャックス」と真ん中にアクセントを置きそうですが、おそらくアクセントは先頭の「ナ」で「ナンジャックス」のよう。…どうでもいいですね。 改めて、今回はNunjucksとGulpでHTML開発環境を効率化する具体的な設定例をご紹介します。 ゴールと前提情報 この記事では、GulpとNunjucksで次のような環境を作る事をゴールとします。 Nunjucksを使って、ヘッダー／フッター／モーダルコンテンツなどの共通HTMLパーツを外部ファイル化し、各ページに合わせてアレンジできるようにする。

Google Maps API（Javascript API）について書く記事、第4弾です。 今回はお待ちかねの（？）地図デザインのカスタマイズについてお届けします。 Google マップをWebサイトに掲載するときに気になるのがサイトデザインとの相性。デフォルトの見た目では浮いてしまう場合もありますよね。 Google Maps APIでは、地図上の要素それぞれに対して細かいカスタマイズが可能です。マスターすればかなりオリジナリティのあるデザインにすることができますよ。 カスタマイズのイメージを掴むには、Google マップのカスタマイズ例を集めたギャラリーサイト「Snazzy Maps」などを見るのがおすすめです。 色別や、「シンプル」「ダーク」などのイメージごとに多くのサンプルが載っています。 また、Snazzy Mapsでは掲載されているデザインをそのままコピペで利用可能です。（方

HTMLメール制作の基本をご紹介する記事、後編です。 前回の「デザイン/コーディング前に押さえておきたい、HTMLメール作成の基礎知識」ではHTMLメールの制作にあたって事前に知っておきたいポイントを挙げてみましたが、今回はサンプルなども交えて、より実制作に即した内容をお届けしたいと思います。 グランフェアズで実施したHTMLメール初期制作の流れに沿って、下記の3点をお送りします。 今回掲載するサンプルコードは、最大幅640pxのリキッドレイアウトを前提としています。 「ブラウザ表示用HTML」をコーディング 「配信用HTML」に展開 テスト配信を実施 ※前回記事より：配信までの全体の流れ また、HTMLメールが配信できるサービスとして、利用事例があるのは下記です。 ECサイト構築・運用ASPサービス「FutureShop2（フューチャーショップ2）」のメールマガジン機能 メール配信サービ

こんにちは、Quidamです。 最近では社内メンバーもGitの操作にだいぶ慣れてきました。そうすると、Gitと相性の悪いツールが気になるようになって。その一つが、静的HTMLの量産に長年使ってきたDreamweaver（DW）です。DWのテンプレート機能を使えばJSテンプレートエンジンと同じようなことが出来るので、特に不便を感じることなくここまで来たのですが、テンプレートの更新で不用意に挿入される空行やスペースが、Gitで「履歴」になってしまうなど困った状態で…。 「これはマズイなー」と思っていたところで、めぐたんがNode.jsに手を出し始めたので、これはいいタイミング！と思い、DWからの卒業とJSテンプレートエンジンの社内標準化を進めることにしました。 JSテンプレートエンジンを調べると、すぐにNode.jsやExpress、GulpやGruntといった周辺ツールと合わせた使用方法の記

Gulpを初めて使ってみた！導入からタスクお試し（gulp-cssmin, browser-sync）までの手順 Webサイトのコーディング時には、裏側で細々とした「タスク」がたくさん発生しています。 SASSのコンパイル CSSプロパティの順番を整頓する CSSやJSファイルの圧縮（minify） 画像を圧縮 ブラウザをリロードし、動作確認 …など それぞれのタスクを叶えるWebサービスやソフトウェアも充実していますが、全てを手動で行っていると時と場合によってムラが出やすいのが正直なところ…。 そこで活躍するのが「Gulp」のようなタスクランナーと呼ばれるツール。「ファイルが保存されたら」などの任意のタイミングで、あらかじめ登録されたタスクを機械的に実行してくれます。 単純に作業時間を短縮できることはもちろん、人的ミスを防いで成果物のクオリティを保つことにも繋がります。 今回はそんなGu

Git初心者の私が理解するために、まとめをしてみました。 まだまだ分からないことだらけなので、 自分自身のまとめ・振り返りのためにGit Bashと兼用しているSourcetreeについても軽く触れながらGitについて記事にしていけたらなと思います。 環境はWindowsです。 また、私と同じようにGit勉強中の方のお役に立てれば幸いです。 Gitに挑戦する前に Git用語集 基本用語を忘れてしまうと最初から「よくわからない…」となってしまうので、まずはGitの基本用語についておさらいをします。 ファイルの追加や変更など履歴が保存される場所で、Gitではこのリポジトリが複数作成可能です。 また、リポジトリにはローカルリポジトリとリモートリポジトリがあり、個人用のローカルリポジトリで個別に作業を進め、複数人で使用するリモートリポジトリ(元となる大きな一本の木)に共有をします。 ローカルリポジ

こんにちは、めぐたんです。 今回はWebサイトに「アイコンフォント」を導入する方法をご紹介します。 アイコンフォントとは、フォント1文字1文字に、テキストではなくアイコンを割り当てたもののこと。 PNGやGIFなどの画像形式と比べて、「フォント」としての扱いならではの良いことがたくさんあります。 拡大・縮小しても鮮明に表示される CSSで色を変更できる テキストとのベースラインが合わせやすい 特に表示が鮮明であることは、さまざまなデバイスでの最適化が必要なレスポンシブWebデザインには大きなメリットです。 フォント化と聞くとなんだか手間がかかりそうな感じがしますが、Webサービスを使えばあっという間です。（高校生の就業体験のタスクにしても難なくクリアできました！） それでは早速見ていきましょう。 今回使用するWebサービスはこちら 私がアイコンフォント生成に利用しているのは「IcoMoon

メールには「テキストメール」と「HTMLメール」の2種類があります。 文字だけで構成される「テキストメール」とは変わり、「HTMLメール」では文字の装飾や画像の掲載、レイアウトもある程度工夫できてより視覚的な訴求ができます。 当記事ではHTMLメールのデザインやコーディングを1から行うときに事前に把握しておくべきポイントをまとめてみました。 HTMLメールが配信できるサービスとして、グランフェアズで利用事例があるのは下記です。 ECサイト構築・運用ASPサービス「FutureShop2（フューチャーショップ2）」のメールマガジン機能 メール配信サービスの「VPS-NEO」 HTMLメールのデザインで考えるべきこと 大前提 、「テーブルレイアウト」を使う HTMLメールを作るにはHTMLとCSSの知識があれば大丈夫です。 しかし注意しなければならないのは、メーラーによってサポートしているCS

こんにちは。めぐたんです。 今回からCSSのborderプロパティだけで作る三角形について、全2回に渡ってお届けします。 「borderプロパティだけ」、つまりブラウザの種類やバージョンに依存しないのでもしかすると前々から使われていた手法なのかもしれませんが、CSS3の登場以降CSSだけで色々な表現に挑戦する方も増えたのではないでしょうか？私も最近使う機会がよくあると感じるのでまとめてみました。 .triangle{ border-right: 50px solid transparent; border-bottom: 86.6025px solid #b2ce54; border-left: 50px solid transparent; } なぜこのように「borderだけで三角形ができるのか」を理解するには、borderのある特性を知っておくことがポイントとなります。 border

ページのメインビジュアルとしてもおなじみのスライダー（カルーセル）。 jQueryのプラグインも数多くありますが、グランフェアズでよく使っているレスポンシブ対応のスライダープラグイン、「slick」についての備忘録をお届けします。 slickの公式サイトはこちら。 当記事では基本の設置方法は割愛しています。公式サイトの「get it now」からダウンロードして、「demos」を参考に好きなスライダーを作ってみましょう。 slick – the last carousel you’ll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! ロード時に一瞬縦並びに

Git使い始めは、コミットの内容や粒度にまで気が回らない！ですよね。それに、「リポジトリは非公開で見るのは社内のメンバーのみ」といった環境や、厳密な「バージョン管理」が必要ないプロジェクトを扱う場合は、リモートにある統合ブランチ（masterやdevelop）のコミットが多少荒れていても気にならない・問題にならない事が多いと思います。 特にGitは慣れるまでに時間がかかるので、最初からルールが厳しいと導入が難しくなることも。グランフェアズでも、コミットのルールは特に決めていませんでした。なので、リポジトリのコミットは荒れ放題です…！（苦） 全社的にGitを本稼働させてから1年半。日常的な操作はだいぶスムーズになったので、そろそろリモートで共有されるコミットの状態を気にしよう、というお話です。 コミットをまとめてPull Requestを送る グランフェアズでは、開発最新状態を維持する統合ブ

Google Maps API（Javascript API）について書く記事、第3弾です。 第1弾では地図を表示させるまでの基礎を、第2弾では地図上の位置を示す「マーカー」の表示について学んできました。 ここまで地図表示のオプションは最低限のもののみを設定していましたが、今回は少し踏み込んで「マップの操作面に関するオプション」をご紹介します。 スクロール時の挙動を決める 地図上のボタン=「コントロール」の表示調整 上記の2点について、順番に見ていきましょう！ サンプルコード全体 JSのコメントで「ここ」と示しているのが地図表示のオプション設定で、当記事はここに設定できるオプションの書き方について解説していきます。 オプション周りの記述解説は、第1弾の記事WebサイトにGoogle マップを表示しよう！Google Maps APIの始め方を参照ください。 <!DOCTYPE html>

Google Maps API（Javascript API）について書く記事、第2弾です。 今回は「マーカー」の表示方法をご紹介します。 マーカーとは、地図上の場所を指し示すためのアイコンのことで、デフォルトでは下図のような赤いピンの形をしています。 Google Maps APIを使って表示させた地図にも、もちろんこのようなマーカーを自由に表示できます。 さらにオリジナルの画像をマーカーとして表示させるカスタマイズも可能です！ 当サイトの会社概要ページでは、グランフェアズ専用のマーカー画像を表示させています。 ということで当記事ではマーカーの表示方法について、「基礎編」とオリジナル画像への「カスタマイズ編」、2段構成にわけてお届けします。 基礎編： マーカーを表示してみよう まずは基本の記述内容を確認するため、デフォルトのマーカーを表示させるまでを見てみましょう。 サンプルコード全体

順序リストの表示に利用するol要素。 デフォルトではごくシンプルな番号つきリストですが、デザイナーさんからこんな風に番号部分だけ色を変えるなどの装飾がされたデザインを渡されたらどのようにCSSを作りますか？ …簡単そうに見えて、意外と悩むのではないでしょうか？ 今回の記事では、こんなシーンで使えるCSSのTipsをご紹介します。 最初からついている数字は使わない 結論から言うと、list-style-typeによって付与される数字は使いません。 ここだけを装飾する方法はないので、せっかくですが指定自体を無くすことになります。 ol{ list-style-type: none; } ここから活躍するのが当記事の主役、CSS2から登場した「カウンタ機能」です。 これを使って1,2,3,4…といった連番を疑似要素:beforeにつけなおす方法をとった上で、自由に装飾できるようにしてみましょう。

ユーザが特定の行動を行った時、カウントして計測を行えるイベントトラッキング。 販売動向の分析、資料のダウンロード数やお問い合わせ数の計測など、様々な場面で役立つ機能です。 今回はこのイベントトラッキングについて学んでみようと思います。 イベントトラッキングとは？ イベントトラッキングとは、Google アナリティクスを設置したサイト上にて、ユーザのアクションを計測することができる機能です。 また、イベントトラッキングは通常のGoogle アナリティクスだけでは叶わない様々な計測が可能です。 たとえば… 同一ページ内のどこを多く押されたか計測したいとき 同じページ内にたくさんの要素（リンク先）があるけど、どこを一番押されるのか知りたい！そんな場合もイベントトラッキングを使えば簡単に計測できます。 「上部と下部のボタンではどちらが多くクリックされるか」「画像とボタンのどちらを多くクリックされる

こんにちは！ あだ名が こわっしー に変わってしまいそうでヒヤヒヤしている ひさっしー です…！ 入社から早3ヶ月、黒い画面と一緒にとても濃い日々を送っています！ さて…みなさん、Gitライフ楽しんでますか～？？ まだまだ私も勉強中の身ですが、今回はグランフェアズの業務フローに沿って、 実際に私がどのようなGitコマンドを使っているのかをご紹介しちゃいます！ 今回はこの2点をまとめてみました。 Gitコマンドを使った業務フロー 個人的によく使うGitコマンドまとめ 出てくるのはよく使うコマンドばかりですので、 Git勉強中のみなさまのお役にたてると幸いです。 では、早速ご紹介していきます！ Gitコマンドを使った業務フロー グランフェアズでのマークアップ業務は、コーディング担当とコードレビュー担当の２名でチームを組んで行います。 レビュー担当を作ることで、さらに作業の精度を高めています！

Gitを使ったワークフローを阻む「コンパイルされたCSSをどうするの問題」。直近のプロジェクトまでは、前にブログでご紹介した「masterブランチではCSSを管理しdevelopでは管理しないなど、ブランチごとに特定ファイルの内容を変える」方法を採用していたのですが、テストアップの都度developからmasterへのmergeが必要で時間的ロスが多く、結局developを手動でFTPするという場面が多くありました。むむ。これだと【developへのプルリクマージでテストサーバに自動デプロイ＋CSSは手動でFTP】の方がまだましです。 でもこの「CSSだけ手動でFTP」が地味に面倒。何がって、FTPクライアントを触らないといけないのが面倒。そこでイケメン担当滝君から「GitのコマンドでFTPできるgit-ftpを使うのはどう？」と提案が。特定のディレクトリだけ（＝コンパイル後のCSSだけ）

こんにちは、チカッパであります(◉∀◉ )ゞ このブログはPHPとApacheだけの自作ローカルサーバにMySQLを入れてみたよの続編です。 前回はローカルサーバーにMySQLをインストールしたところで終了しましたが、今回は実際にデータベースを作成してローカルサーバにWordpressをインストールしてみようと思います。 使用するツールはMySQL Workbench。MySQLをインストールすると、自動的にダウンロードされます。 今回初めて使用したので最初は簡単な設定にさえつまづきましたが…きっとすぐにUIにも慣れるはず…！ ではいってみましょうー！ MySQL Workbenchって？ MySQLのデータベースを作成する…といえば、「phpMyAdmin」がまず最初に頭に浮かぶと思います。 XAMPPやMAMPなどのローカル開発ツールをはじめ、レンタルサーバー上でのデータベース作成の多

こんにちは、めぐたんです。 フォント選びはデザイン制作において大切な要素。フリーフォントも種類が豊富にあり、眺めるのも楽しいですよね。 中にはつい色々と集めてしまって煩雑になってきた…と感じている方もいるのではないでしょうか？今回はそんな方にもおすすめなフリーのフォント管理ツール、「NexusFont」をご紹介します。 NexusFontとは？ 「NexusFont」を使うと、フォントを分類して管理できます。そして最大の特徴は必要なフォントを必要なときだけ使えるようになること。 そもそもWindows自体、システムにたくさんのフォントを入れていると起動時のフォントデータ読み込みに負荷がかかってしまう可能性があります。かといって都度アンインストールするのもまた大変…ということで、ツールを活用し効率良く管理していきましょう！ それでは、早速インストールして使ってみます。 インストールから初期設

こんにちは、めぐたんです。 前回は「CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか？どのような設定でどんな三角形ができるのか？を詳しく掘り下げてみました。 では、こうして作った三角形はWeb制作においてどんなときに活躍するのでしょうか？ よく見る利用例を挙げていきたいと思います。 はじめに：三角形を配置するポイント ご紹介するサンプルのラインナップは大きく分けて下記の3つです。 吹き出し ステップ表示 リボン風の装飾 上図のように、要素にくっつけて別の形を表現するという使い方が主だと思います。 この場合三角形自体にはコンテンツとして意味合いを持たないので、:beforeや:afterといった擬似要素として配置します。 また、位置調整のためのpositionプロパティも抑えておきましょう。 利用例1：

Googleの地図検索サービス、Google マップ。 普段からスマホアプリなどで利用するシーンも多いと思いますが、提供されているAPIを使えば自分のWebサイト上にアクセスマップを表示できます。 おなじみのGoogle マップをそのまま掲載することはもちろん、JavaScriptを駆使してオシャレな見た目にカスタマイズすることも可能です。 今回はそんな「Google Maps API」の基礎として、APIキーの取得から、ページにシンプルなGoogle マップを表示するまでをご紹介していきます。 はじめに WebサイトにGoogle マップを表示させる代表的な方法は大きく分けて2つ。 「埋め込みコード」か「Google Maps API」のどちらかです。 「埋め込みコード」は一番簡単な方法で、Google マップ上で目的地を検索後、「共有」ボタンから地図を埋め込むためのコード（<ifram