お天気アプリで学ぶ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サービスが用意
jQuery.extend() メソッドの使い方まとめ ｜ Tips Note by TAM
知っている人には当たり前のことかもしれませんが、使い方をまとめておきます。 jQuery.extend() は、基本的には複数のオブジェクトをマージして返してくれるメソッドです。 (プラグインのソースで、デフォルトの設定値を上書きする時などによく見かけますね） jQuery.extend(target[, object1][, objectN]) こんな感じで使います。 オブジェクト a の内容と b の内容をマージしたいとき、 var a = { id: 1, name: 'TAM' }; var b = { name: 'TAM-new', hobby: 'football' }; $.extend(a, b); console.log(a); // 結果: // { // id: 1, // name: "TAM-new", // hobby: "football" // } $.e
SassとPostCSSを組み合わせて作るCSS開発環境 ｜ Tips Note by TAM
突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
Heroku のエラーページをカスタマイズする ｜ Tips Note by TAM
Heroku Advent Calendar 2017 の 12日目です。 Heroku, 便利ですよね。サーバ周りのあれこれについて最小限のことだけを考えればよく、アプリケーション開発に集中できるので、特に専属のインフラエンジニアをアサインできないような状況では大変ありがたいです。 さて、小ネタではありますが、Heroku のエラーページのカスタマイズ方法について。 Heroku のアプリケーションエラーページをカスタマイズ Heroku のアプリケーションエラー発生時に表示されるページは、デフォルトではこんな画面。 たとえば Heroku の仕様上、リクエストが30秒経過してタイムアウトとなった場合などでこれが表示されます。dyno数 が 0 のときなんかもこのエラーです。 この表示をカスタマイズする方法ですが 独自のエラーページを作成して それを「Heroku外の領域」に設置 環境変
Laravel Mix なら設定3行だけで webpack/Sass/JS のビルド環境ができました ｜ Tips Note by TAM
2017.09.11 Laravel Mix なら設定3行だけで webpack/Sass/JS のビルド環境ができました Laravel Mix って？ Laravel Mix は PHPのフレームワーク Laravel に同梱されているビルドツールです。webpack をベースに作られていて、設定の記述量が少なく済むのが特徴。また、Laravel を使わないプロジェクトでも、Laravel Mix 単体でインストールして使うことができます。(Laravel 5.3までは Elixir という名前でした) ということで、Laravel Mix 単体を使ったビルドをやってみます。内容としてはフロントエンドのみの案件を想定し、 JavaScript (ES6) のビルド SCSSのビルド Uglify SourceMap出力 Watch Browsersync によるライブリロード これくら
D3.jsで日本地図を作成しデータを反映するサンプル（コロプレス地図） ｜ Tips Note by TAM
前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。 今回はD3.jsを使用してブラウザ上に日本地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ（平成25年産 主要果樹都道府県別出荷量） まずは必要なデータを準備します。 [準備1] 地図データの取得（日本地図の座標データ / JSONファイル） 日本地図は座標データを元にSVGの要素を使用してパスを作成します。 ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。 フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、 これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ
ベンダープレフィックスを調整してくれる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のベンダープレフィックスを追加したり、外したりしてくれる便利なもの。 実際、ベンダープレフィックスが必要なのかそうでないのか、なかなか分からないもので
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; 今回は変数は変数でも、マップ型
Laravel開発環境をLaradockで構築する ｜ Tips Note by TAM
Laravelには公式でHomesteadという開発環境が提供されていますが、 Dockerで開発環境を構築したので、手順をご紹介します。 Dockerに加えて、今回はLaradockを使用します。 Laradockは、DockerImageを作成するためのDockerfileや、定義ファイルを多数提供しています。 WebサーバやDBを必要に合わせて選ぶことが可能です。 用意されているDockerfileはGithubリポジトリを参照してください。 https://github.com/laradock/laradock [補足] Dockerとは、Linuxのコンテナ仮想技術を使用したアプリケーション実行環境のプラットフォームです。 https://www.docker.com/ 実施環境 今回、開発環境を構築したのは以下の環境です。 OS X 10.11.6 Docker for Ma
開発環境でも使えるメタ情報チェックツール「Simple Meta Checker」を作りました ｜ Tips Note by TAM
サイトのメタ情報のチェックに悩んでいる制作者やディレクターの皆さん、こんにちは。 HTMLのタイトルやメタ情報、h1など、とても大事なんですが確認するのめんどくさいですよね？ 僕はめんどくさいです。ページ数が多かったら、それはもう大変です。 こういった情報を確認するためのツールは、探せば色々と公開されているのですが、 開発環境（IP制限やベーシック認証がかかっている領域）で使えない 今見ているページしかチェックできない 1度にチェックできる数に制限がある などの条件があるものが多く、僕としては「サイト公開前に一括で確認したい！」といったような状況が多いのですが、合うものが見つかりませんでした。 そういうわけで、自分でツールを作ってみたので、会社のブログを利用して紹介させてくださいｗ デモサイトをGitHub Pagesで作ってますので試してみてください。 https://kandai.gi
HerokuのGitHub連携を使ってPipelineとReview Appsでスムーズな開発環境を作る ｜ Tips Note by TAM
GitHubにプルリクエストを出すと自動的にHeroku側にアプリが立ち上がる機能です。 マージ前にブラウザ上から変更点を確認することが出来ます。 Staging (Heroku) GitHubのmasterリポジトリにPushされると、HerokuのStagingアプリに自動的にdeployされるようにします。 これにより、直接HerokuにはPush、deployする必要がなくなり、安全です。 Production (Heroku) 本番へは、HerokuのPipelineを利用し、ブラウザ上からPromoteボタンをクリックする事でリリースすることが出来ます。 Stagingの環境がそのまま本番へ反映されるため、反映漏れなどが起こることはありません。先祖返りなども心配いりません。 また、エンジニアでなくても、ディレクター側で最終的なリリースが可能です。 構築 Heroku側でアプリの
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 の次バージョ
PHPでGoogle Analytics APIを利用して、アクセス解析のデータをSlackに投げる(前編) ｜ Tips Note by TAM
2016.04.04 PHPでGoogle Analytics APIを利用して、アクセス解析のデータをSlackに投げる(前編) こんにちは、今回はみんな大好きGoogle AnalyticsとSlackの話です。 TAMでは、チャットツールでSlackを使用しているのですが、Google Analyticsで取得したアクセス解析のデータを定期的にSlackに投げるような仕組みを作れば、サイトやサービスの運営に役に立つと思いつくってみました！ 記事が長くなってしまったので GAのAPIを使用してアクセス解析の結果を取得する 取得した値をSlackに投稿する の前後編に分けてお送りします。 後編は1週間後くらいに公開予定です！ 公開しました！後編はこちら！ Google Analytics APIって？ まずは、APIを利用して何が出来るのかというところですが、Google Analyti
いますぐ出来る！HerokuのセットアップからPHP環境の作成まで ｜ Tips Note by TAM
Paasの一つであるHerokuにて、PHP環境を構築するまでを紹介します。 ちなみに、macでの作業を想定しています。 Herokuとは いわゆるPaaSと呼ばれるプラットフォームの一種。 サーバー周りの難しい設定をほとんど考えずに環境を構築でき、豊富なアドオンと組み合わせることでアプリケーションの構築が簡単に行える、というものです。 Heroku - Wikipedia ユーザー登録 Herokuにアクセスし、ユーザー登録します。 Heroku | Cloud Application Platform Sign Up For Freeをクリックし、必要事項を入力し、Create Free Accountをクリック。 途中、Pick your development language:は、PHPを選択しておきます。 (他の言語を選んでも特に変わらない気がしますが……） 少しするとメールが
Underscore.jsの使い方 ｜ Tips Note by TAM
今回は、javascriptのライブラリ「Underscore.js」の使い方をご紹介します。 ■ 公式 Underscore.js(http://underscorejs.org/) ■ 日本語訳 enja-oss/Underscore ・ GitHub Underscore.jsとは Underscore.jsは、主にjavascriptの関数や配列、オブジェクトを扱う際に頻繁に発生する処理が、 100種類程度のメソッドとしてまとめられている軽量なライブラリです。 （投稿時の最新バージョンは1.5.2。圧縮版のサイズは4.9kb） リリースからは既に数年が経過しており、 JavaScriptのフレームワークであるBackborn.jsで依存ファイルとして使用されていたり、 Backborn.jsとともにVersion 3.5以上のWordPressに同梱されていたりするようですので、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
