Google Libraries API
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
YQLがなくなったのでJSONPで対策してみた - 加賀の迷子ライフ
以前、YQLが急に使えなくなった際に 上記記事のような対策を取ったことがありましたが On Jan. 3, 2019, YQL service at https://t.co/g4W9RhdMLk will be retired. YQL based services that use https://t.co/g4W9RhdMLk, including users of https://t.co/5IkUaEykdl, will no longer operate. Yahoo Weather API users see the tweet below for info about continuing your service. — Y! Developer Network (@ydn) 2018年12月31日 今回は仕様が変わったとかそんな話ではなく YQLそのものがなくなってしまい
flexがあるからfloatやclearfixはいらない？ んなわきゃ無い - Webデザインの日々日記
floatやclearプロパティ周りの話題が出るたびに、「flex使えばオッケーじゃん」というような声が散見されるので、「それは違う！」と強く訴えたい、というお話です。 そもそもflexはfloatの代替品ではない floatプロパティは、それを設定した要素を文字通り"浮かし"て、後続の要素を回り込ませる役割を持っています。 一方のflexの役割は"並べる"のであって、floatのように後続要素を回り込ませる機能は持ちません。 floatを使って要素を並べるのは、本来の用途から少し外れています。そのためclearfixという多少の無理をしていました。その無理のしわ寄せは、clearfixを適用した要素には、after疑似要素を利用できないところに現れます。 なお、要素を並べるには、floatの他に、 display: inline-block; display: table;とtable-
Twitterツイートボタン吹き出しカウンターリンク作成方法
ツイートボタンの刷新 Twitter、ツイートボタンの刷新は米国時間の11月20日に実施 Twitter Japan株式会社が告知していたツイートボタンのリニューアルについて、同社広報部に確認したところ、米国時間の11月20日に実施することが判明した。 これは、10月6日付の同社公式ブログ内で「11月20日までにリニューアルを実施」と予告していたもの。ツイートボタンを、青をベースとしたハイコントラストなデザインに変更する。また、新デザインへの移行にともない、ツイート数を表示するカウンターを廃止する。 上記の記事に書かれてあるとおり米国時間の2015年11月20日以降にTwitterのツイートボタンの吹き出しカウンターが表示されなくなった。 すでにTwitter公式サイトのボタン設置用のコードを生成するページでは吹き出しカウンター付きのボタンのオプションの有無を選択できなくなっている。 ht
リンクの http: や https: を省略して現在のプロトコルでリンク先にアクセスさせる - Qiita
<a>タグのhrefなどで指定するURIは、http:やhttps:を省略できます。 具体的には、 と書けます。 省略することで、遷移元のページを httpで開いているときはhttpでアクセスさせられます。 httpsで開いているときはhttpsでアクセスさせることができます。 <a>以外にも<script>, <iframe>, <link>などURI全般でこの書き方を使えます。CSSでも使えます。 メリット httpsで開くページの中にhttpのリンクが混在することを予防できます。 逆に混在すると中間者攻撃を受ける可能性がありますが、それを防ぐことができます。 中間者攻撃を受ける理由は、おおざっぱにいってこうなっています： 1. ユーザがhttpsを使って、あるページにアクセス 2. そのページにhttpへのリンクが混在していると、httpなアクセスが飛ぶ 3. 攻撃者がhttpコンテ
Firefoxアドオン「Format Link」の変数でHTMLエンティティを使う
登場から早数か月、やっとFirefox Quantumに乗り換えたのを切っ掛けに、ブログの執筆に使用していたアドオンを「Make Link」から「Format Link」に変更した。登録可能な項目数が9個とあまり多くない点を除けば、変数などもシンプルなので比較的スムーズに移行作業は終わったのだが、使用している間にHTMLの特殊文字、例えば「<」（小なり）や「&」（アンパサンド）をエスケープしてくれないことに気がついた。 確かMake Linkだと「HTMLエンティティを使用する」のチェックボックスをONにするだけで、この辺の処理を自動でやってくれたと思うのだが、そういった設定項目はないらしい。 Format Link - Firefox 向けアドオン とはいえ「HTMLエンティティが使えないので、手動でわざわざ変更しなければいけない」というわけではない。Format Linkの変数には正規
blockquoteとciteタグを使用した適切な引用の方法 - ブロギングライフ
AMP 公式ブログが、2つの画像を一つの画像スペース内にオーバーレイでスライド表示して、両者を比較することのできる機能、AMP イメージスライダーを正式にリリースしたことを発表しました AMP イメージスライダーの特徴 2つの画像を一つの画...
日本語向けフォントスタックの現状 - yuhei blog
日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serif、serif、system-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末（Windows、Mac、iOS、Android）のフォントの搭載状況を整理する。 sans-serif まず、Windowsはメイリオ一択だと考えたほうが良い。游ゴシックはWindows 8.1ではかなり細く、Windows 10でも一般的なフォントと比べると少し細いのが問題だ。ハック的に回避する方法はあるものの、積極的に採用したくはない。メイリオはWindowsユーザーにとって馴染みがあり、最も問題になりにくいフォントだと考えられるため、あえて別の選択をする必要性は低いと思う。 Yu Gothic UIという選択肢もあるが、本文向きでは無さそうだ。 Macでは問題なく游ゴシックが利用できるので、ヒラギノ
Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Web
（追記：本記事は、游ゴシックをWindowsで綺麗に表示するためのベストプラクティスを示すことを目的にしたものではありません。ご了承ください） （追記：Macの代替ウェイトの表示は仕様に沿っているというご指摘を受けましたので、すこし表現を変えました） 先日投稿した「Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？」には、思ったよりも大きな反響をいただき、ありがとうございました。 私の記事に対して検証をしてくださったりご指摘をいただいたりといったリアクションも多く、大変ありがたく思っています。 特に参考になったのは、下記の2つの記事です。 ありがとうございます。 Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる | WWW WATCHRe : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
YQLを使用してWordPressのRSSをjsonで取得してjQueryで表示する
YQLを使用してWordPressのRSSをjsonで取得してjQueryで表示する YQLはSQLのような言語を使用して、さまざまなWebサービスからxmlやjson形式でデータを取得することができる米yahooのサービスです。 また、xmlをjavascriptで扱いやすいjsonなどのフォーマットに変換もしてくれるみたいです。 このサービスを利用してWordpressのrssをYQLでjsonに変換してjQueryで取得するということをしてみます。 投稿日2010年09月11日 更新日2011年04月03日 YQLコンソールでデータを確認してみる。 まずはYQLコンソールにアクセスしてどんなデータになるのか見てみましょう。 YQL Console URLにアクセスするとこんな画面が表示されるはずです。 上部の「show tables」と書いてあるフィールドにYQLを入力します。 入力
Google Feed API から YQL API へ移行したお話 - Qiita
〈追記 2019年1月〉 残念ながら YQL終了のアナウンス がありました。 On Jan. 3, 2019, YQL service at http://query.yahooapis.com will be retired. YQL based services that use http://query.yahooapis.com, including users of http://datatables.org, will no longer operate. Yahoo Weather API users see the tweet below for info about continuing your service. — Y! Developer Network (@ydn) December 31, 2018 とっても便利だった Google Feed API ですが、復
svgを表示する魔法なんて存在しない-SVGMagic解説
ここ最近，svg非対応のブラウザで「魔法のように」svgを表示できるjQueryプラグインなるものとしてSVGMagicを紹介しているサイトが見受けられますが，ちょっと待ってくださいよっと． その動作原理を解説しないってのはフェアじゃないよという記事． ※脊髄反射で公開しているので間違いがあるかも知れません． svg非対応な環境で”svg”を表示させる方法アレコレ html5仕様に正式に取り込まれたsvgですが，その普及を妨げている原因としてsvgを表示できないwebブラウザが依然としてある程度のシェアを保っているということが挙げられます．ie8とかandroid2系ブラウザとか… svgを使う上でこれらの環境を無視するというのも一つの手なんですが，そういうわけにも行かないケースもあるわけです．じゃあどうするかというと大体次の対処策が考えられます． 静的な方法 事前ラスタライズ 事前にsv
グロースハックについて思うこと - 運河
Webサービスにおいて定量的に評価できる数字とユーザー体験はトレードオフであることが多い。たとえば、広告のクリック率を上げようと思えば、広告枠を過剰にチカチカさせたりボタンに隣接させて配置したりすればよい。運営者の小遣いが増える代わりに、ユーザーにとっての心地よさを犠牲にする。 必要なのはバランス感覚だ。価値基準が歪むと"Don't be evil"という言葉も機能しなくなる。 ユーザー体験を犠牲にする黒魔術に一度手を染めると、そのサービスはいつしかスパムと区別がつかなくなる、と僕は思う。 “月間34億PV、新規会員登録1日1万人！ pixiv片桐代表が明かす、驚異のグロースハック術 | ログミー[o_O]” http://t.co/q36cwDbmeq— ウイウ (@uiureo) 2014, 2月 17 会員登録しないと著しく不便なようにして無理やりユーザーに登録させるのをグロースハッ
Jeff Croft「web標準が成功しhtml名人は用済みになった」 - 以下斜め読んだ内容
jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び（diversify or die）を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ - などなど カンファレンスも何度もあった。本を書いた人も
AdSense収益アップの秘訣をグーグル日本法人で聞いてきたよ
グーグルのセミナー「楽しみながら収益アップ！AdSense Partner Day in 東京」に参加してアドセンスについて勉強してきましたよ。 ライブ最適化講座 まず最初に、ゲストのサイトに対してアドバイスを行うライブ最適化講座がありました。 一人目 ログハウス.com－ 建築とログハウスキット ビッグバナーとコンテンツのリンクの距離が近すぎる。誤クリックする可能性があるので離した方が良い。 ビッグバナーとリンクユニットの場所が近すぎて食い合っている。離した方が良い。 右サイドバーのスカイスクレーパーを無くして300×250に代えた方が良い。 情報をカテゴリ化してもう少し分かりやすくすると良い。 検索ボックスを設置する。 二人目 シェアーズカフェ・オンライン 右カラムの一番上に300×250を置きたい 特に日本では記事下が収益性が高いので、そこに300×250を2つ並べる。 ランキングの
Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日本語で書き直していますので完全な翻訳ではありません。 Twitter Cards （Twitter カード）、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので （公式な日本語ドキュメントも今のところないし）、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP （Open Graph Protocol） を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
Microdata + schema.org を実際に使ってみる
schema.org は Google、Microsoft (Bing)、Yahoo! という Web 検索の大手 3 社が共同で取り組んでいる試みで、より構造化されたマークアップのための共有の語彙集 (vocabulary) を提供しようというものです。この schema.org の語彙を利用して、実際のマークアップに Microdata を追加する具体例をいくつか考えてみました。 schema.org の アイテム型 (item type) は 階層 (hierarchy) のかたちで定義されています。型ごとに独自の プロパティ が定義され、上位の型のプロパティは下位の型に引き継がれます。最上位は Thing という汎用の型で、name、url、image、description というもっとも基本的なプロパティが定義されています。そしてその下に CreativeWork、Event、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
