[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法
こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。 使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。 みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。 必要なもの 1.Mac 2.iPhone 3.ケーブル 次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐ まず
![[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f32f22625c07917861df73b24c82b03b4b6348/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Ff58a46be76400f23debbeacb9e1cc899.png)
Dockerで何が変わるのか - 世界線航跡蔵
DockerCon 2014 に行ってきた。 この会期中には各社からいくつもの製品が紹介/発表された。そして、それによってクラウドという技術は次のステージに移行したと言っても過言ではないだろう。 より自由にユーザーがクラウドベンダーを選べる時代へ。どうやってクラウドにうまくデプロイするかではなく、アプリケーションそのものに注力できる時代へ。 Dockerとは Docker とはいわゆるコンテナ技術の1つで、Linuxホスト環境の中に隔離された別のLinux環境を作ってくれる技術だ。 軽量仮想マシンと呼ばれたりもする。 Solaris Container とも似ている。 新しくないDocker 1つ述べておくとDockerは技術的には新しくない。Dockerの価値は技術以外にある(とDockerのCEOもDockerConで言ってた)。 技術的にはSolarisにはSolaris 10の頃か
今からでも間に合うDockerの基礎。コンテナとは何か、Dockerfileとは何か。Docker Meetup Tokyo #2
今からでも間に合うDockerの基礎。コンテナとは何か、Dockerfileとは何か。Docker Meetup Tokyo #2 コンテナ型仮想化の技術として注目されているDockerの勉強会「Docker Meetup Tokyo #2」が4月11日にグーグル東京オフィスで開催されました。 この勉強会には定員100名のところへ400名を超える申し込みがあり、参加できなかった方も多かったと思います。本記事では、最初のセッションとして行われた森和之氏による「今からでも間に合うDocker基礎+Docker 0.9概要」をダイジェストで紹介しましょう。 参考記事 2013年のDocker登場から現在（2018年）までを振り返り、その次の段階を展望した記事もご参照ください。 Dockerコンテナ時代の第一章の終わり、そして第二章の展望など 今からでも間に合うDocker基礎 株式会社トップゲー
HTTP2でWebがどうなるか9つのこと(自分用ﾒﾓ - ASnoKaze blog
宣伝 2015/11 追記 ソフトウェアデザイン 11月号に HTTP/2の特集記事を書かせていただきました。より詳しく書きましたので、本記事より参考になるかと思います。 http://www.amazon.co.jp/dp/B01494YKUI HTTP2は2014年4月のWG Last Callに向けて、仕様策定が進められている。 現在も、ロンドンで行われているIETFのミーティングでは熱い議論が行われているところであろう。 (local activityとして日本での活動なども紹介されているようです) HTTP2の仕様を決めているHTTPbisワーキンググループのchairであるMark Nottingham氏が、自身のブログにて「Nine Things to Expect from HTTP/2」という記事が投稿されている。 ここでは、HTTP2が何をもたらすか以下の観点で説明して
Google Cloud Endpoints正式リリース。Google App Engineがモバイルバックエンドに対応
Google Cloud Endpoints正式リリース。Google App Engineがモバイルバックエンドに対応 Googleは、今年2月に公開していたモバイルアプリケーション用のライブラリGoogle Cloud Endpointsを正式リリースしました。 Google Cloud Endpointsの主な機能は、iOS、Android、JavaScriptなどからApp Engine上のアプリケーションを呼び出すためのクライアントライブラリを生成してくれることです。開発者はiOSやAndroid、Webブラウザから容易にGoogle App Engineの機能にアクセスすることができるようになります。 さらにGoogleはMobile Backend Starterと呼ばれるツールも用意しており、サーバサイドのコードを書かなくとも、データストアやプッシュ通知、ユーザー認証などの
事前レンダリングでウェブページの表示時間を高速化
[対象: 上級] 事前レンダリングと呼ぶ技術を使って、ウェブページの表示時間を高速化する方法をこの記事では解説します。 事前レンダリングとは 事前レンダリング (Prerendering)とは、その名のとおり、ページの読み込み（正確にはレンダリング）を前もって実行する仕組みです。 Google検索で採用されている「インスタントページ」には事前レンダリングが使われています。 下のキャプチャは、Googleで「Amazon」を検索したときのChromeのタスクの状況をタスクマネージャで確認したものです。 「事前レンダリング」でAmazon.co.jpが出ています。 「Amazon」で検索したユーザーはかなり高い確率で（1位に出てきた）Amazonのホームページをクリックするはずです。 Chromeは先回りして、ユーザーがクリックしなくてもAmazonのホームページを取得および描画、つまりレンダ
Welcome to Read the Docs — PythonJS latest documentation
Welcome to Read the Docs¶ This is an autogenerated index file. Please create a /home/docs/checkouts/readthedocs.org/user_builds/pythonjs/checkouts/latest/doc/index.rst or /home/docs/checkouts/readthedocs.org/user_builds/pythonjs/checkouts/latest/doc/README.rst file with your own content. If you want to use another markup, choose a different builder in your settings.
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
さよなら手作業・人海戦術！ HTML5時代のツール「Selenium2」でWebシステムのテストを自動化
本シリーズは、WebブラウザをUIとして利用した業務システムやアプリケーション（以下、Webシステム、Webアプリケーション）のテストをテーマとして、Webブラウザを使ったテストを自動化するOSSのツール「Selenium2」を紹介します。業務システム開発の現場で適用してきたノウハウを元に、これまでSelenium2について知らなかった人から以前使った経験がある人まで、より実践的な「使える」内容を盛り込んでいきたいと思います。 本シリーズのスコープと対象読者 本シリーズはWebシステム・Webアプリケーションのテストの中でも「Webブラウザを操作して実施するテスト」をスコープにしています。開発工程としては、1モジュールとして単体テストに位置付けられる場合もあれば、複数のモジュールやシステムと連携して結合テストや総合テストに位置付けられる場合もあるでしょう。これらのテストのことを、本シリーズ
pythonモジュールmechanizeでWeb上の作業を自動化する | TRIVIAL TECHNOLOGIES 4 @ats のイクメン日記
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー mechanizeはWeb上の操作を自動化してくれる便利なPythonのライブラリ。Pure Pythonなのでいろんなところで動くよ。PerlのWWW::Mechanizeにinspireされて作られた。RubyにもMechanizeという同種のライブラリがある。Perl偉い！ 「Web上の操作を自動化する」っていうのは，例えばどこかのサービスにログインしてあれこれするとか，そういったことをプログラマブルに行える，ということ。フォームの操作などもオブジェクトを使って実行できるのでとても手軽。Webアプリの開発などではテストに使われたりするんだけど，結局僕がなにをしたかったかというと，
Away3D makes its way to Typescript!
Adobe AIR and Adobe Flash Player Team Blog News, Commentary and Insights from the Flash Player and AIR Product and Engineering Teams Today our partners at Away3D have introduced their first official alpha release of Away3D for Typescript! Away3D is an open source 3D framework available in Adobe’s Gaming SDK. Initially available for ActionScript developers, this new alpha available on Away3D’s we
Webアプリケーション向けのセキュリティスキャナ「skipfish」を使う | OSDN Magazine
近年では多くの分野でWebアプリケーションが使われるようになり、大量の個人情報や重要な秘密情報を扱うようなアプリケーションも少なくない。そのため、Webアプリケーションも攻撃対象として狙われやすくなっている。今回はWebアプリケーションのセキュリティ対策として、Googleが公開しているセキュリティ調査ツール「skipfish」を使ったセキュリティスキャンを紹介する。 Webアプリケーションに特化したセキュリティ調査ツール「skipfish」 今日では、Webブラウザ経由でさまざまな操作を行えるWebアプリケーションが広く浸透している。Webブラウザは最近のほぼすべてのPCにインストールされており、専用のクライアントを用意せずにアプリケーションを操作できるというのがその浸透の理由の1つだ。しかし、Webアプリケーションでは簡単にその一部（HTMLやJavaScript）のソースコードを閲覧
G-WANはなぜ速いのか？をnginxと比べながら検証してみた - blog.nomadscafe.jp
ツチノコブログのWEBサーバベンチマークツール比較の記事で紹介されていた。WebサーバのG-WAN。この記事によると凄く速いようです。 Intel Xeon E5-2640 (6コア/12スレッド 2.50GHz) を2つというサーバで gwan 334944 req/s nginx 111842 req/s と、速いと言われているnginxの3倍の速度を出しています。 このベンチマーク結果がとても気になったので、なぜG-WANが速いのか、自分でも検証してみました。 結論から言うと以下の2つ。 1) G-WANはデフォルトで物理CPUに合わせた数のスレッドを起動する 2) HTMLファイルも一度読み込んでキャッシュする という事です。 今回はAWSのcc2.8xlarge(E5-2670 8コア/16スレッド 2.60GHz *2)を使ってベンチマークを行いました。OSはAmazon L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜ html の form は PUT / DELETE をサポートしないのか？
RaspberryPi、数式処理ソフト「Mathematica」を同梱。個人利用は無料 
Webアプリのデバッグに最適。HTTPに特化したネットワークキャプチャーツール「Fiddler」NOT SUPPORTED
AWS特集 の記事一覧 | DevelopersIO
フリーランスの全国Webサイト制作料金表 2013年度版
http://daily.d3js.info/?p=296