こんにちは、フロントエンドエンジニアのいなばです。 気付けば、フロントエンド入門Git編の連載も5回目。前回は、ローカルで作業中のコミットを綺麗にまとめたり、間違った操作をしてしまったときにコミットログを修正したりする方法を紹介しました。 今回は、Gitを使う上で重要な「ブランチ」について解説したいと思います。 ブランチとは？ ブランチは、コミットの歴史を分岐して記録していくためのものです。 歴史を分岐させることで、他のメンバーの作業の影響を受けることなく、同じリポジトリ上で複数の開発を同時に進めていくことができます。 分岐したブランチはマージもしくはリベースというコマンドで、他のブランチに合流させることができます。 これを繰り返すことで開発を進めていきます。作業単位ごとにブランチを作ることで、なにかしらの問題があった場合に原因となる箇所の調査が楽になります。なるべく細かい単位でブランチを

どうもですよ！はやちですよ！٩( ᐛ )و フロントエンド入門のGit連載をご覧になってるみなさま、Gitはご利用なられましたでしょうか( ˇωˇ ）　Git使い始めは、誰にでも間違いはつきもの。はやちもテンパってしまう癖があるので、ちょいちょいやらかしてしまうことがあります( ˇωˇ ) 今回はそんなときに役立つ、Gitで間違えて操作してしまったときの対処法をまとめました。sourcetreeベースでご紹介をいたします( ˇωˇ ) 間違いを修正する「リセット」 リセットは、ファイルを以前の状態に巻き戻すことで、ステージ上でもローカル上でも操作できます。 例えば、 ステージ上で更新を加えていたファイルを途中で操作する前に戻したいとき ローカル上で、コミットのコメントを間違えてしまったとき 一旦戻して追加修正したいとき もうこのコミットもろともなかったことにしてしまいたいとき などのシーン

どうも〜こんにちはぁ！　最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ

バグレポートに必要な用語 まず用語として押さえておきたいのが「現象」「期待値」「再現方法」となります。 「現象」とは 「現象」は、不具合の内容を記入です。 「記事詳細ページのテーブルレイアウトが崩れている」や「定期バッチが動いておらず画像の取得に失敗している」といった不具合の内容を具体的に記入します。 必要に応じて、OSのバージョンやブラウザ情報などの細かい情報まで記載しましょう。 「期待値」とは 「期待値」は、「現象」で報告した不具合の改善内容です。 上記の「記事詳細ページのテーブルレイアウトが崩れている」という現象に対して、エンジニアがどのような修正をする必要があるかを定義します。 修正内容を「テーブルレイアウトを制作済みのデザインに合わせる」というように記載し、期待する動作や表示などを明確に提示しましょう。 「再現方法」とは 「再現方法」は、「現象」で報告した不具合の再現方法です。

こんにちわ段田です。 今回もWordPressプラグインにスポットをあてたいと思います。 今回は管理画面の投稿画面で役立つプラグインをテーマに紹介します。 1.Parent Category Togglerプラグイン 通常、投稿画面ではカテゴリ項目で子のカテゴリにチェックした場合、画像のように親のカテゴリには自動的にチェックが入りません。 Parent Category Togglerプラグインは自動で親のカテゴリにチェックしてくれます。プラグインインストール後、子カテゴリにチェックすると、自動的に親のカテゴリにもチェックを入れてくれます。 便利！ Parent Category Toggler 2.Save Editor Scroll Positionプラグイン 投稿を保存した時、エディタのスクロールは一番上に移動してしまいます。このスクロールの位置をそのまま動かさないようにするプラグイ

display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ

こんにちは、株式会社LIG 執行役員の寺倉と申します。 自社サイトの分析、競合他社、類似サイトの発掘と分析は、KPI設定や改修、WEB戦略を立てる上で非常に重要です。 今回は登録不要、かつ無料で使えるサイト分析ツールとサービスを8つほどまとめてみました。これが誰かのお役に立てば幸いです。 株式会社LIGとは 2007年設立、東京都台東区発のWeb制作会社。年間150サイトリリース、毎年複数のWebデザインアワードを受賞。Web制作だけでなく、月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作実績 お問い合わせはこちら マジで使える無料のWebサイト分析ツール&サービス8選 類似サイト検索：Google（コマンド検索） https://www.google.co.jp/ 類似サイトを

こんにちは、まろCです。突然のお別れを経験しました。これだから出会うことを思い出にしたくないんです。いつも最後が悲しいのはもう嫌です。 さて、本日はタイトルのとおり、AWSのELBでSSLの証明書を設定する事例がありましたのでそのログを記事にしたいと思います。 僕はフロントエンドエンジニアなのですが、その案件ではインフラ、バックエンド、フロントと全部担当しました。AWS自体はさわっていたのですが、久しぶりでした。 コンソールが変わっていたり日本語を選択できたりしていたので、いろいろメモを残しておきたいと思い、今回記事にしました。AWSをさわる方のTipsになれば幸いです。 早速流れを追ってみましょう。 秘密鍵とCSRの生成 ELB用にパスフレーズなしのCSRを生成します。実際ELB配下に設置するEC2上で、秘密鍵から作っていきましょう。サーバーはAmazon Linuxを選択しました。 以

事業を継続することが他の業界よりも難しいとされるIT/Web業界にあって、株式会社LIGは来年6月に10期目を迎えます。ユニークなプロモーションで知名度を上げたLIGには、一方で、かつて何度も廃業の危機に瀕した経緯がありました。 そこで今回は、LIGの創業者の岩上に、LIGがこれまでどのように窮地を乗り越え、事業を拡大してきたのかを聞きました。 人物紹介：岩上 貴洋 学生時代にモバイルマーケティング、ITベンチャー企業数社に参加する。在学中からアーリーステージを対象とした独立系投資会社にて、投資業務、コンサルティング業務に従事。2007年、株式会社LIG創業。 起業にこだわった理由は「日本では失敗しても死なないから」 もともと“自分で会社をつくる”ことにこだわりがあったという岩上。その想いは新卒で入社した投資会社を3ヶ月で辞めてしまい、次に入社した会社には「起業するから半年で辞める」とあら

はじめまして、メディアディレクターのもえこと申します。 最近LIGへ仲間入りした私ですが、以前はWeb制作会社で営業職をしていました。 現在はメディアディレクターとしてディレクションを中心とした業務を担当していますが、営業職の頃に培った知識や経験が糧になっているなぁ、と日々感じています。 そこで今回は、Web業界では少数派の「営業職」として活躍するために、私が必要だと考える3つの能力と、それを培うためにおすすめしたい“営業初心者向け”サイトを紹介していきます。 1. ヒアリング能力 クライアントとの商談で大切になるのが「ヒアリング能力」です。 受注の成否自体が左右されるのはもちろん、社内のクリエイティブチーム（Web制作においては、ディレクターやデザイナーなど）に対しての引き継ぎや指示出しなど、制作段階でのスピード感や関係各所との連携に対して大きな影響を及ぼします。 当然ながら会話力やコミ

こんにちは、デザイナーのサリーです。 サイトをデザインするときに当たり前に入れている「Copyright（コピーライト、©️）」の記述ですが、サイトによって年号があったりなかったり、長かったり短かったり、書き方はさまざまですよね。 今回はコピーライトとは何か、正しい書き方や©との関係性について詳しく解説していきます。 コピーライトとは コピーライトとは、英語で「Copyright」と書き、”著作権”のことを指します。著作権とは、作品を創作した人や会社（著作者）が持つ権利であり、著作者は作品がどう使われるか決めることができます。 Webサイトやホームページの下部にコピーライトがあるのは「ここにある記事や画像の著作権は自社が持っているから、無断転載しないでください」という一種の意思表示です。 厳密にいうと著作権法で著作物は「思想又は感情を創作的に表現したものであって、文芸、学術、美術又は音楽の

こんにちは！　アドチームのきょうへいです。 以前「【2014年版】リスティング担当者から見た、イケてるランディングページ10選」という記事を書かせていただきましたので今年も2015年版を書こうと思います！ 今回は色々なLPを見ていたときに気になったものをまとめたものなので、共通点があまりないかもしれませんが、どれもキレイなデザインだったり、面白い動きをするページで、スクロールをさせられてしまうものばかりです。 1. Beagle https://getbeagle.co/ ※現在、上記リンク先は表示できません。 スクロールエフェクトがユニークなLPです。 ファーストビューで大きな写真を使用していて、スクロールをするとそれぞれのアニメーションがさまざまな動きをします。気が付いたら上から下まで何度もスクロールしまくってました。素敵です。 2. Melanie F http://www.mela

こんにちは、ディレクターのはるかです。 以前、スケジュール作成のツールとして「Gantter」と「iTasksX」をご紹介しました。 今回は、Smartsheetを使ってみたので、こちらも紹介していきたいと思います。 ※Gantterは無料、iTasksXは有料版ではないと保存・印刷ができません。また、Smartsheetは30日間無料のようです。 それでは、どうぞ。 1. サイトへ http://jp.smartsheet.com/ まずは、登録手続きを行います。 2. メールが届いたら、スケジュール作成開始！ なお、新機能として日本語が選択できるようになりました。iTaskXの英語が辛かった私には朗報です。 では、タイトルをいれてスケジュール作成を開始します。 3. まずは稼動日の設定 設定ボタンから、ガントチャート設定の編集を行います。 非稼動日はこのように入力すると反映されます。

こんにちは！　ディレクターをしている、まさしです！ 皆さん、今年の目標はもう立てましたか〜？ 去年の目標を達成できていなかった人は、今年こそ目標達成しましょうね！ 次の年末はバタバタしないように、今年はハイペースでいきましょう！ LIGではサイトの新規制作・リニューアルだけでなく、制作したサイトの運用・保守業務も行っています。サイトは一度つくったら置いておけばいいというものではないので、随時更新していくことがユーザによいコンテンツを届けるために重要だと考えています。 ここで、運用・保守業務と聞いて、何を想像しますか？ クライアントからの文字修正や、画像の差し替えなどをイメージするかもしれませんが、実はそれだけではありません。 アクセス解析ツールを使った数値分析のもと、UIを変更してABテストをしたり、ときにはサーバの設定を変更したりしながら、クライアントのKPIを達成するための改善を行いま

こんにちは、エンジニアの王です。今回は、Git初心者を悩ませるリベースについて解説してみたいと思います。 リベースが初耳 リベースを聞いたことはあるけど、使っていない 不安を抱えながらも、リベースをなんとなく使っている 上記に当てはまる方は、ぜひ読んでくださいね。 リベースで何ができる？ コミットが綺麗になる！　以上です！　この一言に尽きる！ 具体的にどのように綺麗になるかというと…… コミット履歴がわかりやすくなる コミットメッセージを後から変える コミットの順序を後から変える 2つ以上のコミットを1個に統合する 一度コミットした内容を編集する といった具合でしょうか？　整理整頓が好きな方は、ぜひリベースを使いこなしていただきたいと思います！ マージとリベース 2つのブランチの変更点を統合するとき、Gitの最も一般的なやり方は、マージとリベースを使うことです。マージは初回で説明したので、

こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 Web業界の会社に勤めていると、日進月歩の新しい知識や技術を習得することが大切だと気づかされることが多いです。 僕も技術者の端くれですから、1日32時間くらいは当然勉強しているんですが、一番の楽しみはいろいろな場所で開かれている勉強会・セミナーに行くことだったりします。 勉強会に行くとその道のプロに教えてもらえますし、仲間もできてモチベーションが上がりますよね。 そこで今回は、そんな勉強会を探すのにうってつけのWebサービスをご紹介させていただきます！ IT/Web業界を中心に勉強会・セミナー・イベントが探せるWebサービス6選 connpass　-人をつなぐ IT勉強会・イベント支援サイト- http://connpass.com/ connpassはキャッチコピーの通りIT・Webのセミナー、勉強会

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 今年も残す所あとわずかですね。 今年はたくさん勉強会なるものに登壇させていただく機会があり、そのおかげか勉強する機会が去年よりも多かったように思えます。 去年まではせいぜい年に2万冊程度しか読んでいなかったんですが、今年は3万冊くらいは読んだかなあ…。 ちなみに去年はこんな記事「2013年厳選版！フロントエンドエンジニアがオススメするWEB系の技術書・指南書」も書きました。 そんなわけで、今回はフロントエンド界隈の勉強会に登壇するとき参考にさせていただいた本を5冊紹介したいと思います。 なんせ3万冊のなかから厳選した5冊ですから、名著であることは間違いないです。 2014年厳選版！フロントエンドエンジニアがオススメするWeb系の技術書 もくじ カルタ付 HTML5マークアップ 現場で使える最短攻略

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ

こんにちは、LIGブログ編集長の朽木です。“ちくしょう。転職だ。”のキャッチコピーでおなじみの某社のバナーに出演している（というより気がついたら使われていた）のですが、友人知人からインターネットのそこかしこで僕を見かけた旨の連絡を受けることがよくあります。 都度頂くのは「本当に転職するのか」という至極当然なご質問であるわけですが、しねえよ！　少なくともYouTubeとかMeryとかみたいなお茶の間の目が届く範囲で転職願望をつまびらかにすることはねえよ！ でも、クリック率は高いとのことです。本当にありがとうございます。 とはいえキャリアプランはいつでも複数検討しておき、最善の選択をしたいものですから、転職あるいは独立して起業というのも日頃から十分な知見を得ていたいと思うのです。 IT/Web業界にいると独立して起業される諸先輩方もたくさんおられるため、「あー、やっぱり」「まさかあの○○さんが

一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話！ とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状…　とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで