2016年1月27日水曜日

GoogleのAMP（Accelerated Mobile Pages）ってすごいの？

  
AMP（Accelerated Mobile Pages）とは・・・


Z-MENです。
どうも。

昨年夏頃？からモバイルやSEO界隈でAMPの話題がすごく盛り上がっていて、
モバイル担当としてもやはり気になるところなので一度情報を整理してみたいと思います。

自分の勉強がてらではありますが、どなたかの参考になれば幸いです。
AMPとは、からAMPの実装・確認までまとめてみます。

AMP（Accelerated Mobile Pages）とは？

AMPはAccelerated Mobile Pagesの略称です。
GoogleとTwitterが共同で立ち上げたAMPプロジェクトのオープンソースらしいです。
簡単に言うとAMPに対応した記事コンテンツをGoogle側が勝手に読み取り、キャッシュして、
超高速に優先表示してくれます。モバイルの場合のみ出てくるようですが、カルーセル形式でずらっと並べてくれます。

去年末くらいからモバイルで検索した際に、一部記事がカルーセルで表示されるようになりましたが、あんな感じのイメージで、表示が超高速になる、という感じです。

【g.co/ampdemo】でAMPをデモ体験

Googleさん、ちゃんとデモも用意してくれていて、Googleの検索窓に『gco/ampdemo』といれると
AMPのデモ表示モードに切り替わります。ほんと爆速です。


 AMPの実装について

AMPの実装方法を見てみましょう。
GitHubにもあるんですが、全部英語でオエッとなるかたは参考になれば。

AMPは専用のjsライブラリとbilerplate（いけてるテンプレみたいの）で動くとのこと。
超シンプルに書くとこんな感じになりますと。 

  
    Hello, AMPs
    
    
    
    
    
  
  
    

Welcome to the mobile web


　

