タグ

ブックマーク / hyper-text.org (8)

  • Twitter カード 7タイプの使い方をカード種別ごとに解説するよ

    Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日語で書き直していますので完全な翻訳ではありません。 Twitter Cards (Twitter カード)、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので (公式な日語ドキュメントも今のところないし)、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP (Open Graph Protocol) を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと

    Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
  • それは robots.txt の問題じゃなくて...

    なんか robots.txt がホットなキーワードになっていたので今さら知ったのですが、通信機器レンタルサービスの会社さんがクレジットカード情報をど派手に流出させたた件で、サイトに設置されていた robots.txt が色々と残念な件について話題になっていました。 robots.txt : はてなブックマーク 不正アクセスによるお客様情報流出に関するお知らせとお詫び : エクスコムグローバル株式会社 情報が流出した直接の原因は SQL インジェクションによる攻撃を受けたとのことで、同サイトの robots.txt が何の経緯で話題になったのかはわかりませんが、robots.txt の内容から、CMS に Drupal を使ってるらしいことや、Drupal のパッケージに同梱されてくる robots.txt ほぼそのまま設置されている件、さらにその、Drupal の古いバージョンには XSS

    それは robots.txt の問題じゃなくて...
  • CSS で作る Tumblr モバイルアプリ風メニュー

    1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ (Tumblr for Android) の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript (jQuery 使用) で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE? 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね (画像は 「Tumblr Staff」 から

    CSS で作る Tumblr モバイルアプリ風メニュー
  • CSS で作るスマートフォン向け片手操作メニュー

    ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox

    CSS で作るスマートフォン向け片手操作メニュー
  • Dropbox にファイルを置くと自動で色々な処理を実行してくれる Dropbox Automator

    Dropbox Automator は、Dropbox の指定したフォルダにファイルがアップロードされたときに、あらかじめ指定しておいた各種処理を自動的に実行できるサービスです。 あけましておめでとうございます。新年初エントリーですが、TechCrunch 等で取り上げられていた、「Dropbox Automator」 を試してみたので紹介。 Dropbox Automator は、Dropbox の指定したフォルダにファイルがアップロードされたときに、あらかじめ指定しておいた各種処理を自動的に実行できるサービス。例えば、画像をアップしたら自動的に Flickr にアップしてくれたり、文書ファイルをアップしたら、自動的に PDF に変換しておいてもらうといったことが可能になります。 Dropbox AutomatorはDropbox専用のIFTTTみたい Automatisiere dei

    Dropbox にファイルを置くと自動で色々な処理を実行してくれる Dropbox Automator
  • 5分でわかる Tumblr の始め方 (2012年改訂版)

    2009年に今回の記事の元記事 「5分でわかる Tumblr の始め方」 に関して、古くなった情報を更新しようと思います。 2011年も終わりですね。今年最後の投稿は過去記事の改訂版で締めます。 さて、もう 3年近く前の 2009年に今回の記事の元記事 (5分でわかる Tumblr の始め方) を書いたわけですが、Firefox もバージョンアップして Greasemonkey 周りのスクリプトなどが色々面倒な感じになっていたりしますので、ここらで古くなった情報を更新しようと思います。 元の記事で情報として古くなっている 「Tumblr をもっと便利に使う」 の項目を中心に書き換えていますので、それ以外の部分は元記事を見てください。 元記事 5分でわかる Tumblr の始め方 Tumblr をもっと便利に使う さて、しばらく使っていると、ダッシュボードをもっと快適に閲覧したいとか、簡単に

    5分でわかる Tumblr の始め方 (2012年改訂版)
  • HTML5 でやりがちな間違い

    HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes : HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日語にしたものではあり

    HTML5 でやりがちな間違い
  • HTML5 におけるアウトラインに関して簡単解説

    HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは? アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう

    HTML5 におけるアウトラインに関して簡単解説
  • 1