タグ

ブックマーク / creazy.net (13)

  • Movable Typeで記事中の画像に遅延ロード効果の「Lazy Load」を一括適用する方法 | Creazy!

    MovableTypeのカスタマイズ情報などで大変お世話になっている小粋空間さんで、こんな記事があがっていたので反応してエントリーしてみます。 ・画像を遅延ロードする定番jQueryプラグイン「Lazy Load」: 小粋空間 ・jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法: 小粋空間 画像を遅延ロードさせて、ページ全体の表示速度を向上させるテクニックとして “かつて” 定番とされていた「Lazy Load」という手法、およびjQueryプラグインがあるのですが、最近のブラウザでは Lazy Loadが発動する前に画像を読み込みにいってしまうので、実際あまり効果ないよね?というか無駄なリクエストが増えちゃうよね?というのが、ある意味 Lazy Load 流行の終わりだったかと思います。 Lazy Load の jQueryプラグインの作者のコメントがこちら。 Late

    Movable Typeで記事中の画像に遅延ロード効果の「Lazy Load」を一括適用する方法 | Creazy!
    maRk
    maRk 2013/06/08
    regex_replace とくれば、プラグイン候補でしょうか。pluginかわいいよ
  • MovableTypeにFacebookのOpen Graph protocol(OGP)を対応させる方法 | Creazy!

    【2012/12/02:追記】 記事文の最初にでてくる画像URLを抜き出すという目的では、元の正規表現では少々問題があったため修正しました。詳細はMTタグの解説部分のコメントをご確認ください。 ども、ブログご無沙汰気味のヤガーです。 久しぶりにちゃんと技術っぽい事書かないとなぁと思いまして、いまさらですがOGP対応の話題など取り上げたいと思います。 といっても、すでに詳しく書かれているページもたくさんあるでしょうから、今回はボクがブログで使用しているMovableTypeでの実装方法にフォーカスしています。 いきなりですが、個別ブログ記事テンプレート用の完成版のソースです! <meta property="og:title" content="<$MTEntryTitle remove_html="1"$>" /> <meta property="og:type" content="ar

    MovableTypeにFacebookのOpen Graph protocol(OGP)を対応させる方法 | Creazy!
    maRk
    maRk 2013/01/30
  • 広角24mmから15倍ズームまでこなす万能コンデジ「FinePix F300EXR」 | Creazy!

    みんぽす経由でFUJIFILMのコンパクトデジタルカメラ「FinePix F300EXR」を1ヶ月間お借りして試してみました。結構前から持ち歩きに便利なコンデジを探し続けているので、広角だったり高感度だったり求める仕様が絞りこまれてきているので、カタログスペックがどうこうというより触ってみてどうだったかという肌感覚でレポートしたいと思います。 外観写真 まずは、体の写真から。 光学15倍ズームレンズを搭載しているデジカメで最小サイズだそうです。全体的に丸みがあって持った感じも悪くない感じでした。 広角24mmから光学15倍ズーム このカメラの最大の売りは、やはり広角24mmから光学15倍ズームまでの守備範囲の広さでしょうか。自分の中でコンデジに求める条件として「子供といるときにサッと出して撮れる」という部分が重要だったりするのですが、大体カメラを向けるとワラワラと寄ってきちゃうので広角で

    広角24mmから15倍ズームまでこなす万能コンデジ「FinePix F300EXR」 | Creazy!
    maRk
    maRk 2010/11/10
  • 【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ) [C!]

    MovableType 小技集 【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ) ソーシャルメディアの各サービスがこぞって「いいね!」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思います。 目次(兼ショートカット) TwitterTwitterボタン」 Facebook「Share」「Like(いいね!)」 mixi「mixiチェック」 GREE「Social Feedback(いいね!)」 Evernote「Site Memory(Clip)」 Google+「+1」 Tumblr「Share on Tumblr」 Pinterest

    【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ) [C!]
  • 余計なトラッキング用パラメーターを取り除くUserScript | Creazy!

    前に、FeedBurnerのトラッキング用パラメーターを取り除くUserScriptというのを作ったんですけど、これはFeedBurnerだけをターゲットにスクリプト書いてたので、もうちょっと汎用的に作ってみました。 インストールはこちらからどうぞ。 http://userscripts.org/scripts/source/76942.user.js ※Firefox+Greasemonkeyで動作確認しています。Safari+GreaseKitChromeでも動くんじゃないかな。 パラメーターの削除は2段階になっています。 ステップ1)Canonical URLが指定されてたらそのURLにリダイレクト そのページのパーマリンクがCanonical URLとして指定されており、そのURLと異なるパラメータが付いている場合は Canonical URLにリダイレクトします。 というか、こ

  • 第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法 ::: creazy photograph

    前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第11回:引用(blockquote)を簡単にするブックマークレット 今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符(“”)」で囲ったようなデザインにする方法を紹介します。 最近は良く見かけるデザインだし、方法も色々あるんだろうけど何パターンか作ってみようと思います。 1)左上に「“」を表示させる まずは一番簡単そうな左上コーナー1カ所に引用符を表示してみます。 使用した画像はこちら。 完成したのがコチラ。 HTML例 <blockquote cite="http://creazy.net/" title="creazy photograph"> <p

  • Twitter @Anywhereをブログのコメントシステムにする方法 | Creazy!

    Welcome to @Anywhere | dev.twitter.com もはや、WEB界隈ではコミュニケーションプラットフォームとして定着しつつあるTwitterですが、先週、自分のサイトにJavaScriptを使って簡単にTwitter機能を導入できる@Anywhereというサービスが発表されました。こちらにドキュメントが公開されているのですが、サンプルコードがまともに動かなかったり、APIの説明が不十分だったり、今すぐに導入するのはかなりハードルが高いです。 というわけで実際にサンプルを紹介する前に、日人に非常に分かりやすいエントリーを2つほど紹介しますので、そちらで基的な使い方を覚えていただければと思います。 ・TwitterAPI のドキュメント「Getting Started with @Anywhere」日語訳 – WebOS Goodies ドキュメントを日

    Twitter @Anywhereをブログのコメントシステムにする方法 | Creazy!
  • ちょっとまった!→FeedBurner経由の分散したブックマークを一つにまとめる方法 | Creazy!

    つい先日、FeedBurnerのトラッキング用パラメーターを取り除くUserScriptというのを公開したのですが、FeedBurnerやTwitterFeedが勝手に追加してくるパラメーターがウザイと感じている人が多いようですね。んで、ボクの書いたUserScriptはクライアント(閲覧者側)の対応方法だったんですけど、サイトオーナー側の対応方法としていくつかエントリーがでてきました。 同じエントリへのはてブがバラバラに付く | Shin x blog FeedBunner経由の分散したブックマークを一つにまとめる方法 しかーし、ちょーっと待ったー! どちらもメインでは .htaccess によるリダイレクトで対応する方法を紹介しているんですね。でも、これってすっごく余計な事をしている気がするのです。 今回、問題になっている「utm_source」などのパラメーターはGoogle Ana

    ちょっとまった!→FeedBurner経由の分散したブックマークを一つにまとめる方法 | Creazy!
  • 【bit.ly対応版】見ているページをReTweetするブログ用ボタン | Creazy!

    前に、見ているページをTwitterに投稿するBookmarkletとブログ用ボタンというエントリーを書いたのですが、もう少し機能改善したものを紹介します。 以前のサンプルでは、自分のTwitterアカウントに向けてReTweetしてもらうようにBookmarklet形式で簡易実装したのですが、見ているページのURLは特に加工せずそのままtwitterのフォームにセットしていました。 (長いURLはtwitterが自動的にbit.lyに変換してから送信される) ですが、このURL短縮は送信後に処理されるため入力中の文字数カウントでは長いURLのままカウントされており、引用などをくっつけてRTしたい場合は、使用可能文字数が少なくなってしまっています。 ですので、もうちょっとJavaScript側で処理を追加し、bit.lyのAPIを使って短縮化したURLをセットするようにします。 bit.l

    【bit.ly対応版】見ているページをReTweetするブログ用ボタン | Creazy!
    maRk
    maRk 2009/09/09
  • MovableTypeとFeedburnerで複数のRSSを配信開始 | Creazy!

    リニューアルの準備として、前にカテゴリーを整理したんですが、今回はFeedの整理です。前から「RSSでは技術系のエントリーだけ読みたい」という話が聞こえてきたりしたのですが、技術系エントリーを読むような人はRSSのフィルタリングくらい自分でしろよと思わないでもないですが、それで購読をためらわれているのであればもったいないなと思いまして。 カテゴリーは結構細分化してしまったので、全てのカテゴリー毎にRSSを作るのはちょっと・・・と思ったので2種類だけ増やしました。 全てのエントリー 今までと同じ、全カテゴリーのエントリーを含むフィードです。 そんなにエントリー数多いわけではないので、普通はこちらでいいと思います。 プライベートパック 日記や写真/カメラ、ガジェットなど、どちらかというとプライベートよりな内容です 次のカテゴリーを含みます:blog、camera、foto、gadget、inf

    MovableTypeとFeedburnerで複数のRSSを配信開始 | Creazy!
  • MovableTypeでカテゴリーを整理した一部始終 | Creazy!

    先日、ブログデザイン勉強会に参加したこともありますが、格的にリニューアルを考えています。 勉強会ではブランディングとかデザインによるイメージ作りがメインになりそうなので、それとは別に機能的な部分のリニューアルも個人的に進めていこうと思っています。 まず、第一に手を付けたのがカテゴリーの見直しです。いままでは8つのメインカテゴリーを作っていて、サブカテゴリーを合わせると23個くらいありました。数だけみると、まあ一般的な使い方かな?と思うのですが、今回このカテゴリーをもっと細分化してしまおうと思っています。 理由は色々ありまして・・・、長くなりますが手順とともに書いていきますので、興味の無い人は必要な部分だけ読んでいただければw ※ちなみにMTに関する説明はversion3.3系になっております。最新のMT4では状況が違うと思います。 カテゴリー一覧、タグクラウドなんて誰もクリックしないでし

    MovableTypeでカテゴリーを整理した一部始終 | Creazy!
    maRk
    maRk 2009/04/07
    {カテゴリーとかタグというものはメタ情報}
  • ブログの更新を自動通知する仕組みの違い Linkback/TrackBack/PingBack/RefBack | Creazy!

    昨日トラックバックに代わる仕組みが欲しいと思って、サクッと「LinkBack.JS」なんてものをでっち上げたんですが、その中で@akkyさんからコメントで良い情報を頂きました。 TechnoratiのLink Cosmosというのが類似のものですね。linkbackでもいいかと思ったのですが、linkbackはtrackbackやpingbackを含む総称でもあるようです。 via: Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示 ::: creazy photograph ボクがトラックバックから連想して適当につけた「LinkBack」というのが、TrackBackやPingBackを総称する意味で使われているとの事。 正直、名前はどうでも良いって言っちゃーおしまいなんですが、気になって調べて見ると英語Wikipediaに良くまとまっていまし

    ブログの更新を自動通知する仕組みの違い Linkback/TrackBack/PingBack/RefBack | Creazy!
    maRk
    maRk 2009/02/10
  • Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示 ::: creazy photograph

    [追記:2009/02/08] エントリータイトルがタイポしていましたので直しました。非リンク→被リンク。 お恥ずかしい・・・。 [/追記] 先日、Delicious被ブックマーク数画像取得APIへのアクセス状況でもお伝えした通り、当ブログを運営しているレンタルサーバーがスゴい遅いです。APIや個人サービスを同じサーバーで運営しているのが原因ですが、なんとか負荷を減らしたいと思っています。 レンサバなのでサーバー側のチューニングなど(FastCGIとかMemcachedとか)はできない状態ですので割と小手先の対応になってしまうのですが、一つ目の手段としてコメントを TypePad Connect にしてみました。それほどコメントの多いブログではないですが、少しは動的なアクセスが減ったような気がします。んで、TypePad Connectを使ってすぐに思ったのが、トラックバックをASPしてく

    Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示 ::: creazy photograph
    maRk
    maRk 2009/02/10
    Disqusと思たら、コメントにありましたね
  • 1