マークアップ上の注意点としては、

    • <html>タグを<html amp>と書く？
    • <head> 内に<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>をいれる
    • <head>閉じ直前にを<script async src="https://cdn.ampproject.org/v0.js"></script>をいれる
    • 画像を入れるときはこんな感じ<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
    とかとか、基本はこんな感じなのですが、普通にHTMLでページ作ればOKというわけでもなさそうです。
    公式のGetStartにいくつか注意事項があるので貼っておきます。
    AMPプロジェクト公式
    AMP GitHub

    日本語版の導入ガイドも発表されたようです。
    AMP日本語版導入ガイド

     AMPの条件・制約 

    AMPには、爆速を得られる代わりにいくつか制約があります。
    この制約がやや影響が大きく、導入できない方も多いかもしれません。

    1. AMPのランタイムはAMPのCDNから固定のURLで配信
    2. Javascriptが使えない（JSON-LDのみ）
    3. 画像・動画は大きさの固定指定が必要
    4. 広告はiframe経由で表示
    5. フォーマットを遵守
    6.  link要素はrel：canonical以外禁止
    7. ほかimgとかformとかinputタグも使えないかも
    とのこと。これ特に②がでかい、トラッキングができない・・・。
    『AMP実装したから効果が楽しみだぜー！』と思っても効果の程がわからない・・・
    そしてどうもレスポンシブにもうまく対応してない模様。。。厳密にはレスポンシブの実装方法による、ということででしょうか。ちゃんとCSSとかでdevicewidthで判別してればいいんでしょうが、jsでUserAgentみて～とかやってるとアウトなんでしょうね。
    レスポンシブを推奨しておきながらレスポンシブでは使えないかもってどうなのよ。
    そしてとどめの⑥⑦・・・まじか。
    とにかく新しいものやっとけ！と飛びつかずにGoogleが修正やら本腰入れた公表をするまでは
    いったんステイが間違いないかも、が現時点でのわたしの見解です。


    2016.02.03追記
     広告とGAについては対応されることが発表されたようですね。
     まずは最低限の機能は揃えてくれた、というかんじでしょうか。他のアクセス解析が
     使えないのは相変わらず痛いんですが・・・。
    AMPが広告とGoogleアナリティクスをサポート開始

     AMPの確認方法

    先日SearchConsoleでAMPが確認できるようになりました、とアナウンスがありました。
    とりあえず実装してみた！というかたは覗いてみましょう。
    公開しなきゃわからんよ、ってことね・・・。
    Googleウェブマスターブログ：Search Console における AMP エラー レポートのプレビュー 

     終わりに

    GoogleのAMPの説明を直接聞いたり様々な記事に目を通したりしてきましたが、所感として、モバイルフレンドリーの基準として表示スピードがいよいよ本格導入されるか？な話もあり、AMPを通してモバイルでの表示スピードに対するGoogleの本気度みたいなものは感じました。





    アプリのプロトタイピングツールを使い倒してみる①　－プロトタイピングとはー

      
    こんばんは、おかだです。



    昨年の話になってしまうのですが、Googleさん主催の「Google for Mobile」というイベントに参加してまいりました。

    イベントでは、スマホに限らずさまざまなモバイル端末周辺にまつわる最近のお話を
    たくさんのスピーカーの方から聞けるセッションがたくさん設けられていて

    中でもウェアラブル端末や仮想現実のお話が非常に興味深かったです。

    個人的には購入したばかりだったChrome Castが、スタイリッシュにアップグレードして
    発売されるというお話がショックでした。
    うちのテレビ、HDMI端子を画面に垂直に差し込むタイプなので、以前のCastちゃんでは
    壁方向に端末のお尻が突出してしまうので、接触とか壁との隙間とかが結構気になっていたんですよね。

    しかたないので、気が向いたら新しいCastちゃんを購入しようかと思います。

    Chrome Cast、持ってると本当に便利でたのしいので、オススメです！



    あたらしいアプリをつくることになりました


    Google For Mobile では、アプリ開発に関するお話もたくさん聞けました。

    音楽がきけるアプリ「AWA」のデザイナーさんの、実際にAWAを作った時のお話もとても参考になったので、こんどあたらしいアプリを作る時にぜひ意識していきたいと思いました。


    なんですが今日書きたいのはその話ではなくて、プロトタイピングツールのおはなしです。


    プロトタイピングとは


    プロトタイピングは、アプリの設計段階で画面のイメージや動きを実装する前にみんなで共有するための素敵な手段です。

    WEBのデザインと違って、アプリの場合は見た目だけではなく
    アニメーションの動きなども伴ったユーザー体験が大事になってくるので
    そのへんのいろいろを含め、作ってしまう前にみんなで共有したいよね！ということです。

    "動き付きのモック"っていうイメージでしょうか。。



    最近は簡単にプロトタイプをつくれる便利なツールがあるらしい


    プロトタイピングについていろいろ調べると、けっこう書いてあります。

    「あまり時間をかけないことが大事」



    あくまでイメージの共有手段でしかないので、そこに時間かけるのは本題じゃないよね、ということでしょう。


    なので、世の中のやさしい人たちが作ってくれた「プロトタイピングツール」をつかって
    新しいアプリのプロトタイプを作ってみようと思います！


    ツールには、無料のものから有料なものまで、お手軽なものから本格的なものまで
    海外のものをあわせると10サービスくらい有名なものがあるみたいですが

    今回は「Pixate」というツールを使って、いろいろ試してみたいと思います！




    、、、というのは、「Pixate」のお話が冒頭のイベントで紹介されていたからなのです
    （残念ながらそのセッションは私は聞いていなかったのですが、、、、汗）



    プロトタイプが会議で役に立つといいなぁ。




    ちなみにおかだはアプリの開発者ではないので、わからないこともありそうで結構ドキドキしています。

    次回インストールから始めてみたいと思います！




    わくわく！


    【2016/02/05 追記】
    コメントでもご要望をいただいたのですが、数あるプロトタイピングツールをいろいろとご紹介するのも
    おもしろいかも！ということで
    次回からは「実際に使ってみた」シリーズを何回か連載したいと思います！

    早速ですが次回は「POP」と「InVision」の２つをご紹介していきます～～～

    2016年1月25日月曜日

    MARSとは？

      
    こんにちは山田です。
    SQLのクエリを見ている時にわからない単語があったので調査しました。
    その備忘録になります。

    ■ちなみに私の開発環境
    ASP.NET：2.0
    SQL Server：2005

    ■MARSとは？

    さて、さっそくMSDNに記述がありホッﾄしました。
    Multiple Active Result Sets（MARS）

    SQL Server 2005から搭載された機能で、
    複数のアクティブな結果セットが得られる機能だそうです。
    つまり、1回のコネクションで複数のデータベース・コマンドを同時に照会できるようにするものです。

    MSDNのサンプルコード↓このようになっているみたいです。 
    string connectionString =
