グーグル、重たいコンテンツもサクサク見られる｢AMP HTML｣を発表2015.10.09 12:00 動画やアニメの視聴も快適に。 モバイルサイトのコンテンツ、どんどんリッチになっていきますね。動画やアニメなども充実してきましたし、インタラクティブな仕掛けがあるサイトもたくさんあります。 でも、重たくてロードに時間がかかることも、よくあります。ユーザーからすればストレスになりますし、コンテンツを配信している企業もビジネスチャンスを逃してしまいます。それを何とかしようということで、グーグルは｢Accelerated Mobile Pages（AMP）｣というプロジェクトを立ち上げました。 このプロジェクトの基盤になっているのが、ウェブサイトを劇的に軽くするオープンソースのフレーム｢AMP HTML｣。同じコードでスマホやタブレットなど、あらゆるモバイル機器やプラットフォームに対応できます。

TL;DR Chromeで console.profile() と console.profileEnd() を使うと超簡単にJSの実行パフォーマンスを解析できる、という事実を今日知ったのでシェアさせていただきます。 やりたいこと JSの任意の関数の実行プロファイル (コールスタックごとの所要時間) を見たい。 やりかた Google Chromeのデバッグコンソールで以下のようなスクリプトを入力して実行 (見やすくするため改行入れてますが実際には一行で)

タイトルはかなり挑戦的(?)ですがあまり気にしないでください。 ※注意 このエントリで紹介しているオプション、コマンドはCentOSでしか動作確認をしていません。 その他ディストリビューションや、インストール方法によっては挙動が異なる場合があります。 「less」 使ってますか? エンジニアなら普段Linuxに触る機会が多々あるかと思います。 エンジニアのみならずMacだったりUbuntuだったりで私用PCでもターミナルが使えるようになっている方は多いかもしれません。 私は普段の仕事ではサーバの運用管理をしています。 仕事柄触る頻度が高いのはLinuxサーバです。 そして、使うのは大体CLIです。 そもそもLinuxでGUIを触る機会がなかなかありません。 大体リモートからターミナルで接続してCLIでちょいちょいっと処理をする感じですね。 GUIである場合でもLinuxを使っていればターミ

SNSが全盛期となっている現在では、もう遠い昔となってしまった、90年代後半の「個人ホームページ全盛期」。多くの家庭にパソコンが存在するようになり、自分から情報を発信できるようになった時代。 まるで文明開化のような時代の到来に胸が弾み、HTMLタグを1から覚えたという人も多いのでは？　個人のセンスがそのまま表れるなんともいえないカオスな世界。今となっては懐かしい昔のホームページあるあるを見ていきましょう！ 【手作りだからこそあるある！】 ・「○○のお部屋」「○○のホームページ」みたいなタイトル ・「ようこそ」などのメッセージが画面を左右行ったり ・ワードアートで立体＆虹色グラデーションにした「Welcome to My Homepage」 ・作成中のページは工事中と表現(道路工事標識みたいなイラストを設置) 個人ホームページの作成を身近なものにしたのが、ジャストシステム開発・販売の「ホーム

2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ

なんかはよく使うはず。 だが、ちょっとした関数の使い分けでデバッグ一つもしやすくなる。 なのでほんの少し紹介。 ※以下は全てGoogle Chromeでの実行結果です console.error 赤い！よくあるエラーメッセージ エラーとみなす箇所に是非

シェルスクリプトはあまり触らないから忘れちゃうのでメモっとく。 主にパイプとかリダイレクトとかプロセス置換とか。 パイプ コマンドの出力を別のコマンドの入力にする

Microsoftが、Webページでのメディア再生にSilverlightの使用をやめてHTML5ベースの技術に移行することを推奨している(Microsoft Edge Dev Blogの記事、 The Registerの記事)。 Silverlightなどのプラグインは異なるWebブラウザーでの相互運用性を高めるための仕組みだが、デバイスやプラットフォームの種類が増加するにつれサポートが困難になっており、脆弱性の修正にも時間がかかる。一方、HTML5ではMedia Source Extensions(MSE)やEncrypted Media Extensions(EME)、DASH、Common Encryption(CENC)などにより、保護されたコンテンツの配信も可能となっている。Webブラウザー側でも、Microsoft EdgeではActiveXのサポートが廃止され、Google

ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」

