お天気アプリで学ぶ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サービスが用意
CSV＆Photoshopのデータセット機能で画像を量産する方法 ｜ Tips Note by TAM
決まったフォーマットを元に、画像や文言を差し替えるといったファイルの量産は、とても面倒で時間がかかりますよね。 そんな時にはPhotoshopのデータセット機能を活用してみてください。 差し替え要素をまとめたCSVファイルとPhotoshopを紐付ければ、大量のデータを自動的に生成してくれます。 手順 フォーマットを用意 CSVファイルを作成 変数を定義 データをセット ファイルの書き出し フォーマットを用意 今回はECサイトのセール商品にそれぞれのOFF率を掲載してみる、という例でサンプルを用意してみました。 下記のフォーマットを元に、商品画像とOFF率を差し替えたファイルを量産していきたいと思います。 出力するファイル名を商品コードにしたいので、ここでは0のテキストレイヤーを用意し、非表示にしておきます。 CSVファイルを作成 1列目には項目名を、2列目以降に差し替え箇所に挿入する値を
対象ブラウザを見直してみる（2017年3月版） ｜ Tips Note by TAM
来月・2017年4月11日、「Windows Vista」の Microsoft による延長サポート終了とともに、IE9 の公式サポートも終わります。 公式サポートは IE11 のみに IE10 と IE8 はともに、2016年1月にサポートが終了していますので、IE9 のサポートが終わる 4月11日以降は、Microsoftが公式サポートする IE は IE11 のみになります。 サイト制作時の対象ブラウザとして、IEのバージョンは 9〜 にしていることも多いかと思いますが、以下のようなリスクがあるため、「IE11」に変更することをおすすめいたします。 「セキュリティ更新プログラム」が提供されなくなるため、脆弱性を突いた不正アクセス、情報漏えい、データ改ざんなどのリスクがある。 テクニカルサポートの提供を受けることができなくなる。 ［参照］ 2017 年にサポートが終了する製品 - Mi
Pug(Jade)で効率的なマークアップ環境を作る ｜ Tips Note by TAM
HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じるようになりました。 今回はPugのテンプレートを作ったので、その使い方を紹介します。 今回はPugの記法については細かく説明できませんので、詳しい仕様は公式サイトを確認してください。 Getting Started – Pug テンプレートエンジンとPugについて テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ（文字列やタグなど）を渡すことで、無駄なくHTMLを作成していく仕組みのことです。CSSにおけるSassのようなものと考えてもいいと思います。 今回使用するテンプレートエンジンのPugには以下のような特徴があります。 閉じタグ（
開発環境でも使えるメタ情報チェックツール「Simple Meta Checker」を作りました ｜ Tips Note by TAM
サイトのメタ情報のチェックに悩んでいる制作者やディレクターの皆さん、こんにちは。 HTMLのタイトルやメタ情報、h1など、とても大事なんですが確認するのめんどくさいですよね？ 僕はめんどくさいです。ページ数が多かったら、それはもう大変です。 こういった情報を確認するためのツールは、探せば色々と公開されているのですが、 開発環境（IP制限やベーシック認証がかかっている領域）で使えない 今見ているページしかチェックできない 1度にチェックできる数に制限がある などの条件があるものが多く、僕としては「サイト公開前に一括で確認したい！」といったような状況が多いのですが、合うものが見つかりませんでした。 そういうわけで、自分でツールを作ってみたので、会社のブログを利用して紹介させてくださいｗ デモサイトをGitHub Pagesで作ってますので試してみてください。 https://kandai.gi
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
Babel と watchify で ES2016 のビルド環境を作る ｜ Tips Note by TAM
JavaScript の新仕様である、ECMAScript 2016 (以下ES2016) がリリースされました。 ES2015 はもう普通にバリバリ使ってるよという方も多いと思いますが、まだ手を出していない、って人も結構いらっしゃるかと思います。ES2015 などを使ってコードを書きはじめるにあたり、まずはビルド環境を用意するのが最初のハードルかなと思いますので、今回は Babel と browserify, watchify などを使ったビルド方法を紹介します。 ※ なお、今回のサンプルコードは GitHub のこちらにも置いています https://github.com/tam-matsuo/gulp-watchify-es2016 ES2015, ES2016 とは ES2015 は名前のとおり 2015年6月に公開された、JavaScript の言語仕様です。ES5 の次バージョ
YouTube Player APIを使う時のtips集 ｜ Tips Note by TAM
以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。 以前の記事はこちらです。 YouTube Player APIを使って色々やってみる ■目次 動画のループ再生 動画の自動再生 タイトルやコントロールバーを出さないようにする 動画再生の開始位置や終了位置を設定する 動画の画質を変更する 初期表示をサムネイルにする 背景動画にする 1. 動画のループ再生 動画のループ再生を設定する方法は2種類あります。 1-1. パラメータで設定する パラメータで設定する場合、loopとplaylistを使用します。 ■HTML <div id="sample"></div> ■JavaScript // IFrame Player API の読み込み var tag = document.createElement
PhantomJS と CasperJS で複数ページを一括キャプチャする ｜ Tips Note by TAM
Web 制作をしているとページの表示確認やコンポーネントの洗い出しなどで、大量にキャプチャを撮ってきたい時があります。 しかしブラウザのエクステンションで1枚ずつ撮るのも面倒です。 そこで PhantomJS と CasperJS を使うとキャプチャを自動化することができるということなので、先達たちの情報を参考に、キャプチャしたいURLと想定するデバイスを CSV で管理して、楽にキャプチャがとれるものを作成しました。 PhantomJS と CasperJS とは PhantomJS ですが、グラフィカルな画面のないブラウザで「ヘッドレスブラウザ」と呼ばれるブラウザです。コマンドラインからブラウザの機能を使うことができ、フォームの操作やページの要素を取得することができます。よく CI ツールと組み合わせて自動テストを行ったり Web スクレイピングで使われたりします。 PhantomJS
【Movable Type】Movable Typeのセキュリティ対策 ｜ Tips Note by TAM
運用中のMovable Typeのサイトに対してやれる、 セキュリティ対策を集めてみました。 Movable Typeを安全に使うには、何より「最新版を使う」ということが一番大切です。 でも既に運用稼働中の案件では、プラグインの対応状況やサーバのスペック、またアップデートにかかる コストなどの問題で、そうそう簡単には最新バージョンに切り替えられないことが多いです。 そんなときに、「とりあえず」「比較的簡単に」できる対処方法を集めてみました。 ■管理画面にアクセス制限をかける ベーシック認証やIP制限をかけます。最も簡単で、すぐできる方法です。 合わせて管理画面をSSLにするとなおよいのですが、SSLが無理な場合は、 定期的にベーシック認証やMTサインインのIDPWを変えるなどの 運用ルールを作ると良いと思います。 ※検索機能や動的パブリッシングを利用している場合は mt.cgiファイルのみ
Googleマップに、GPSを使って現在位置(と誤差を表す円)を表示するサンプル ｜ Tips Note by TAM
2014.01.24 Googleマップに、GPSを使って現在位置(と誤差を表す円)を表示するサンプル タイトルのとおりですが、Google マップ上に GPSなどを使って現在位置(と誤差の範囲を表す円)を表示するサンプルを作ってみました。 HTML5関連の geolocation API というものを使えば、JavaScript から現在位置情報は簡単に取得できます。値はそのまま Google Maps API に渡せますので、連携自体はとても単純です。 ちなみに、位置情報はGPS搭載のスマートフォンでないとダメというわけではなく、PCのブラウザなどからでも取得可能ですよ（環境による精度の差はありますが）。 (ブラウザから、位置情報を取得してよいかの確認が行われます) どうでしょうか、おおよその現在位置と、誤差を表す半透明の青い円が表示されていますでしょうか？ 概要 全体のコードはあとで
Facebook Basic認証と「いいね」のＯＧＰを有効にする方法 ｜ Tips Note by TAM
FacebookのOGPが確認できず下記のエラーに遭遇しました。 Missing Required Property: The og:url property is required, but not present. など。 Basic認証をかけているディレクトリのＯＧＰを取得する時に発生します。 デバッガーを使うと ＯＧＰがリセットされFacebook のクローラが OGP を読み込んでいます。 その時にBasic認証が通過できずで出ているエラーのようです。 .htaccessに下記を追加します。 AuthUserFile /home/tam/public_html/.htpasswd AuthType Basic AuthName "Web access" Require valid-user Satisfy Any Order Allow,Deny # FBクロ
ベンダープレフィックスを調整してくれるgrunt-autoprefixer ｜ Tips Note by TAM
どうもこんにちは。中川です。 冬ですね。寒いですね。まもなく今年も終わりですが楽しい1年だったでしょうか。 そんな前置きはさておき、今回はgrunt-autoprefixerを紹介したいと思います。 ※今回はgruntが使える状態を前提として書いています。 autoprefixer Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use. Write your CSS rules without vendor prefixes (in fact, forget about them entirely): Can I useを見て、書いたcssのベンダープレフィックスを追加したり、外したりしてくれる便利なもの。 実際、ベンダープレフィックスが必要なのかそうでないのか、なかなか分からないもので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
