お天気アプリで学ぶVue.jsのAPI連携 ｜ Tips Note by TAM
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サービスが用意
Adobe Senseiに手伝ってもらってカンタンに写真を切り抜いてみた ｜ Tips Note by TAM
2016年のAdobe MAXで発表された“Adobe sensei”。 今年1月にアップデートされたPhotoshopCC19.1の中にも“Adobe sensei”の力を使った新機能があります。 そのなかのひとつ「被写体を選択」を試してみました。 目次 手順は３パターン 切り抜きの微調整をする方法 「被写体を選択」の精度はどのくらい？ まとめ 手順は３パターン 「被写体を選択」機能を使う手順は３パターンあります。 パターン1:メニューから選択 1.「メニュー」から「選択範囲メニュー」を選び、「被写体を選択」をクリック 2.Adobe Senseiが被写体を選択してくれます。 パターン2:ツールから選択 1.「自動選択ツール」を選択し、オプションバーの左側に表示される「被写体を選択」ボタンをクリック 2.Adobe Senseiが被写体を選択してくれます。 パターン3:「選択とマスク」の
Google Maps APIを使って、サイト上に地図を表示するまでの流れ ｜ Tips Note by TAM
Google Maps APIを使用する場合、2016年6月22日よりAPIキーが必須になりました。 参考:標準プランのアップデート | Google Maps API の価格とプラン | Google Developers 今回はAPIキーを取得して、サイト上に地図を表示するまでの流れを試してみます。 今回使用するのは、以下のJavaScript APIになります。 Google Maps JavaScript API | Google Developers APIキーの取得 APIキーの取得にはGoogleアカウントが必要になりますので、事前に用意しておいてください。 Googleアカウントにログイン後、こちらのページにアクセスして、右上の「キーの取得」をクリックします。 「Select or create project」をクリックして、「Create a new project」を
縦の余白を考慮したレスポンシブなグリッドシステム ｜ Tips Note by TAM
Bootstrapのようなグリッドシステムは便利ですが、コンテンツ内で使おうとすると困ってしまう場面があります。 例えばスマホでは1カラムでPCでは2カラムにしたい場合です。 PCの時は横並びになったカラムの間に余白（ガター）が入るので問題ないですが、 スマホの時に縦に並んだカラムの間に余白が入らないので要素が詰まってしまいます。 スタイルガイドを使った案件ではグリッドを使ってレイアウトを整えることも多いですが、レスポンシブで余白をコントロールしようとすると、既存のグリッドシステムだけでは足りないこともあります。 今回紹介するのは、上記の問題を解消したコンテンツ内でも使えるオリジナルのグリッドシステムです。 デモと実際のソースコードは以下のURLから確認できます。 st-Grids | Website Template _Grids.scss | Website Template マークア
Adobeフォントライブラリ「Typekit」を使用してみる ｜ Tips Note by TAM
デザイナーとしてこだわりたいものといえば「フォント」ですが、有料フォントはどれもお高めですよね。 そこで今回はAdobeが提供するCreative CloudのWebフォントサービス、「Typekit」をご紹介いたします。 Typekitを利用すれば、高品質なフォントライブラリの中から、数多くのフォントを無料で使用できます。 目次 Typekitとは？ Typekitのフォントを追加する Webフォントの使い方 フォントのライセンスについて まとめ Typekitとは？ Adobe Creative Cloudユーザーが利用できるサービスの一つです。 Webフォントとしてはもちろん、PC上のデスクトップフォントとしても使用可能です。 （Photoshopやllustratorはもちろん、Microsoft OfficeなどAdobe以外のソフトにも対応しています。） ほとんどのCreati
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
画面中央に表示するモーダルウィンドウを実装したい ｜ Tips Note by TAM
画面中央に表示するモーダルウィンドウをjQueryで実装してみました。 ■HTML <div id="modal-main">モーダルウィンドウ</div> <!-- #contents START --> <div id="contents"> <p><a id="modal-open">【クリックでモーダルウィンドウを開きます。】</a></p> <p class="page-txt">ここからページ本文<br> <br> ↓↓↓ スクロールしてください ↓↓↓</p> </div> <!--/#contents--> ■CSS #contents { z-index: 0; font-size: 16px; } .page-txt { margin: 30px 0 0; height: 2000px; } #modal-open { color: #cc0000; } /* モーダル
GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた ｜ Tips Note by TAM
2016.10.21 GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた Github Pages とは GitHub Pages とは、GitHub による、静的サイトのホスティングサービスになります。GitHub のアカウントがあればすぐに静的サイトが公開できますので、非常にお手軽です。 2016年8月にアップデートされ、今までよりもさらに簡単に使えるようになりましたので、利用方法をまとめておきます。 特徴 静的サイト (HTML や CSS, 画像など) を公開できます。JavaScript も動作します。 URLは https://ユーザまたは組織名.github.io/リポジトリ名 となります。(Project Pagesの場合) 独自ドメインを割り当てることも可能です。(別途簡単な設定が必要) 無料です。 なお、サイトの容量や転送量などには制限があ
EditorConfig でチームみんなのエディタの設定を揃える ｜ Tips Note by TAM
みなさん、インデントはタブ派ですかスペース派ですか。 インデントは 2つですか 4つですか。 一人でコードを書いている分には好みの書き方でいいかと思いますが、チーム作業する場合には、ここを揃えておかないとエラいことになりますね。タブとスペースと混じったコードは見てて気持ち悪いですし、git のコミットログもめちゃくちゃになる。ストレスたまる。 なので何らかの規約に則って、各自がしっかりエディタの設定をすればよい！！！……とはいえ、この手間を楽にできたりはしないもんか。 たとえばプロジェクトごとに事情があり、この案件はタブであの案件ではスペース、という場合は？ いちいち設定切り替える……？ 設定忘れでコード崩れるとかつまらないので、できれば未然に防ぎたい。 ということで EditorConfig の出番となります。 EditorConfig とは？ http://editorconfig.o
覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方 ｜ Tips Note by TAM
以前Pug(Jade)を使った制作環境を作る方法を紹介しました。 Pug(Jade)で効率的なマークアップ環境を作る 今回はPugでマークアップをしていくときに、よく使う書き方を紹介します。 ベースになるルールは9個あります。 タグ名はHTMLタグになる 改行をしてインデントをつければ入れ子になる インライン要素や改行にはパイプライン（|）を使う（ここだけ慣れが必要） HTMLはドット（.）で終わる要素の中に入れておけば解釈される 属性は丸括弧内に記述する クラス属性はドット（.）、ID属性はシャープ（#）で表す コメントにはHTMLとして出力されるものと、されないものがある イコール（=）を使えばエスケープできる インクルード（include [ファイル名へのパス]）で共通化したファイルを挿入できる Pugとはなにか？ Sassを使ってCSSを作成している人は多いと思いますが、PugはH
Pug(Jade)で効率的なマークアップ環境を作る ｜ Tips Note by TAM
HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じるようになりました。 今回はPugのテンプレートを作ったので、その使い方を紹介します。 今回はPugの記法については細かく説明できませんので、詳しい仕様は公式サイトを確認してください。 Getting Started – Pug テンプレートエンジンとPugについて テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ（文字列やタグなど）を渡すことで、無駄なくHTMLを作成していく仕組みのことです。CSSにおけるSassのようなものと考えてもいいと思います。 今回使用するテンプレートエンジンのPugには以下のような特徴があります。 閉じタグ（
cssのskewを使ってぷるぷるアニメーション ｜ Tips Note by TAM
突然ですが、transformプロパティのskew使っていますか？ skewを使えばX軸、Y軸へのゆがみを表現できるのでちょっとした動きを作る際にとても便利です。 今回はそんなskewを使って、化粧品のクリームがぷるぷる揺れるデモを作っていきたいと思います！ 完成デモを見る 素材を用意してHTMLに配置する 下記の写真を利用して、青色にしている真ん中のクリーム部分だけを動かしていきましょう。 用意した素材は、下記の3枚で、重なり合うようにHTMLに配置していきます。 ）一番下にオリジナル写真。 ）二番目に動かしたい箇所だけを切り抜いた「クリーム」画像。 ）一番上にクリーム部分を切り抜いたマスク画像。 ※二番目のクリーム画像を動かした際に、不自然な隙間ができてしまうことがあるので 念の為背景にオリジナル写真を配置しています。 skewについて skewを使えばX・Y軸の傾斜角度をそれぞれ個別
SVGのキャラクターを parallax.js で動かしてみる ｜ Tips Note by TAM
先日弊社TAMサイトをリニューアルしましたが、ご覧いただけましたでしょうか？ サイトリニューアルにあたり404ページでTAMくんの顔をマウスの動きに合わせて動かすというものを作ったので、今回はそれを紹介したいと思います。 デモを見る Parallax.js 使用したのはjQueryプラグインでもある「parallax.js」。 パララックスというと少し古い感じもしますが、これはカーソルを動かす（スマホだと傾ける）ことで要素に奥行き感を出すことができるので、ちょっとしたアクセントとして使うのもオススメです。 公式サイト http://matthew.wagerfield.com/parallax/ github https://github.com/wagerfield/parallax/ 実装 キャラクターをSVGで用意し、ソースを見て動かしたいパーツの位置（今回は目、鼻、口）を確認します
Sassの使い方 – 誰にとっても使いやすいCSSにするための工夫 ｜ Tips Note by TAM
CSS Niteで発表されたコーダー白書2016（19ページを参照）によると、業務でHTMLコーディングをしている人のうち、約70%がSassを日常的に使っているそうです。 CSSプリプロセッサーにはStylusやLESS、もしくはPostCSSのようなツールを使う場合もありますが、上記のアンケートの結果や色々なCSSフレームワークを見ていると、Sassがデファクトスタンダートであることは間違いないようです（Sassは基本的に.scssの記法を想定しています）。 Sassは多機能、でもすべてを使わないといけないわけではない Sassで書かれたコードを見ていると、読みにくいコードや複雑になりすぎているコードをよく見かけます。 SassはCSSにプログラミングの機能を持ち込んでいるので、できることは増えましたが、使い方次第で「書いた人が書いたときにだけ分かるコード」になってしまいがちです。 C
Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？ ｜ Tips Note by TAM
2016.09.26 Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？ 案件で起きたことの覚書です。 案件でのテキスト周りのルールは、 テキストは明朝体で表示する テキストはシステムフォントで表示する（＝Webフォントは使わなくてよい） ボタン等は指示がない限りテキストで表示する だったので、font-familyを以下のように指定していました。 font-family: Century, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; システムフォントで表示するので、Windows8.1、Windows10、Macでは、游明朝が表示されることになります。 流し込みのテキストだとまったく気になりませんが、CSSで作
marginの相殺の考察 ｜ Tips Note by TAM
ニマタです。こんにちは。 cssのプロパティ、margin。 要素間に余白をもたせるときとかに使うあれです。 マークアップエンジニアの方はもれなくご存知だと思います。当たり前のように使っていると思います。 しかし、「marginの相殺」についてもしっかり理解していますか？ しっかりと理解せず使っている方、この記事で今一度しっかり確認しましょう！ しっかりと理解して使っている方、この記事は大丈夫なので関連記事をどうぞ！！！ marginの相殺とは そもそもmarginの相殺とはなんぞやと。困ったら調べる。Hey Siri!! https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ブロックの top と bottom のマージンは結合される（折り畳まれる (collapse
Sassの変数とmixinで変更に強いメディアクエリをつくる ｜ Tips Note by TAM
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
【JSいらず】CSS3 のFlexbox を使った、イマドキの上下中央配置レイアウト ｜ Tips Note by TAM
2016.07.13 【JSいらず】CSS3 のFlexbox を使った、イマドキの上下中央配置レイアウト Flexboxは実戦投入していますか？ この便利なボックスレイアウトを使えば散々制作者の頭を悩ませた横並びレイアウトが簡単に出来ます。 プロパティが多くて「アレをするにはどうするんだったっけ・・・？」となることも多々ありますが・・・。 See the Pen Basic Flexbox by Chiaki (@mellowchanter) on CodePen. 基本的には、上のソースコードのように display:flex; を指定すれば、子要素がキレイに横並びになります。 子要素の幅を変えたいときは、子要素に flex-basis: サイズ; を指定しましょう。 もっと詳しくFlexboxの使い方を知りたい方は、下記のURLを参考にしてみてください。 フレックスボックスでカラムレ
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
CSSだけで画像トリミングできたよ ｜ Tips Note by TAM
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。 CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。 やり方 HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。 例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。 CSSのトリミングは、パターンによ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
