【 Ionic 入門】 Ionicで開発を進める際に知っておかないといけないこと

記事修正日

記事投稿日

Ionicは英語のドキュメントがしっかりしている上にコミュニティもある程度大きいので、英語さえ読めればわからないことがあっても大抵解決します。ただ日本語の記事となると、情報が古かったりほんのさわりだけしかやってなくて本格的に使う際に知りたいことなんかはあまりない印象があります。ということでこの記事ではIonicで開発を進める際に知っておかないといけないことを順不同でまとめていきます。情報は随時更新していく予定です。... 続きを読む

【 Ionic + @ngrx 入門】 Ionic + @ngrx/store でカウンターアプリを作ってみる

記事修正日

記事投稿日

AngularのReactiveライブラリである@ngrxに手を出したので、まずはIonic + @ngrx/storeでカウンターアプリを作ってみました。ある程度Fluxアーキテクチャ周りの知識が必要になります。@ngrx/storeのバージョンは4.0.0です。... 続きを読む

Ionic 2 & Ionic 3のプロジェクトをElectronアプリとしてビルドする

記事修正日

記事投稿日

モバイルアプリをHTML/CSS/JavaScriptといったフロントエンドの技術で制作できるIonicですが、Ionic 2.2からSplit Paneが実装されたことで、モバイルアプリだけではなくデスクトップをサポートするウェブアプリを制作するための環境が揃ってきました。Ionicではモバイルアプリかウェブアプリのビルドしかできませんが、Electronを使えばデスクトップアプリのビルドもできます。つまり、共通のソースコードで Android iOS Windows Phone macOS Windows Linux という主要なプラットフォームをすべてカバーするアプリを制作することができるようになります。ということでここではIonicプロジェクトをElectronでビルドする手順を紹介します。 ... 続きを読む

Ionic 2.x.xからIonic 3.0.xへ移行する方法とIonic 3.0.0での変更点のまとめ

記事修正日

記事投稿日

2017年4月7日にIonic 3.0のリリースがブログでアナウンスされました。Angular 4.0.0に正式に対応したり、Ionic Pageデコレータが追加されたりしています。ということでここではIonic 3.0での変更点と2.xからの移行方法をまとめました。... 続きを読む

amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門

記事修正日

記事投稿日

去年2015年10月のAMP発表当時はGoogle Analyticsでのトラッキングのためにamp-pixelを使う必要がありましたが、amp-analyticsコンポーネントの導入によって簡単にトラッキングコードを作成することができるようになりました。2016年10月にはGoogle Tag ManagerでもAMPがサポートされるようになり、ますますAMPの環境が整ってきたという印象です。ということでここではGoogle Analyticsの基本からamp-analyticsの説明、ページビューのトラッキング、クリックイベントのトラッキング、スクロール量の計測を行うためのコードを紹介します。... 続きを読む

Facebookの投稿Feedを取得してAMP HTMLのamp-facebookで表示させる手順のまとめ

記事修正日

記事投稿日

APIがコロコロ変わって何かと面倒で有名なFacebookですが、投稿フィードを取得してAMP HTMLのamp-facebookを使ってページに埋めこむWordPressのプラグインを作成したので、その際に必要となった手順をまとめました。APIのバージョンは2016年10月現在最新のv2.8です。... 続きを読む

AMP Projectが広告表示を高速化させたAMP4ADSの準備を進めている件

記事修正日

記事投稿日

WordPressでプラグインを入れたりしてAMP対応している方はご存知だと思いますが、Search Consoleの「検索での見え方」→「Accelerated Mobile Pages」でAMPで作ったページのエラーを確認することができます。ここでエラーのあるページがあると「検証ツールを実行」というボタンからAMP検証ツールへ飛ぶことができます。先日これを見ると、HTML Formatのところに『AMP』と『AMP4ADS』というのが選択できるようになっていました。これはなんだ?と思ってググってみると、どうやらAMPのサブセットとしてAMP4ADSというのが準備されているようなので、今更ですがその概要をまとめて見ました。... 続きを読む

CSSの背景画像でSVG要素を使う場合にIEにも対応させる書き方

記事修正日

記事投稿日

AMP HTMLを使っているとamp-carouselの左右のボタンなんかがそうなんですが、background-imageにSVGのコードをベタッと貼り付ける場面があったりします。そのときにIEの対応まで考えるとdata URI自体をパーセントエンコードする必要が出てきます。ということでIEにも対応した、背景画像にdata URIスキームを使う際の注意点を書きました。... 続きを読む