はてなブックマーク

開発用と公開用で読み込むデータを変更したい、Gitで同じ開発環境を共有しながら一部のデータは作業者のPCで設定できるようにしたい。 要件が複雑な案件では、開発環境もより柔軟性のある設定にしておきたいことがあります。 たとえば、https環境が必須の機能を検証するためにbrowser-syncの設定が必要な場合です。各自のPCで証明書の発行が必要なので、Gitで共有することができません。 Google Maps APIやデータベースと連携するAPIを開発用と公開用で変更する場合もあります。切り替えるたびにソースコードを書き換えていると、本来不必要なコミット履歴が増え、開発用のAPIのまま本番環境に公開してしまったなんてことも起こってしまうかもしれません。 今回は柔軟性のある開発環境にするために便利な、環境変数とenv（エンブ）を紹介します。 環境変数とenv（エンブ）とは 環境変数とは、OS

中央揃えになっている固定グリッド（Fixed grids）から片側だけ外へ飛び出させた装飾のカラムを リキッドレイアウトのレスポンシブデザインでスタイリングする方法です。 IE11も対応している CSSの calc() で相対値と絶対値をかけあわせたサイズを設定するので 画面幅がかわっても、片側は中央揃えのカラムとツラをあわせたまま（端をそろえたまま） もう片側は画面端までのびたサイズをキープできます。 ※IEはpaddingの仕様に落とし穴があったので、最終的にはIEバグ対策のJavaScriptも併用しています。 INDEX よくある中央揃えのレスポンシブなカラム アシンメトリーなカラム まとめ サンプルソース とりあえず実物から見てみたい方は、CodePenのサンプルソースからどうぞ！ See the Pen Asymmetry Column by webdev (@webdev-j

文章の校正（誤字脱字や文法の誤りを正すこと）というと、ライターや編集者がするものと考えがちですが、エンジニアやデザイナー、ディレクターなどのウェブサイト製作にかかわるすべての人にも有益なスキルではないでしょうか。 エンジニアの最終成果物はコードですが、仕様書などの文章を書くことも意外と多いです。アウトプットにブログを書くこともあります。 デザイナーが校正をわかっていると、文章修正の手戻りが少なくなるかもしれません。コピーライティングまでできるとデザイナーの大きな武器の1つになります。 ディレクターはメールやチャットでやり取りをしたり、資料や原稿を作ったり、校正スキルが役に立つ場面も多いです。 といっても、校正の知識もないし、何から始めればいいのかわからないという方には、コードエディター「VS Code」と拡張機能「テキスト校正くん」がオススメです。 難しい設定もなく、文章の校正が始められま

サイトの規模やスケジュールに応じてスタイルガイドを作成した方が効率良く進められるケースもあるかと思います。スタイルガイドを作成するメリットにはデザインの統一、テストや運用の効率化などが挙げられます。 とくにスタイルガイドを用いてプロジェクトに関わるメンバー（ディレクター、エンジニア、デザイナー）間の認識を共通化することはプロジェクト進行において非常に重要な意味を持ちます。 スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。 引用：Webデザインのスタイルガイドの作り方 ただし、スタイルガイド導入にはメリット、デメリットがあります。導入するべきプロジェクトなのかは見極めが必要になります。 質の高いスタイルガ

以前、Sassの変数（Map）とmixinでメディアクエリを管理する記事を書きました。 Sassの変数とmixinで変更に強いメディアクエリをつくる 単純なmixinで導入はしやすいですが、min-widthとmax-widthのどちらも使いたい場合は変数とmixinを増やす必要があったり、@media (min-width: 768px) and (max-width: 1023px)のような条件には対応していませんでした。 「Sass MQ」はこれらの機能を備えている高機能で軽量なライブラリです。 「inuitcss」で採用されていたり、「Sass Guidelines」で紹介されていたりしています。GitHubで1578のスターも付けられています（記事執筆時点）。 Sass MQをインストールする npm・yarn・Bowerからインストールできます。 bower install s

皆さんは作成したプログラムをどうやって検証環境や本番環境にデプロイしていますか？ 最近では GitHub と連携して自動デプロイするホスティングサービスなど色々ありますが、僕は SFTP/FTPS/FTP での手動アップが多かったです。 手動アップだと差し替えミスがあったり単純に面倒くさかったりするので、そろそろ手動アップ卒業したいなと思い、 Deployer を使ってみました。 Deployer とは PHP で作られた CLI のデプロイツールです。 各種フレームワークをデプロイするレシピを備えており、簡単にデプロイ環境を構築することができます。 詳しくは公式を確認ください。 Deployer – A deployment tool for php 前提条件 Deployer を使うには対象サーバーへ ssh 接続ができることと、 Git がインストールされていることが必要です。 イン

今回は、Chrome拡張機能「VisBug」を紹介いたします。 VisBugは、閲覧中のWebサイトの情報を視覚的に編集できるとても便利なツールです。 デベロッパーツールのデザイナーやディレクター向けという感じでしょうか。 テキストの変更や要素の位置の移動、画像の差し替えも試せるので、色々なアイデアをテストすることができます。打ち合わせの時などに活躍しそうです。 目次 VisBugのインストール VisBugの使い方 1.VisBugのインストール ChromeでVisBugにアクセスするとインストールができます。 2.VisBugの使い方 インストールをすると、Chromeのツールバーにアイコンが追加されます。…① 編集したいWebサイトを閲覧している時に、そのアイコンをクリックするとページの左側にツールバーが表示されます。…② （編集を終了したいときはもう一度アイコンをクリック。） そ

セキュリティなどの問題で規約に変更があったり、コードの書き方が微妙に変わっているものがありましたので、2018年12月現在の情報を調べ直してみました。 ※各SNSでは、複数の便利なボタンや埋め込み表示サービスやカスタマイズ方法がありますが、こちらでは「定番のもの」のみをまとめています。 弊社デザイナーに聞いたところ「レギュレーションが意外と厳しい！」との声がありましたので、ボタンやロゴの文言・余白などを調整したい場合は、デザイン規約について触れているページの URL も併せてどうぞ！ （ボタンのカスタマイズ方法は複数ありますが、基本的には「支給されているそのまま」で使うことを推奨。） 目次 Facebook（「いいね！」ボタン、シェアボタン） Twitter（「ツイート」ボタン） LINE（「LINEで送る」ボタン） はてなブックマークボタン Pocketボタン おまけ（Google+、m

今ではなくてはならないものになったGitですが、コミットメッセージの書き方に悩んだことがあります。 案件によってルールが違うこともあります。GitHubで有名なリポジトリを見ていても、そのリポジトリの対象範囲や目的などによってルールも違うように感じます。 この記事ではコミットメッセージの役割や、日本語でWebサイトを制作する僕たちはどんなルールにするのが良さそうなのかを考えます。 各ツールによって「課題」「Issue」「チケット」と呼ばれるものは「課題」と表記しています。 また、TAMではプロジェクト管理ツールのBacklogを通してGitのバージョン管理機能を使用しているため、「Gitのコミットメッセージを考える」としていますが、Subversionのような別のバージョン管理システムでも同じように考えることができると思います。 前提となる背景 Gitを使う状況を決めておきましょう。すべて

パースのついた画像から不要なものを消す時、なかなか上手くいかないことはありませんか。 画像から不要な部分を消す場合「コピースタンプツール」や「コンテンツに応じた塗りつぶし」をよく使いますが、このようなパース（遠近感）のついた画像だと、、 コピースタンプツールを利用↓ コンテンツに応じた塗りつぶしを利用↓ ちょっと違和感がありますね。。 こんな時、PhotoshopのVanishing Pointが良いということで試してみました。 Vanishing Pointで不要なものを消す手順 メニューからVanishing Pointを選択 ダイアログボックスで編集範囲を作成 Vanishing Pointのスタンプツールで不要な部分を消していく 編集を確定し、ダイアログボックスを閉じる 1. メニューからVanishing Pointを選択 メニューの「フィルター」→「Vanishing Poin

data-whatinputとdata-whatintentが少し分かりにくいと思いますが、デモで色々な操作をして確認してみてください。data-whatintentはキーボードとクリックを完全に分離して切り替え、data-whatinputは両方同時に使って操作していく感じかなと思います。 デモではクラスが設定されていないので、data-whatclassesは確認できません。 セレクタの指定方法 具体的な指定方法です。 以下のように指定すると、クリックやタップで要素を選択したときにだけフォーカスインジゲータが出なくなります。フォーカスインジゲータをoutlineプロパティだけで指定している場合はこれだけで大丈夫かもしれません（詳細度は要確認）。 [data-whatinput="mouse"] *:focus, [data-whatinput="touch"] *:focus { ou

Vue.js で気象情報を表示させてみたいなとふと思い立ったので実際に作りながらVue.jsのAPI連携についてもまとめてみました。 今回実装するに当たってAPIからデータの取得が簡単に行えるaxiosを利用します。 基本的なVue.jsの使い方は公式ドキュメントがあります。 Vue.js - 基本的な使い方 axiosに関してより詳しく知りたいという方は以下のリンク先でご確認ください。 GitHub - axios/axios: Promise based HTTP client for the browser and node.js ■以下のように特定地域の気象情報をVue.jsで描画させることを目指します。 デモページ ■必要な準備 OpenWeatherMapでアカウント（無料）を作成し、APIキーを取得する OpenWeatherMapでは気象情報を取得できるAPIサービスが用意

決まったフォーマットを元に、画像や文言を差し替えるといったファイルの量産は、とても面倒で時間がかかりますよね。 そんな時にはPhotoshopのデータセット機能を活用してみてください。 差し替え要素をまとめたCSVファイルとPhotoshopを紐付ければ、大量のデータを自動的に生成してくれます。 手順 フォーマットを用意 CSVファイルを作成 変数を定義 データをセット ファイルの書き出し フォーマットを用意 今回はECサイトのセール商品にそれぞれのOFF率を掲載してみる、という例でサンプルを用意してみました。 下記のフォーマットを元に、商品画像とOFF率を差し替えたファイルを量産していきたいと思います。 出力するファイル名を商品コードにしたいので、ここでは0のテキストレイヤーを用意し、非表示にしておきます。 CSVファイルを作成 1列目には項目名を、2列目以降に差し替え箇所に挿入する値を

IcoMoonでSVGスプライトを簡単に設定できるようでしたのでやってみました。 目次 ABOUT SVGスプライトとは SVGスプライトを使うメリット なぜIcoMoonで作ったか HOW TO （1） Illustratorでアイコンを作成する （2） IcoMoonでSVGスプライトに必要なファイルを生成する （3） SVGスプライトの設定の仕方 HTMLでの設定方法 WordPressでの設定方法 OTHER 色やサイズをCSSで指定する その他使えるプロパティ ABOUT SVGスプライトとは サイト全体で使用する複数のSVG要素を一つのデータにまとめて、使いたい時に呼び出すというものです。 仕組みは<svg>タグを<defs>タグで囲み外部ファイルにまとめて、<use>タグで呼び出します。 SVGスプライトを使うメリット SVGなので滲まずキレイに表示され、色の変更やサイズ変更

突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては

デザインの方向性の合意を取らずにサイトの制作を進めてしまうと、「イメージと違う」といった問題に繋がりやすく、プロジェクトの進行に影響が出てしまいます。合意を取ってからデザインに入ることで方向性のズレが生じにくくなります。 実際にどうやってデザインの方向性を決めているのかをご紹介できればと思います。 「何のために作るのか」「どう表現するのか」を知るためにはヒアリングが最も効果的だと考えています。 「どう表現するのか」って何だか曖昧ですよね。プロジェクトを進行する時、複数の人が関わっている場合が多く、「かわいい」というキーワードでも人によって思い描くイメージは様々です。 ヒアリングで導き出したサイトイメージ（トーン&マナー）を資料化することで、クライアントやチーム内で、共通認識を図ることができます。 デザインのヒアリング まずはクライアントを知ることが大事です。制作するものが商品のブランドサイ

TAMでは規模の大きな企業さまと仕事をすることが多いので、スタイルガイドを使った案件も比較的多いです。 数百ページ規模のサイトのスタイルガイドを作成してきましたが、考え方が少しずつ固まってきました。そして、この考え方はコードを書く人だけがもっていればいいわけではなく、ディレクターやデザイナー、部分的にはクライアント（発注者）にも共有しておく必要があると感じています。 この記事を読んだあとに、スタイルガイドを作るうえで考えておくべきことを知り、全員のスタート地点を揃えることができればいいなと思っています。 コーディングの知識がないとわからない箇所もありますが、冒頭にコーディング担当者以外に向けた要約を入れているので安心してください。 内容は以下のようになっています。 スタイルガイドを使うメリットとデメリットを共有する コーディング前に情報設計とデザインを固めておく ページの量産までにスタイル

Webで受託のお仕事をしているとサービスデザインを一からすることはあまりありませんが、それでも「UX」や「UI」が叫ばれて久しい昨今、サイト構成や画面設計において「UX的にどうなん？」のような言葉が飛び交うことがよくあります。 「UX」自体は「ユーザー体験」として「要はモノより体験が大切なんでしょ？」という漠然とした共通理解は様々なミーティングの場でも感じられますが、定量的な視点と定性的な視点がごっちゃになって議論が的を得ていなかったり、そもそもその違いを意識していなかったりで、結果今までとあまり違いのないものや好みで決定して進行してしまいます（費用やスケジュールの兼ね合いもありますので…）。 Webディレクターとしてプロジェクトの円滑な進行はもちろん、お客様の売り上げに貢献したく、少しでもサービスをいい方向に改善するために今一度「定量調査」と「定性調査」をおさらいして、定量的な視点と定性

画像の保存を完全に防ぐことはできませんが、右クリックなどから画像を保存されにくくする実装方法を4種類試してみましたのでご紹介します。 ■目次 画像の上に要素をかぶせる pointer-eventsを使う -webkit-touch-calloutとuser-selectを使う contextmenuとdragstartを使う 1. 画像の上に要素をかぶせる 画像の上に要素をかぶせて、画像をクリックできないようにする方法です。 See the Pen img-protect01 by tam_yi (@tam_yi) on CodePen. .img-protectの疑似要素を画像と同じ大きさにして、画像の上にかぶせるようにしています。 <div class="img-protect"> <img src="http://via.placeholder.com/160x120" class=

2018.05.16 Google Maps APIs Styling Wizard を使って カスタマイズしたマップを使う サイトでGoogle Mapを埋め込む時に、マップの色が浮いてしまったり、表示される項目が多すぎてわかりづらくなってしまう事もあると思います。 その際、マップの色や、表示される項目を調整できるのがGoogle Maps APIs Styling Wizardです。 Googleのツールなのですが日本語化されてないせいか、なかなか使い方が見つからなかったので、簡単な流れを共有したいと思います。 ベーシックな表示項目の調整をする まず、表示する予定地周辺の地図を表示し、デフォルトでの見え方をみてみます。 右上の検索エリアに入れればすぐに出てきます。 次に、左カラムで大まかな表示項目の調整をします。 Theme(テーマ) … 大まかな色のルールを選びます。 ※テーマによっ

2018.05.10 Google Analytics APIを使ってWordPressの記事をランキング表示させる方法 ブログ機能を使ってサイトの運営などをしているとGoogle Analytics（以下GAとする）でアクセス解析をする機会がよくあると思います。 そんな時、GAに集められたデータをサイトに表示したいと思ったことはないでしょうか？ 特に人気のある記事をランキング形式で表示したいなんて場面はよくありますよね。 WordPressを使用している場合であれば、「WordPress Popular Posts」といった便利なプラグインがあるので面倒な作業を省いてサクッと導入できたりします。ただ、便利で多機能なプラグインを使うとサイトが重くなってしまうといった懸念点も出てきます。そんな時に活用したいのが冒頭でも紹介したGAのデータです。幸いにもGAのAPIを利用することでアクセス情報

2016年のAdobe MAXで発表された“Adobe sensei”。 今年1月にアップデートされたPhotoshopCC19.1の中にも“Adobe sensei”の力を使った新機能があります。 そのなかのひとつ「被写体を選択」を試してみました。 目次 手順は３パターン 切り抜きの微調整をする方法 「被写体を選択」の精度はどのくらい？ まとめ 手順は３パターン 「被写体を選択」機能を使う手順は３パターンあります。 パターン1:メニューから選択 1.「メニュー」から「選択範囲メニュー」を選び、「被写体を選択」をクリック 2.Adobe Senseiが被写体を選択してくれます。 パターン2:ツールから選択 1.「自動選択ツール」を選択し、オプションバーの左側に表示される「被写体を選択」ボタンをクリック 2.Adobe Senseiが被写体を選択してくれます。 パターン3:「選択とマスク」の

マーケティングの「ファネル」という物をご存知でしょうか。 集客戦略を考える時に使う、基本の概念です。 ファネルはwebサービスやアプリケーションではありませんが、マーケティング施策を展開する上で必要不可欠と言えるマーケティングツールです。 これを知っておくとwebサイトでも実店舗でも、来訪者（来店者）を増やすべきなのか、コンバージョン率（購入率や申込み率）を増やすべきなのか、優先して取り組む課題が見つけやすくなります。 今回はなるべく簡単な例えで、ファネルについて説明します。 消費者が購入するまでの流れを表すファネル ファネル(funnel)とは英語で「漏斗（ろうと）」のことを指します。 口の細い瓶などに液体や粉末を入れるために使う、砂時計の上半分の形をしたあれです。 このファネルを上から順にエリア分けして使います。 そして各段階のエリアの中に、消費者（ユーザー）が入ります。 図をご覧いた

Bootstrapのようなグリッドシステムは便利ですが、コンテンツ内で使おうとすると困ってしまう場面があります。 例えばスマホでは1カラムでPCでは2カラムにしたい場合です。 PCの時は横並びになったカラムの間に余白（ガター）が入るので問題ないですが、 スマホの時に縦に並んだカラムの間に余白が入らないので要素が詰まってしまいます。 スタイルガイドを使った案件ではグリッドを使ってレイアウトを整えることも多いですが、レスポンシブで余白をコントロールしようとすると、既存のグリッドシステムだけでは足りないこともあります。 今回紹介するのは、上記の問題を解消したコンテンツ内でも使えるオリジナルのグリッドシステムです。 デモと実際のソースコードは以下のURLから確認できます。 st-Grids | Website Template _Grids.scss | Website Template マークア

サーバーの負荷状況を調査するため、cronでApache Benchを実行し定期的にcsvを出力していました。 このcsvが勝手にスプレッドシートに取り込まれてくれればなぁ、と思い Google Apps Script(以下GAS)を使って自動化してみました。 csvをGoogle ドライブへ直接出力→GASでcsvファイルの内容取得してする という流れをcronとGASのトリガーを使って定期的に実行する流れをご紹介いたします。 ■もくじ csvをGoogle ドライブのディレクトリに出力する Google スプレッドシートを作成 スクリプト エディタを起動 コードを書く トリガー設定 csvをGoogle ドライブのディレクトリに出力する 15分ごとにApache Benchを実行→ Googleドライブにcsv出力。 毎回同じファイル名で出力し、過去のファイルは上書きします。 cron