サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
今回、firefox dev conferenceに参加してきました。 www.mozilla.jp そこで聞いてきた、webextensionsに関して試してみたので、ログっておきます。 firefoxはアドオンの機能に関して、Chromeの拡張機能と同じ仕様を搭載することを発表しています。dev.mozilla.jp 実際、どのようにして作るのか紹介します。 WebExtensionsに関しては、WebExtensions - MozillaWikiに書いてあります。 環境構築 以下からFirefox Developer Editionをダウンロードします。 Firefox のダウンロード — 自由な Web ブラウザ — Mozilla リンクのURLからしてバージョンが変わると見れなくなりそうなので、 リンクに飛べない場合は、「DeveloperEdition」で検索してダウンロー
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました(少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど)。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
Android OSとChrome OSが統合するという噂は2010年に既にあったが、今回のニュースでは具体的な時期が示されたのが特徴だった。 ウォールストリート・ジャーナルから流れたChrome OSとAndroid OS統合の噂 ウォールストリート・ジャーナル(以下WSJ)が内部情報に詳しい人物から得た情報として、Googleのエンジニアはここ2年ほど、Chrome OSとAndroid OSの2つのシステムを統一するために動いているというニュースを流し、日本のテック界にもこの情報が駆け巡った。ただ、Chrome OSとAndroid OSはどちらもLinuxのオープンコードで書かれていることは共通しているが、やはりこの大きな違いがあり、統一するのは簡単なことではないという。 上記のWSJの報道によれば、Googleは2017年に正式にこの2つのOSを統一した新しいOSをリリースすると
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
最近、Macを新しくセットアップし直す機会があったので、Chrome拡張も整理してみました。 開発に役立つものから、日常使用で便利なものまで色々あったので、次回セットアップ時に備えてまとめておきます。 普段使いに便利な拡張・ AutoPatchWork GoogleやAmazonで検索をすると結果がページ分けされていると思いますが、この拡張を使うとスクロールするだけで次のページを自動で読み込んでくれるので、毎回次のページをクリック、という手間が省けます。 他にもメディアサイトでページ分けされている記事も自動読み込みしてくれたりするので非常に便利です。 ・ ato-ichinen オンにすると直近1年の検索結果のみを表示してくれるようになります。 古い記事が引っかからないようにしたい時に便利です。 ・ Copy URL+ URLをコピーする際のフォーマットとショートカットを登録できます。 僕
Web 開発者の方であれば今開いている Web ページにどのような技術が利用されているのか気になる事がありますよね。ソースを表示したり Developer Tools を起動したりして調べるのも良いですがさくっと確認するだけであれば BuiltWith Technology Profiler という拡張機能を利用するのが便利です。 この拡張機能を入れるとメニューバー上にアイコンが表示されるので、調べたい Web ページを開いてアイコンをクリックするだけです。 例えばこのブログだと上記のような感じに表示されます。 かなーり縦に長いので文字で書きますが以下のような情報を取得しています。 Web サーバの種類, バージョン ネームサーバ ホスティングしているサーバ CMS の種類, バージョン 使用しているフレームワーク 広告の種類 ユーザ統計情報(Google Analytics 等) Jav
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
Googleは、Chrome 45からCustom Tabs機能を導入しました。Custom Tabsを使うとアプリ内のWebページ読み込みを大幅に高速化できます。いままでのWebViewでは、動作速度のほかにもセキュリティホールが修正されないなど、OS組み込みブラウザ特有の問題がありましたが、アプリケーションとして更新しているChromeでは常に最新の環境でWebページを閲覧できます。 (https://developer.chrome.com/multidevice/android/customtabsより引用) Custom Tabs機能は、アプリの組み込みブラウザとしてChromeを使えるだけではなく、外部アプリ利用ながらUIデザインも変更可能な点で優れています。アプリに違和感なく組み込めるようにカスタマイズ可能です。 ツールバーの色、表示内容の変更 Webページ切り替え時のアニメ
Google以外の検索エンジンでも、Chromeで素早く検索したい! Google Chrome(以下、Chrome)では、アドレスバー(オムニボックス)にキーワードを入力して[Enter]キーを押すと、Google検索を使ったWeb検索の結果が表示されます。 ただ、検索する目的によってはGoogle以外の検索エンジンを使いたいときもあります。例えば自社サイトをYahoo! JAPANやBingで検索したとき、どのように表示されるのかを確認したり、始めから特定のジャンルあるいはサイトで絞り込んで検索したり、といった場合が挙げられます。 そんなとき、いちいち検索サイトをWebブラウザで開き、検索窓に単語を入力して検索を実行するのは面倒です。 実は、Google Chromeが標準で装備している機能だけで、素早く特定の検索エンジンを選んで検索できます(拡張機能は不要です)。Amazon.co.
起動オプションの設定方法 Windows版の場合 Google Chromeのショートカットを新規作成 作成したショートカットを右クリック、プロパティを選択 ”リンク先”へ起動オプションを追加 例 XP "C:\Documents and Settings\<ユーザー名>\LocalSettings\ApplicationData\Google\Chrome\Application\chrome.exe" --disable-javascript --disable-java --disable-plugins Vista "C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-javascript --disable-java --disable-plugins 半角スペースを空けてオ
Google Chromeのアバターメニューとは? Google Chrome 44.0.2403.89 (64bit)から、アバターメニューが復活しました。以前はアドレスバーで chrome://flags#enable-new-avatar-menu に設定項目があり、これを無効化することでアバターメニューを削除することができましたが、今回のアップデートで設定項目が抹殺されてしまいました。 複数のアカウントを運用している人にとっては便利ですが、アカウントを1つしか持っていない人にとっては、まったくもって不必要な機能です。 アバターメニューを削除するには? --disable-new-avatar-menu オプションを付加して起動すれば良いです。Windows版 Google Chrome を使用している人は、Google Chrome のショートカットアイコンを右クリックしてプロパテ
※2015年12月3日時点の情報です 「Google Chrome 47」がリリースされました。こちらの記事で紹介した「--disable-new-avatar-menu による方法」が効かなくなりました。残念! 現時点で代替策を見つけることが出来てません。怒っている海外のユーザーも多いですね。期待はできませんが対策判明しだい更新します。 速報!Amazonランキング大賞2015 発表! 2015年で売れた商品から気になったものをピックアップ。 - カモメのリズム Amazon Prime ミュージック 開始!Amazon プライム会員向けのサービスが充実してきました。 - カモメのリズム 元の記事 ※以下 2015年7月23日時点の記事です。参考までに残しておきます。 「Google Chrome 44」がリリースされました。安定性の強化と43件の脆弱性修正によってセキュリティを強化した
404エラーで消えてしまったページのキャッシュを、Google・Yahoo・Bing・InternetArchiveなどの各種キャッシュで一度に探すことができる、Google Chrome用の無料拡張機能が「Web Cache」です。。 Web Cache - Chrome ウェブストア https://chrome.google.com/webstore/detail/web-cache/coblegoildgpecccijneplifmeghcgip?utm_source=chrome-app-launcher-info-dialog Web CacheをインストールするにはGoogle Chromeで上記のリンクを開いて、「CHROMEに追加」をクリック。 ポップアップウィンドウが表示されるので、「追加」をクリック。 「Web CacheがChromeに追加されました」と表示されたら
B! 4 0 0 0 基本的に普段はFirefoxを使ってるんですが、 たまにChromeを立ち上げることがあって、 最近MacでChromeを立ち上げるとメニューバーに通知のアイコンが出て 気になってました。 簡単に消せるかと思ったら設定画面に項目が無くて 少し迷ってしまったのでそれについて。 Chromeのリッチ通知 設定のページからは変更できない chrome://flagsをいじる Chromeのメニューにあった Chromeのリッチ通知 Google Chromeではタスクバー(Windows)やメニューバー(Mac)に ベル型の通知アイコンを常駐させて、そこから通知を行う リッチ通知という機能が去年追加されました 1 。 余り使ってないので気付かなかったんですが、 最近やたらとこのベル型アイコンが気になるようになりました。 Gmail等の通知もしてくれるわけですが、Gmailは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く