Instagramのビデオをサイトやブログに埋め込むシンプルな方法 Instagramでのビデオ投稿が先日から開始されましたが、Vineとは異なりInstagramでは現在のところ投稿ビデオの外部サイトへの埋め込みには対応していないようです。 しかし、次のようなシンプルな方法でビデオをウェブサイトブログなどに埋め込むことができます。 例えばInstagramビデオが掲載しているページのURLが下のような場合 http://instagram.com/p/a2rxrjJpOS/ 下のように「embed」と付け足すと埋め込みコンテンツのURLになります。 http://instagram.com/p/a2rxrjJpOS/embed あとは<iframe>を使ってこのURLをセットしてやればいいだけです。 <iframe src="http://instagram.com/p/a2rxrjJp

ギークなWeb制作者のためのアスキーアート専門サイト『WelcomeMat.co』 文字列を使って絵として表現するアスキーアートは、画像が挿入できない場合の代替手段として古くから利用されてきた方法ですが、一部のギークなWeb制作者は特にサイトのHTMLのソースコードの中に訪問者に対してのメッセージを込めた様々なアスキーアートを仕込んでいることがあります。 『WelcomeMat.co』はそんな行為そのものをユーモラスに推奨し、ソースに貼り付けるためのアスキーアートを提供しているユニークでニッチなサイトです。 使い方は気に入ったアスキーアートをコピーしてあなたのHTMLの上の方にペーストするだけ。 これらのアスキーアートは誰でもTwitterを介して投稿できる参加型のサイトという点も特徴の一つです。 アスキーアート系のコミュニティーサイトは多々あるものの、今回のように非常にマニアックな使いど

インストール不要ですぐに使える“Tiny Tiny RSS”のクローン『Yanobs Reader』 今後廃止されるGoogleリーダーの代替ということでこれまでもOld Reader、Feedspot、その他といくつかのRSSリーダーをご紹介してきました。 特に当ブログではなるべくGoogleリーダーに近い旧来型のRSSリーダーをターゲットに紹介してきましたが、まだ取り上げていない強力なRSSリーダーが一つ残っています。 それは『Tiny Tiny RSS』というサーバー設置型のRSSリーダーで、かなり前からオープンソースで開発が進められている老舗的なRSSリーダーです。 Tiny Tiny RSSはGoogleリーダーを凌ぐような高機能っぷりのRSSリーダーでですが、問題は何といってもサーバーを運用していないユーザーは使うことができないということ。 そこで、今回ご紹介したいのがこちらの

FeedlyをGoogleリーダー感のあるスタイルに変えてくれる『Readly』 ニュースリーダーのFeedlyは7月にサービスを終了するGoogleリーダーの乗り換え先として最も注目を集めているそうです。 個人的にはGoogleリーダーのルック&フィールとは相容れないFeedlyはGoogleリーダーの置き換えと呼ぶことはできないと思っていますが、少なくともGoogleリーダー亡き後信頼の置ける運営がある程度期待できるという意味では有力な候補かなと思います。 ただ、FeedlyはGoogleリーダーに比べるとデザイン的にだいぶ洗練されていますが、如何せん作業効率最優先のユーザーからするとこの無駄に小洒落たデザインが頂けないという声も少なくありません。 そんなユーザーにオススメなのがこちらの『Readly』というユーザースクリプト。 Feedlyを固定幅でないGoogleリーダーっぽいレイ

Googleリーダーの代りとしてチェックしておきたい5つのRSSリーダー Googleリーダーの代替リーダーということで先日『Feedspot』と『The Old Reader』の2つを取り上げましたが、その他にWebベースのRSSリーダーということで特にまだあまり取り上げられていないものをいくつかピックアップしてみました。 量が多いので細かいレビューは書きませんが、参考にしてもらえればと思います。 1kpl.us 表示画面はGoogleリーダーに非常に近いです。 フィードはOPMLでインポート可能です。 Rssminer Googleアカウントを使ってログインしてGoogleリーダーからインポートできます。 フィードの読み込みが異様に速いです。 Pheedr 「Minimalist RSS reader」のタイトルが示すようにシンプルでミニマル主義を貫いたRSSリーダーです。 OPMLで

パソコンから離れる際にマウスの動きを監視してくれるサービス『Mouselock』 『Mouselock』は一時的に席を離れる際などにパソコンのマウスやキーボードの動きを監視してくれる簡単なサービス。 利用するにはGoogkeのアカウントを使ってログインします。 すると10個の番号が並んでいるのでその中からどれかを選択します。 この番号はあとでロック解除の際に必要になるので覚えておきましょう。 そしてマウスポインターのマークをクリックするとロックがかかった状態になります。 この状態で少しでもマウスが動いたり或いはキーボードがタイプされたりすると、以下のように画面が変わり爆弾が起動し始めます。 この時先ほど自分が選んだ番号と同じ番号をクリックできればロックが解除されますが、約5秒間の間に解除番号がクリックされなかった場合には「誰かがあなたのコンピュータを使おうとしました」という旨の通報メールが