　　"Data Source=MSSQL1;" +
    "Initial Catalog=AdventureWorks;Integrated Security=SSPI;" +
    "MultipleActiveResultSets=True";
    初期値ではfalseになっているので、MultipleActiveResultSetsをtrueにする必要があります。

    DBの接続系はよくわかっておらず、誰かが作った接続メソッドを流用しているので
    いつかは書けるようになりたいなと思いました。

    ADO.NET 2.0の注目機能【SQL Server 2005との連携編】

    つまり2005以前は、クエリ文別に、毎回接続しなおしていたんですね。
    大変そうです。


    ■CRUDとは？

    CRUD（クラッド）とは、
    Create（生成）、Read（読み取り）、Update（更新）、Delete（削除）
    データベースのアクセスで
    ユーザーインターフェースに備えるべき4つの基本機能（情報の参照/検索/更新）を指す用語でしあ。
    Create,Regist,Update,Dropとも言います


    ■Management Studio を使った SQL Server の操作で カラムにNULLを挿入する小技
    マネジメントスタジオでカラムを選択して
    Ctrl＋0
    を押します。
    わからなくてググったのでここに貼り付けておきます。

    2016年1月21日木曜日

    フロントエンド・タスクランナー（１: 入門編）

      
    フロントエンドエンジニア ふみえです。 今回はフロントエンド・タスクランナーについて書いていきたいと思います。

    そもそもタスクランナーって何？

    フロントエンド開発において必要になってくる処理といえば、下記のようなものが挙げられると思います。 コードの圧縮 Sass などのコンパイル ファイル変更して、見た目をブラウザがをリフレッシュして確認 フロントエンド開発におけるタスクランナーとは、上記のような処理を自動で行ってくれるツールです。 その代表的なものに、Grunt (http://gruntjs.com/) や Gulp (http://gulpjs.com/) があり今回は今業務で使用している　Gulp について書いていきます。

    thumbnail

    Gulp を選んだ理由

    調べたところによると下記のようだそうで、Gulp に決定しました！

    • Node.js の StreamAPI を使用しているため処理が速い
    • 設定ファイルが書きやすく、読みやすい
    • Grunt の問題点が解決されている


    Gulp の導入方法

    こちらですが、次回まとめてあげようと思います。 内容浅くてすみません。。。
    次回は内容も夢もモリモリでお届けいたします！ 以上、ふみえでしたー！

    参考記事

    http://liginc.co.jp/web/tutorial/117900
    http://qiita.com/Kshi-Kshi/items/634799bb57872ce0a169 https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

    2016年1月18日月曜日

    初めまして、ふみえです！

      
    この1月より、フロントエンドエンジニアとして入社しました、ふみえと申します！

    経歴

    新潟県新潟市生まれ。東京理科大学卒業後、オープンソース・ソフトウェア開発会社で勤務中に Web 業界で自身のやりたいことを見つけた後、Web 制作会社でコーダとして勤務、その後スタートアップ企業でフロントエンドエンジニアとして働き、現職に至ります。 趣味は音楽鑑賞です♪ 使用している言語は HTML、CSS、Javascript が主です。

    よく参加しているイベント

    UX JAM

    昨年は私にとって「UX とは何か」を考える年でした。「UX MILK」というキュレーション・メディアに出会い、もっと学びたい！と思うきっかけになりました。プロダクトの作り方・思考の過程などを、様々な方の実例も交えたライトニング・トークは、すぐに実務・実生活に活かせる情報の多い有意義なイベントです。今年も通い続けようと思います。

    最近読んでいる本

    最近通勤時間にやっていること

    • 目が疲れていたら、目を閉じる
    • 目が元気だったら、携帯で情報収集

    最近あった飲み会での出来事

    約20年ぶりに、年末の忘年会（2件）でプレゼント交換をしました(^^) 誰に渡るかわからないプレゼントを選ぶのはとても新鮮で楽しかったです！ みんなで歌を歌いながらプレゼントをぐるぐる回します。久々のプレゼント交換にテンションがあがりました↑ageage↑

    最近使用しているサービス

    Slack はよく利用しています。

    今年動向が気になるもの

    DesignSprint!! 世の中の流れがまた変わるのかなって思います。
    Snapchat!! ホワイトハウスでも運用を開始したということなので、動向が気になります。
    以上で自己紹介を終わります。今後もブログを書かせていただきますので、ちょくちょく覗いてみてくださいね！ そんなこんなで頑張ります☆
    それでは、ふみえでしたー！！
    登録: 投稿 (Atom)