Deep Learningによる画像認識を可能にする最も簡単なWebプラットフォーム「Labellio」のリリースのお知らせという記事を見かけたので試してみました。 公式のチュートリアルに従えば簡単にDeep Learningを使った画像認識を試すことが出来ました。 まずはLabellioにアクセスします。 サインインをクリック。 アカウントはGitHubまたはGoogleアカウントと紐づけするようです。 ログインするとモデル作成画面に飛ぶのでCreate Modelをクリック。(kinmosaは過去に私が作成したモデルです） モデル名を入力してAdd dataをクリック。 今回はご注文は機械学習ですか？で使ったデータセットをzip形式で送る方法を使いました。 このようにラベル名のついたフォルダにそのキャラの顔画像を入れます。フォルダ直下に入れたファイルはフォルダ名のラベルが付くようです。

「service worker」とは？ Chrome ソフトウェアエンジニアの@nhiroki_さんによると、 ページのバックグラウンドで動くイベント駆動の JavaScript 環境 （ゆえに “Service” Worker） とのこと。 大きくは現在は2つ特徴がある。 Cache機能 (オフライン環境でのアクセスを可能に) Push機能 (アプリと同様にリエンゲージメントを高める) 引用:Service Worker の紹介 Service Workerのライフサイクルは上記。 - 引用: Service Worker hackathon 2015 - introduction talk 1秒ってのは、人がシームレスに感じる(=違和感なくかなり心地よい)秒数だが、実際今のmobileでの1秒の内訳は上記にある通り、コネクション張ったり通信を発生させる部分で既に大枠を使っている・・・w

まだまだひよっこiOSエンジニアな僕(yotsu7)ですが、SwiftでのiOSアプリ開発に興味がある、やってみたい、始めて間も無くもう心が折れそうという方の助けになるようなサイトを実際に参考にさせていただいていたサイトから抜粋して紹介させてもらおうと思います。 サイトの紹介 Swift Docs Swiftの逆引きができるサイトです。例えば、Buttonを作りたい等開発者の要望に応えてくれるサイトであり、Swiftでアプリを作るきっかけには非常に便利なサイトかと思います。また、Storyboardを使用せず、コードでの例が多く載っているので、手を動かして学ぶにはもってこいなサイトです。 iPhoneアプリ開発の虎の巻 言語自体はSwiftではなくObjective-Cの解説がされているサイトなのですが、Swiftにも通づるものがあり各クラスの解説や、メソッド、引数等細かに解説されているの

Updated 2015.12.24 / Published 2015.03.19 free-floating-buttons.com, free-share-buttons.com, social-buttons.com, simple-share-buttons.comなどロシアやウクライナの地域からのリファラを偽装するスパムボットが活発化しており、100セッション/日以上の被害を受けるサイトがでてくるなど、アクセス解析のデータが掻き乱され、困惑させられるケースが増えていませんか？ 暫時対策として、Google Analytics以外のアクセス解析ツールを利用されている場合は、活発に活動しているスパムボット（リファラから）のアクセスを拒否することで、設定以降後の被害を最小限に抑えられ、アクセス解析データがほぼ正常になることが期待できます。ただし、所詮はここで紹介する対策はスパマーとのい

この記事は Sublime Text Advent Calendar 2014 - Adventar の15日目の記事です。 11日目の id:mermaid1112 さんの記事を読んでいたら Sublime Text のプロジェクトについて困っていたので、その対処方法を書きます。 プロジェクトの作成方法 問題1：Sublime Text 3 では開いているプロジェクトを閉じることができない 問題2：Sublime Text 3 ではプロジェクトの一覧に作成したプロジェクトが表示されない Sublime Text のプロジェクトの構成 原因：sublime-workspace ファイルが作成されない 対処方法：sublime-workspace ファイルを作成する 対処方法1：Save Workspace as... で sublime-wokspace ファイルを作成する 対処方法2：S

環境 cd コマンドが使えるLinux、Mac 一つ前にいたディレクトリへ戻りたい！ 結論から書くと以下のコマンドで直前にいたディレクトリへ戻れます。 1$ cd - 動作確認 例えば、ターミナルで /etc/apache2/ にいるとします。 そしてこのディレクトリの中にあるusersというディレクトリに入りたくてcd usersと打ちたいとします。しかし、cd だけ打った段階でエンターキーを押してしまいホームディレクトリへ戻ってしまう… なんていう経験は結構あるんじゃないでしょうか？ 先ほど紹介したコマンドを使うと、長いパスを延々打たなくても一つ前に移動してきたディレクトリに戻れるんです。 1$ pwd 2/etc/apache2/ 3 4$ cd 5 6$pwd 7/Users/kawa-xxx 8 9$cd - 10/etc/apache2/ 楽ちん楽ちん。コマンドのオプションを理

カウント速度を比較してみる 10万ファイルを作成し比較 $ seq -f "file_%06g" 100000 | xargs touch $ time ls -1 | wc -l 100000 real 0m0.357s user 0m0.320s sys 0m0.044s $ time find . -type f |wc -l 100000 real 0m0.162s user 0m0.020s sys 0m0.152s lsの方が遅いのか？ lsはデフォルトでソートを実施するので時間がかかる。 そこで、-Uオプションを用いるとソートを実施しないようにする

はじめに こんにちは、くろていです。先日、TwitterにてWindows/Mac間の違いにおいてのフォントの表示、内蔵しているフォントについて少し話し合いをしました。その内容を受け、「様々な環境の視点から」どう「きれいなフォント」を表示するかを考え、それをまとめ、みなさんに知って欲しいと思い、記事を書きました。 実装案 各OSに入っているデフォルトのフォントを把握する 様々な環境の視点からフォントを考え、指定するときには、もちろんそれぞれの環境のデフォルトに内蔵されているフォントを知ることが最重要です。それをまとめ、整理してみました。(ゴシック体のみ) Windows: MS Pゴシック, メイリオ(vista以降), 游ゴシック(8.1以降) Mac:ヒラギノ 角ゴシックProN W3,W6,W8, 游ゴシック(Mavericks以降), MS Pゴシック(Office for Mac