スクリーンキャプチャをGIFアニメにする方法
スクリーンキャプチャをGIFアニメにする方法を紹介します。 サンプル １．はじめに デスクトップ上での操作を動画にしたいことがあると思いますが、動画を作るのは面倒です。 ということで、スクリーンキャプチャをGIFアニメにする方法を紹介します。 Windows/Macのどちらでも利用できます。 ２．スクリーンキャプチャをGIFアニメにする スクリーンキャプチャをGIFアニメにするには「LICEcap」というソフトを利用します。 LICEcap LICEcapのページにアクセスして「Download」にあるリンクをクリックしてダウンロードします。 ダウンロードしたファイルを実行します。 以下、Windowsへのインストール手順です。 「I Agree」をクリック。 「Next」をクリック。 「Install」をクリック。 これでインストールされたので「Close」をクリック。 LICECapを
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N
link要素「rel="canonical"」のまとめ
link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、検索エンジンでは別のURLとしてインデックスされます。 検索エンジンのインデックス内での重複コンテンツ問題 link要素の「rel="canonical"」を利用することで、URLの正規化が行われ、重複コンテンツ問題を解消します。 解消イメージ 2009年2月、Google、Yahoo!、Microosftの大手検索エンジン企業が、URLの正規化に対応する共通の取り組みとして、「rel="cano
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
ブラウザから実行可能な画像形式一括変換ツール
ブラウザから実行可能な画像形式一括変換ツールをPerlで作ってみました。 １．機能 指定したディレクトリにある「変換前の拡張子（ピリオドは不要）」の画像ファイルを、「変換後の拡張子（ピリオドは不要）」のファイルに一括変換して、同じディレクトリに出力します。 変換状況は下のスクリーンショットのように順次表示します。 ディレクトリは絶対パス・相対パスのいずれも可能です。ディレクトリは再帰的に検索するので、指定したディレクトリ配下のすべての画像ファイルが対象になります。 変換後の同名ファイルがある場合、上書きします。 必要に迫られてとりあえず作ったものなので、細かいチェックはできていません。レンタルサーバによっては長時間実行すると500エラーになるかもしれません。 ２．実行環境 このツールの実行には、PerlとImageMagick（PerlMagick）が必要です。 余談ですが、ImageMa
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
WordPressの記事ページに投稿者名を表示する
WordPressの記事ページなどに投稿者名を表示するカスタマイズを紹介します。 下のスクリーンショットは、当ブログで配布しているテーマを利用した変更前後のサンプルです。変更後は記事本文下に記事投稿者名が表示されています。 変更前 変更後 １．記事投稿者名の設定 まず、記事投稿者名を設定します。管理画面の「ユーザー」→「あなたのプロフィール」または「ユーザー一覧」から該当のユーザーをクリック。 「名前」項目に表示されている「ユーザー名」「名」「姓」「ニックネーム」「ブログ上の表示名」を設定します。すべてを設定する必要はなく、利用したい項目のみを設定します。 通常は「ブログ上の表示名」を利用します。「ブログ上の表示名」は、 ニックネーム ユーザー名 名 姓 名+姓 姓+名 のいずれから選択できます。各項目を入力した時点で選択可能になります。 ２．記事投稿者表示用テンプレートタグ 次の中から任
複数のWordPressをまとめて管理できる「ManageWP」
複数のWordPressを一括管理できるサービス「ManageWP」を紹介します。アカウントをとってちょっと操作してみましたが、複数のウェブサイトをWordPressで管理している人にとってはかなり便利な気がします。 ManageWP ManageWPは一括管理可能な画面を提供します。一括管理できるということは、複数のWordPressにログインせずに済むというメリットがあります。たとえば複数サイトに異なる記事を投稿したい場合など、ManageWPにログインして投稿先のWordPressを選択して投稿すれば、複数のWordPress管理画面を横断する必要がなくなります。 トライアル（2週間、10サイトまで）は無償ですが、基本は有償です。価格は最後に紹介します。 以下、操作方法です。 １．サインアップ ManageWPのページにアクセスして「Sign Up」をクリック。 ユーザー名・メールア
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
Facebook「シェア」の使い方徹底解説
Facebookのニュースフィードやタイムラインに表示されている「シェア」の使い方を詳しく解説します。 １．基本 まず基本情報として「シェア」というリンクがどこに表示されているか、下のスクリーンショットでご確認ください。 タイムラインに表示されている「シェア」 ニュースフィードに表示されている「シェア」 現在、Facebookで非推奨となっている「シェア」ボタンのことではありません。 Facebook Share（非推奨） 以下、この「シェア」リンクを使った操作方法を詳しく解説します。「シェア」の機能や「シェア」と「いいね！」との違いなどについては、他のサイトで良記事が公開されているので、この記事の９項にあるリンクから辿ってください。 ２．登場人物 動作確認はいつもの通り、テストユーザーを使っています。 説明で登場する人物は以下です。 Davidさん：ウォールにネタを投稿する人 Karen
Movable Type5.0のリスト画面をカスタムフィールドの値で絞り込める「AddCFQuickFilterプラグイン」
Movable Type5.0のブログ記事一覧などのリスト画面をカスタムフィールドの値で絞り込める「AddCFQuickFilterプラグイン」を公開します。 １．機能 Movable Type5.0の記事一覧画面の「絞込み」に、カスタムフィールドの項目を表示します。 表示するタイプは「テキスト」「ラジオボタン」「セレクトボックス」の3種類です。「テキスト」の場合は、条件を入力するテキストフィールドを表示します。 「ラジオボタン」「セレクトボックス」の場合はオプションを表示します。 こんな感じで絞り込めます。 動作確認はMT5.06で行っています。今のところMT5.06以下のバージョンでは動作保障していませんので注意してください。 ２．価格 価格：\3,000-（税別）/1インストールM、T購入前に必ず動作確認してください） ３．プラグインのダウンロード 下記のリンクをクリックして、プラグ
Movable Typeの画像アップロード時にリサイズできる「UploadImageResizerプラグイン」
Movable Typeの画像アップロード時にリサイズ可能な「UploadImageResizerプラグイン」を公開します。 １．機能 アイテムのアップロード画面で画像をアップロードする際、「アップロード画像オプション」をチェックします。 チェックすると、アップロード画像をリサイズするためのオプションが表示されます。各フィールドに値を設定してアップロードすれば、指定したサイズでアップロードされます。 このプラグインは、アップロード後の画像をリサイズするのではなく、アップロード時にサイズ指定するものです。アップロード後に画像をチェックしながらリサイズしたい場合は、インターネットに接続された環境であれば「Pixenateプラグイン」を推奨します。 Movable Typeでアイテム画像を編集できる「Pixenateプラグイン」 また、UploadImageResizerプラグインは画像の拡大は
Movable Typeで選択したカテゴリの親カテゴリを一括選択できる「ParentCategorySelectorプラグイン」
Movable Typeで親カテゴリを一括選択できる「ParentCategorySelectorプラグイン」を公開します。 １．機能 ブログ記事投稿画面のカテゴリ選択で、チェックしたカテゴリの親カテゴリを選択します。 次のようにチェックボックスの上でチェックします。 チェックすると、親カテゴリまでまとめて選択されます。 チェックした子カテゴリのチェックをはずせば、親カテゴリの選択も解除します。親カテゴリが選択されたあと、個別にチェックをはずすことも可能です。チェックボックスでない部分（カテゴリ名など）をチェックすれば子カテゴリだけを選択することもできます。 また、プラグイン設定画面で、次のようにチェックしたカテゴリを主カテゴリにすることもできます。デフォルトの動作は最上位の親カテゴリが主カテゴリになります。 このプラグインはMT5.12で動作します。ブラウザはFirefox8のみ正常に動
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