Dribbbleからダウンロード可能な人気のリソースをブラウズできる『freethroww』 クリエーターやデザイナー御用達のSNSDribbbleにはアイコンやPSDなどダウンロード可能なクリエイティブコンテンツも少なくありません。 そんな中から人気の高いものをピックアップして見やすいようにブラウズできるサイトがこちらの『freethroww』というサイト。 個々のDribbbleページにリンクされており、そこからダウンロードすることができます。 Dribbbleにはダウンロード可能なコンテンツだけを特定してブラウズできるような作りになっていないので、こういうサイトがあると素材探しに便利だと思います。 ちなみに、類似サイトには『Freebbble!』というサイトもあります。

YouTubeの映像とSoundCloudの音声で手軽にリミックスビデオが作れる『Weavly』 『Weavly』はYouTubeの動画やSoundCloudの音声などを自由にリミックスしてオリジナルのビデオコンテンツが作成できるサイト。 ビデオ制作のための本格的なエディタとは違い、簡単操作で手軽に既存のコンテンツをマッシュアップして楽しむことを目的としたサービスです。 ログインしたら、まずはソーズとなる映像を選んでいきましょう。 映像にはYouTubeの動画かLoopcamのアニメーションGIFを素材として利用できます。 検索ワードや動画のURLを指定すると該当する結果が表示されるので、そこから下のタイムラインにドラッグします。 すると、プレビューウィンドウが開くので使う映像の部分を選んで『Confirm』をクリックするとタイムラインに映像がセットされます。 このような要領で映像をどんど

異なるサービス間で手軽に共有フォルダが作成できる『iBeam.it』 『iBeam.it』は様々なストレージサービスやソーシャルメディアに対応した共有フォルダが簡単に作成できるサイト。 通常のストレージなどでは同じユーサー同士であれば共有フォルダを作って自分のファイルを共有相手にシームレスに受け渡すことができますが、相手が別のストレージサービスを使っている場合などではそうはいかず、ファイルの共有リンクを作って相手にそれをダウンロードして貰うほかありません。 さらに、その後フォルダ内のファイルを追加／変更したならば、その都度その更新を相手に知らせるという手間もかかります。 こんな場合に便利なのがこのiBeam.itというサービスで、ホストユーザーが作った共有フォルダをゲストユーザーが自分の使っているサービスのフォルダで受け取れるというものです。 使い方は『CREATE』をクリックして共有した

指定した画像をDataURIスキームに変換してくれるサイト『Duri.me』 『Duri.me』は指定した画像をDataURIスキームに変換してくれるサイト。 DataURIとは画像をbase64でエンコードしたデータそのもので、通常の画像のURLの代わりに使用することでHTMLやCSSに画像ファイル自体を直接埋め込むことができることを意味します。 使い方はページ上に画像を放り込んでアップロードするだけ。 目的に応じ3タイプのボタンをクリックして変換されたデータをクリップボードにコピーして利用できます。 「copy code as base64」がデータ本体、「copy code as image」は<img>タグのsrc属性にデータが挿入された状態、「copy code as CSS」はCSSプロパティのbackground-imageにデータがセットされた状態でそれぞれ出力されます。

ネット上のクライアントに対してPDFを使った超簡単なプレゼンが行える『Nextprev』 『Nextprev』はPDFを元に簡単なプレゼンテーションが行えるツール。 ネットを介して複数のクライアントに対してリアルタイムに同じ画面を共有しながら、非常にシンプルなプレゼンを実現する画期的なサービスです。 まずはプレゼンのホストとなるユーザーがPDFをアップロードするとブラウザで閲覧可能な状態に変換され、同時にそのプレゼンの共有リンクが作成されるので、そのリンクにアクセスするよう共有相手に伝えます。 ホスト側は上部のナビゲーション或いはカーソルキーでPDFのページをコントロールしていくと、同じURLにアクセスしているゲスト側の画面もそれと同期してホストと同じ画面が表示されるというわけです。 （デモが用意されているのでまずは試してみるとよいでしょう） PDFは各ユーザーのブラウザの画面サイズに合わ

登録不要で100MBまでの動画を匿名公開できるアップローダー『VideoPaste.us』 『VideoPaste.us』はプライベートな共有を目的にした動画専用の簡易アップローダー。 登録は一切不要で誰でも100MBまでの動画ファイルをアップロードできます。 動画ファイルはローカルマシンからだけではなく、さまざまなストレージからインポートすることが可能です。 ファイルのアップロードが完了すると同時に動画プレーヤーですぐに再生できるページが作成されます。 （サイズの大きいビデオは自動的に640x480にリサイズされます） あとは適宜、このページのURLを共有相手に教えてやればいいだけです。 作成されたページは24時間有効で、その後自動的に削除されます。 画像の分野では気軽に使える匿名アップローダーが多く存在し、フォーラムや掲示板などではこのようなサービスを利用するのが常ですが、動画となって

