Single Page ApplicationにGoogle Analyticsを設定してみた | DevelopersIO
こんにちは。さかいです。 Google Analyticsのタグを設定する際に、HTMLのヘッダーにタグを仕込めばいいかなぁと思っていたのですが、Single Page Application(以下 SPA)かぁ。 あれっ！？最初にページを読み込んだ後ってページ遷移しなくない！？その時のページビューって、正しく計測できるの！？… などの疑問が生まれましたので、実際に設定してみようと思います。 やってみること Vue.jsで構築したSPAで、 ページビュー数 イベント(クリックイベント） を測定する。 事前準備 Google Analyticsで測定するには、トラッキングIDが必要ですので、Googleアカウントにて取得・設定しておいてください。 利用ライブラリについて ウェブサイトで測定するには、gtag.jsまたはanalytics.jsが利用できそうです。 また、Vue.jsからGoo
44種類のフォーマットに対応したPandocでMarkdownをHTML形式に変換する | DevelopersIO
今回紹介するMarkdownやHTMLは当然として、reStructuredText、Textile、LaTeX、何故かCSV，EPUB、docx（Word）や、pptx（PowerPoint）、Jupyter notebook、各種Wiki形式、PDFに対応しています。 魅力②「メタデータや独自フォーマットへの豊富な対応」 Pandocは、Markdownのシンタックス拡張や、ドキュメントメタデータ、テーブル、脚注、箇条書き、上付き文字、下付き文字、順序付きリストに対応しています。文書変換時に、このあたりのフォーマット情報がきちんと変換されるのは心強い。 魅力③「定期的なアップデート」 Pandoc - Releasesを見るとわかりますが、ほぼ3ヶ月に一度ほど定期的に更新されています。最新のリリースは2020年2月15日と非常にフレッシュ！ 自分実はPandoc自体は3年ぐらい前からそ
MongoDBのGUI CRUDツール：MongoDB Compassを使ってみた | DevelopersIO
こんにちは、菊池です。 MongoDBのデータを簡単に表示・操作できるGUIツール、MongoDB Compassを試してみましたので紹介します。 MongoDB Compass | MongoDB MongoDB Compass MongoDB Compassは、MongoDBのクライアントGUIツールで、視覚的にCRUD操作を実行することができます。 ダウンロードとインストール MongoDBの公式ページからバイナリをダウンロードすることができます。mac、Windows、RHEL、Ubuntuのバイナリが用意されています。 MongoDB Download Center バージョン、プラットフォームを選択し、ダウンロードを選びます。メールアドレスなどの入力を求められますので、必要事項を入力し、規約に同意するとインストーラがダウンロードできます。 インストーラを実行すれば、特に迷うとこ
インフラエンジニアが一切コードを書かずにWebサーバーに認証機能を実装した話 ｜ Developers.IO
コンニチハ、千葉です。 AWSのサービスを組み合わせれば、独自の認証基盤を構築できます。例えば、WordPressを限定的に公開する、Apache、 Nginx、カスタムWebアプリなどなど、簡単に認証をかけたい場合、ベーシック認証は昔から利用されてきました。ただし、これはスケーラビリティや運用面でどうしてもつらい場面がでてきます。 そこで、ALBに素敵すぎる組み込みの認証機能が追加されたのでこちらを利用し、コードを一切書かずに認証を導入します。また、OIDCなど認証プロトコルに対応していますが、今回はシンプルにCognitoのユーザープールを利用し、ユーザー管理自体もCognitoに任せます。 要件 今回の想定する要件です。 Nginxを社内ユーザーのみに公開 スタンドアローンのユーザープールを用意(AD、OICD、SAMLなどによる連携なしで、独自でユーザーを管理) ユーザーは管理者が
Google Cloud Vision APIを使ってみた | DevelopersIO
使い方 Google Cloud Vision APIを利用する場合、直接REST APIに問い合わせを行う方法と、Google Cloud SDKを通して問い合わせを行う方法の2つがあります。今回はPython用のSDKを用いて問い合わせを行っています。 問い合わせ用のスクリプトは、サンプルを改変したものを用いています。 注意点として、事前に認証情報をSDKに登録する必要があります。 import argparse import base64 import httplib2 from pprint import pprint from googleapiclient import discovery from oauth2client.client import GoogleCredentials DISCOVERY_URL='https://{api}.googleapis.com/$
よくわかる認証と認可 | DevelopersIO
よく訓練されたアップル信者、都元です。「認証 認可」でググると保育園の話が山程出て来ます。が、今日は保育園の話ではありません。そちらを期待した方はごめんなさい。こちらからお帰りください。 さて、先日のDevelopers.IO 2016において、マイクロWebアプリケーションというテーマでお話させて頂きました。一言で言うと OAuth 2.0 と OpenID Connect 1.0 のお話だったのですが、これらを理解するにあたっては「認証」と「認可」をはっきりと別のものとしてクッキリと認識する必要があります。 まず、ざっくりとした理解 認証と認可は密接に絡み合っている一方で全く別の概念です。正直、理解は簡単ではないと思います。 まず「認証」は英語では Authentication と言います。長いので略して AuthN と書いたりすることもあります。意味としては 通信の相手が誰（何）であ
【お手軽】iOS Safariで表示したWebサイトをMacOS SafariのWebインスペクタでデバッグする方法 | DevelopersIO
はじめに パフォーマンスチューニングをしていてモバイル通信回線を使った計測をしたい時にこの情報を見つけたので、実際に試した方法を残しておきたいと思います。 準備するもの iOS 6以上がインストールされたiPhone/iPod Safari 6がインストールされたMac MacとiPhone/iPadを繋ぐUSBケーブル 事前の設定 MacOS Safariの開発機能 すでにオンにしている方はこの作業を飛ばしてください。 まず、開発機能をオンにします。 Safariを開き、メニューから環境設定を開きます。詳細メニューの下にあるメニューに開発メニューを表示をオンにします。 メニューに開発と表示されていれば問題ありません。 iOS SafariのWebインスペクタ iOS SafariもWebインスペクタの機能をオンにします。 環境設定を開き、Safariの設定を開きます。 Safariの設定
HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) | DevelopersIO
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きます。 m(_ _)m Transforms 3D - 事始め 端的に言うならば、Transform 3D は要素を3次元に移動ならびに回転、拡大縮小できるというものです。更に後述するperspectiveを使うことで、要素に奥行きのある表現を持たせることが可能となります。 3DではX軸とY軸に加えて、Z軸が追加されます。Z軸はウィンドウからユーザーに向かう方向が正の値で、ユーザーからウィンドウに向
「深津貴之氏に学ぶ、スマホUI/UX講座 〜iOS7についての考察とfladdictデザイン論〜」に参加してきました。 | DevelopersIO
「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル
【pickadate.js】シンプルだけど高機能な日付カレンダー編 | DevelopersIO
pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。 アジェンダ ソースのダウンロード 実装してみる。 日本語表記にする いろいろなオプション まとめ ソースのダウンロード まずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。 [lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。 実装してみる それでは実際に表示してみようと思います。今回のデモで使用したファイルになります。 css default.css default.date.css javascript jquery picker.date.js legacy.js app.js←こちらが実際に実行するファイルです。 ind
iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法 | DevelopersIO
iOS6出た！ iOS6が出来ましたね。社内ではiPhone5を入手した社員がLTEの速度に驚いていました。私はまだiPhone4Sですが、iOS6にして新しい機能を楽しんでいるところです。さて、iOS6にしてSafariの仕様が変わって困ったと言った投稿が海外のフォーラムで挙っています。それも、基本的なPOST通信についてです。これは困ったということで、動作を確認して対策方法についてシェアしたいと思います。 どんな時にPOSTをキャッシュする？ まずはどんな状況か確認してみたいと思います。 Cache-ControlもExpiresも無い場合 ： iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control max-age=0指定 と Expires指定 ： iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control: no-
身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識 | DevelopersIO
こんにちは、ご無沙汰しています。 Web担当の野中です。 前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。 というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。 ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。 より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。 本題 さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。 初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。 画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。 未だにWebサイト高速化の具
Modern UI のようなフラットデザインを目指して使いづらくなっている件について | DevelopersIO
Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI *1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル（ボタン）とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。 一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x から刷新したデザインになりました *2。2013年4月現在の最新バージョンである4.2（Jelly Beans）もこの流れを踏んでいます。 両者ともそれまでの Web2.0 と呼ばれていた頃に流行ったグラデーションやドロップシャドウをふんだんに使ったデコラティブなデザインに対し、平面的で装飾要素の極めて少ないミニマルなデザインが特徴です。これらは主に Flat UI と呼ばれ、2012年頃から現在
D3.jsで始めるData-Drivenなページ作成 ｜ Developers.IO
D3.jsって？ AWSの事しかかけないと思われているかもしれないあけりです。 4月になって、気分一新クラスメソッドぽいことを少し。 今日はAWSとは関係の無いD3.jsです。 D3.jsとは名前から想像出来る通りjavascriptで使えるライブラリで、 データを色々な形に見やすく表示（よくあるグラフなんかもその一つ）するものです。 D3はData-Driven Documentsの略だと思われます。 データとDOMをうまいこと連携させて、表を作ったり、SVGのグラフを描画させたりすることができる、なんか格好良いライブラリです。 ライセンスはBSD Licenseと書いてありますが、リンクを辿ってみると宣伝条項のない修正BSD Licenseとなっているので、なんか色々楽そうです。 使い始め方 使い始め方は簡単で、ここからダウンロードしてくるか、 HTMLに直接 <script src=
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 ↑の絵が何かわかる人いますか？ マインクラフト(Minecraft)界隈でおなじみの愛されキャラ「匠」こと「クリーパー」さんです。 とっても長い前振りなので時間のない方は本題まですっ飛ばしてください。 マインクラフトとは わかりやすく解説されているニコニコ大百科を引用。 Minecraft（マインクラフト）とは、Notch（Markus Persson氏）と氏の会社であるMojangからリリースされた、サンドボックス型のものづくりゲームである。 レトロゲーを想起させるドットテイストの3Dブロックが溢れる世界で、建物やその他のものを自由に創造することが出来るゲーム。 家を作ったり、川を作ったり、山をつくったり、洞窟を作ったり、トロッコ坑道を作ったり、ゾンビを倒すためのトラップを作ったり、塔を作ったり、農場を作ったり、天空の城を
ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた | DevelopersIO
ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた GitLab とは GitLab は Git リポジトリを簡単に管理できるツール Gitolite をブラウザから管理できるようにする Ruby アプリケーションです。 GitHub のオープンソースクローンと呼ばれることから分かるように、UI が GitHub とめっちゃ似ています。 GitHub みたいなサービスを使いたい！だけど Public はアレだなということもあると思います。そんなときに便利です。 社内 GitHub として使うケースが主なユースケースだと思います。 しかもすべてローカルだけで作ることができるので、ローカルマシンにインストールすれば、構築後はネットワークなしで GitHub 的な環境を使うことができます！ そんな GitLab を Mac
Web Audio APIをつかった音声処理 | DevelopersIO
Web Audio APIとは？ 先日参加したGoogle Developers Day 2011で少し紹介されており、興味をもったのでちょっとさわってみました。 Web Audio APIとは、音声処理・合成のためのJavaScript APIです。 いままでWeb上でのオーディオはFlashやQuickTime等のプラグイン経由でしか使うことができませんでしたが、 HTML5でaudio要素が加わり、簡単にブラウザ上でオーディオを扱うことができるようになりました。 今回ご紹介するWeb Audio APIは、それよりも複雑な操作（ミキシング/プロセッシング/フィルタリングなど）を可能にしてくれます。 このAPIを使用すると、Webアプリやゲームにさまざまなサウンドエフェクトを追加することができます。 サンプル紹介ページ※1 には、このAPIを利用して作成されたドラムマシンやエフェクター
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