Modern UIのボタンが簡単に作れるCSSライブラリ『CSS3 Microsoft Modern Buttons』 『CSS3 Microsoft Modern Buttons』はマイクロソフトの新しいユーザーインターフェースModern UIのデザインを踏襲して作られたCSS/JSライブラリ。 軽量にしてシンプルなライブラリは、扱いやすく簡単にスタイリッシュでフレキシブルなCSSボタンを作成できるように制作されています。 基本的な使い方はアーカイブに含まれているライブラリのコアとなる『m-styles.min.css』を読み込ませます。 （用途に応じて必要な追加CSS/JSをロードします）

指定したWebサイトのバックアップを毎日行なってくれるサービス『Dropmysite』 Dropmysiteは指定したWebサイトのバックアップを定期的に作成しストレージに保存してくれるサービス。 バックアップ作業は月／週／日単位で実行することができ、ストレージ容量はフリーで2GBまで利用可能です。 使い方はアカウントを作成してログインしたら、ダッシュボードからWebサイト／データベース／Eメールのいずれかを選択して適宜設定をしていきます。 Webサイト（FTP）のバックアップはサイト丸ごと或いは指定したディレクトリ単位で行なわれるもので、先ずは目的のWebサイト上のFTPサーバーの設定情報を入力して追加した後、ダッシュボード内のアイコンよりバックアップするディレクトリや実行間隔などが指定できます。 バックアップは『Backup History』ページにそれぞれ保存され、右側のアイコンから

指定した場所のInstagram画像から埋め込みのスライドショーが作成できる『Embedstagram』 Embedstagramは位置情報から検索したInstagram画像を使って埋め込みのスライドショーが作成できるサイト。 まずはスライドショーのタイトルを適当に入力し（タイトルは検索結果に影響しない）、緯度と経度そして半径(m)を指定します。 すると指定した座標情報からInstagram画像を検索して結果と共に埋め込みコードとリンクが作成されます。 あとは適宜ページに合わせて『width/height』属性の値を調整して貼り付ければ以下のような感じで表示されます。 緯度と経度の値を直接入力しなくてはいけないところがちょっと不便ですが、一度コードを作成してしまえばそれで終わりなので、こちらのようなサイトで座標を取得して貼り付ければいいと思います。 同様のツールはすでにいろいろあるようです

最適な文字サイズとコンテンツエリア幅を計算してくれる『Golden Ratio Typography Calculator』 Golden Ratio Typography Calculatorはフォントサイズとコンテンツエリアの幅との互いの最適な数値を導き出す計算機。 同サイトの作者が可読性の高い文字組を考える上で数学的に算出した『黄金比』のアルゴリズムを基にして、もっともバランスの良い見た目の数値が得られるというものです。 左側の入力欄にフォントサイズまたはコンテンツエリアの幅のどちらか、或いはその両方を入力します。 すると、そのフォントサイズに最適なコンテンツエリアの幅、或いはその逆、そしてそれに最適なline-heightと一行あたりのだいたいの文字数が計算され表示されるというわけです。 また、表示フォントがいくつか選べるのでフォントを変えながらチェックすることもできます。 例えば

Dropboxへファイルをアップロードできるリンクを作成してくれる『dbinbox』 dbinboxは自分のDropboxアカウントに誰でもファイルをアップロードできるようなリンクを作成してくれるサービス。 使い方はリンクとなる適当な名前を入力してDropboxにアプリの利用許可を与えれば完了です。 あとは、そのリンクにアクセスすればファイルのアップローダーが開くので、適宜ファイルを選んでアップロードするとそれがDropboxに転送されるというわけです。 アップロードされたファイルは『Apps » dbinbox』というフォルダに保存されます。 Dropboxはダウンロードリンクを作成することで、非会員でもファイルやフォルダをダウンロードさせることが可能ですが、メールの受信箱のように一般的な相手（共有メンバー以外）からファイルを自由に受け付けるような機能はありません。 今回のサービスは極め

好きな言葉をHelveticaでプリントオーダーできるＴシャツショップ『Helvetitee』 定番フォント『Helvetica（ヘルベチカ）』はシンプルで飽きのこないバランスの取れたプロポーションで世界中のデザイナーに愛されているフォントの一つです。 そんなヘルベチカの持つデザイン力にあやかるべく先日開店したのがこちらのHelvetiteeというオンラインのＴシャツショップ。 Ｔシャツ上に置かれているテキストエリアに好きな文字を指定してオーダーすることができます。 もちろんフォントはヘルベチカでプリントされるというわけ。 （必然的に日本語はＮＧでしょう） 世界中どこでも配送料無料で値段は25ポンド（約3,120円）とのこと。 たかがＴシャツに少々高いような気もしますが、そこはやっぱりヘルベチカ。 ヘルベチカの持つイメージを守るためにあえて安売りをせず高めの値段設定をしている、という意図も