スクリーンショット撮影&編集 Chrome拡張機能「Nimbus Screenshot」

スクリーンショット撮影&編集Chrome拡張機能「Nimbus Screenshot」の紹介。

様々な方法でスクリーンショットの撮影ができる。そして、即編集できる。編集画像はGoogleドライブ、或いはローカルに保存できる。

Nimbus Screenshot - Chrome ウェブストア

スクリーンショット撮影

116045930364_ca94985873_o.png

  • Visible part of page (見えている範囲のページ)
  • Selected area (エリアを選択)
  • Selected & Scroll (エリアを選択&手動スクロール)
  • Entire page (ページ全体 → 撮影しながら自動スクロール)

編集

216480721718_8a338e95b4_o.png

  • 拡大/縮小
  • サイズ変更
  • 切り抜き
  • Pen書き
  • 四角描画(角丸可)
  • 円描画(円/楕円)
  • 線描画
  • 矢印描画
  • 文字入れ
  • 吹き出し
  • ★描画の太さ・文字サイズ調整
  • ★色調整
  • ★ぼかし調整
  • ★影付き調整
  • ★フィルター調整
  • ★undo/redo/all-undo
  • ★連番表示

オプション

316482247479_2651d83b49_o.png

保存画像に関し、以下のような設定が可能。

  • 形式の設定 → jpeg/png
  • 品質の設定
  • ファイル名のルールの設定

サクサク動作で使い勝手もよいので、是非お試しあれ。

admin
タグ:Google chrome
2015/02/28 05:02 | コメント (0)

ドラッグでスクロール Chrome拡張機能「chromeTouch」

ドラッグでスクロールできるChrome拡張機能の紹介。

上下にスクロールするときに、ホイールをグルグル回したり、或いはスクロールバーを上下したり、”素早く正確に”スクロールしたいときに苛つくことはないだろうか?

ここで是非おすすめしたいのが、余白部分をドラッグ(設定による)してスクロールできるChrome拡張機能・・・

chromeTouch - Chrome ウェブストア

である。スマホのタッチ操作を思わせる。一度利用したら手放せなくなる拡張機能だ。

116480113348_22c7ec8461_o.png

カスタマイズは非常に強力なので、自分にあった挙動になるように設定しよう。

chromeTouch 設定
216480034058_f716881a2d_o.png

316666234371_959d36a6b2_o.png

416481455419_03a0a101ba_o.png

スクロールが、”素早く正確に”行えるようになったはずだ。

admin
タグ:chrome
2015/02/28 02:02 | コメント (0)

安倍政権は詭弁の塊だ!!

安倍政権に限らず、政治とカネの問題は、いつの時代になっても終わりがない。

16665737571_84c3cee63a_o.jpg

それは、抜け穴だらけの法律で、政治資金を規制する”ふり”をしているからである。今回の安倍首相の言い分からも明々白々である。

安倍首相は27日の衆院予算委員会の集中審議で、望月環境相と上川法相がそれぞれ代表を務める政党支部が国の補助金交付企業から寄付を受けていたことについて、「(補助金交付を)知らなければ違法行為ではないということは法律に明記されており、違法行為ではないということは明らかだ」と述べ、問題視しない考えを示した。

「知らなければ違法でない」…首相、問題視せず : 政治 : 読売新聞(YOMIURI ONLINE)

政治家は詭弁の塊であり、国民の常識からは完全に逸脱している。お馬鹿な発言をするのではなく、献金全廃に向けて議論すべきだろう。税金から政治資金を捻出しているのに、まだカネが欲しいとは、さすが政治屋だけのことはある。

admin
カテゴリ:トピックス
タグ:政治
2015/02/28 00:02 | コメント (0)

Google ニュースの「おすすめ」が!?

最近になって、Google ニュースに「おすすめ」なるものが出現している。前からあったような気はするものの、最近は具体的に表示されるようになってきた。

たとえば、こんな感じだ。 ↓

16452091007_beb9acda80_o.png

筆者は、YouTubeでガールズグループ・ソロシンガーの所謂K-POPをよく視聴している。この行動パターンからGoogle ニュースに・・・「おすすめ」だぞ!興味はあるか?と聞かれるのであろう。「はい」とすれば、以降「おすすめ」に関連する記事が表示されるようになる。

このように、ネット上では何らかの”監視”(トラッキング)はつきものであり、利便性が高まるのであれば、ある程度の”監視”は許容の範囲と云えるだろう。但し、悪意を持った”監視”は御免被りたい。

ただ、いくら秘密にしたいと思っても、ネットを活用する以上、ユーザーの知らないところで個人情報は漏洩している。・・・と考えるのが当然だろう。そして、狙われたら、まず間違いなく終わりである。

あなたの個人情報は、様々なところでデータベース化されており、そこが狙われたら終わりなのである。自分だけが必死になって防御をしても限界があるのを知るべきであり、何事も過信をしないことが重要である。漏洩するのは当たり前で、漏洩したらどうしたらよいか?を考えておくほうが現実的なのである。

おっと、話が横道へ逸れてしまった。

admin
カテゴリ:ウェブサービス
2015/02/27 04:02 | コメント (0)

Tumblr サムネイル付最近の記事を表示する

Tumblrでサムネイル付最近の記事を表示する方法を紹介する。

これを実現するためには、忍者レコメンドと云うサービスを利用すればよい。強力なカスタマイズ機能が用意されており、様々なレイアウトで表示することが可能である。表示速度も全く問題はない。勿論、レスポンシブ対応である。 (Tumblr限定サービスではありません・・・)

表示例 - パソコンの場合
116657731912_2dee896a37_o.png

表示例 - スマホの場合
216472598059_c267b530cc_o.png

設置コード (事例)

{block:PermalinkPage}

<!-- 最近の記事 開始 -->

<h3 style='margin:1.5em 0 1em;'>最近の記事</h3>

<div class="ninja-recommend-block" id="4504182a5c883fad4fc026650aaa4f19">
  <script type="text/javascript" src="http://rcm.shinobi.jp/js/imp.js"></script>
  <script type="text/javascript" src="http://rcm.shinobi.jp/r/4504182a5c883fad4fc026650aaa4f19"></script>
</div>

<!-- 最近の記事 終了 -->

{/block:PermalinkPage}

見栄えはよくなるが、当然のことながらサムネイル画像は単に縮小して表示しているだけなので、そのへんは頭に入れておいたほうがよいだろう。

忍者サービスには便利なツールがたくさんあり、”忍者おまとめボタン”も利用している。いずれのツールも一旦コードを設置すれば、管理画面でいつでもカスタマイズを含む管理が可能なのでたいへん重宝する。

admin
カテゴリ:ブログサービス
タグ:忍者 tumblr
2015/02/27 02:02 | コメント (0)

Tumblr サムネイル付関連記事を表示する その2

Tumblrでサムネイル付関連記事を表示する方法を紹介する。

Install - tumblr-in-link - How to install In-Link - In-Link: Display Your Tumblr Related Posts - Google Project Hosting

Tumblrユーザーではお馴染みの関連記事を表示するサービスであるが、「version 2.0」を利用することで、サムネイル付で表示することが可能になる。勿論、レスポンシブ対応である。

表示例 - パソコンの場合
116038262453_02665e3048_o.png

表示例 - スマホの場合
216036316564_2281262545_o.png

設置コード (事例)

{block:PermalinkPage}

<!-- 関連記事 開始 -->
{block:HasTags}
<h3 style='margin:1.5em 0 1em;'>関連する記事</h3>
<!− Start In-Link widget −>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://tumblr-in-link.googlecode.com/svn/branches/Version 2.0/js/tumblr-in-link.2.0.js?num=10&len=60&css=dark&title=&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<!− End In-Link widget −>
{/block:HasTags} 
<!-- 関連記事 終了 -->

{/block:PermalinkPage}

レイアウトのカスタマイズはCSSで行う。今回は、150x250枠に150x150のサムネイルを表示する。当ブログでは、”text”と”video”しか利用していないが、videoのサムネイルが150x150に対応していないので別途独自にサムネイルを用意した。 (←文中の数値の単位はピクセル)

CSS (事例)

#tumblrinlink {
    border-top: none !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-title {
    visibility: hidden !important;
    display: none !important;
}
#tumblrinlink ul#inlink-list {
    margin: 0 !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-logo {
    clear: both !important;
    padding-top: 5px !important;
}
#tumblrinlink li.inlink-item p {
    height: 90px !important;
    font-size: 95% !important;
    font-weight: normal !important;
    line-height: 1.4em !important;
}
li.inlink-item {
    display: block !important;
    float: left !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    height: 250px !important;
    border: none !important;
    padding: 0px !important;
    width: 150px !important;
    position: relative !important;
    overflow: hidden !important;
}
li#text.inlink-item img {
    height: 150px !important;
    width: auto !important;
    max-height: 150px !important;
    max-width: 800px !important;
}
li#text.inlink-item a:hover img {
    opacity: 0.75 !important;
}
#tumblrinlink a, .ninja-recommend-block a, #tagCloud a {
    color: #222 !important;
}
#tumblrinlink a:hover, .ninja-recommend-block a:hover, #tagCloud a:hover {
    color: #2a8998 !important;
}
li#video.inlink-item {
    background: url("http://static.tumblr.com/k7wp1u5/us8nkeh9u/film.png") no-repeat 0 0 transparent !important;
}
li#text.inlink-item {
    background: none !important;
}

見栄えはよくなるが、当然のことながらサムネイル画像は単に縮小して表示しているだけなので、そのへんは頭に入れておいたほうがよいだろう。

Tumblr サムネイル付関連記事を表示する その1: Jkun Blog
Tumblr サムネイル付関連記事を表示する その2: Jkun Blog

admin
カテゴリ:ブログサービス
タグ:tumblr
2015/02/27 01:02 | コメント (0)

TumblrにFacebookコメント欄を設置する方法

Tumblrでは、何故か?DISQUSを導入するのが一般的ではあるが、ここではFacebookのコメント欄を設置する方法を紹介する。

Facebook Developers

116473422810_7a490b0703_o.png

上メニューの「My Apps」→「Add a New App」でアプリを追加する。ここでは、アプリケーションIDを取得するだけでよい。

次に、ソーシャルプラグイン - Comments でコメント欄を生成するコードを取得する。

216464903099_3417c356dc_o.png

  • ”URL to comment on” : ブログのURLを指定する。 (後でパーマリンクに置き換える)
  • ”Width” : 横幅をピクセル値か%で指定する。ピクセル値の場合は数字(ex.600)で、%の場合は数字+%(ex.100%)で指定する。ここでは、レスポンシブテーマを前提に、100%と指定する。
  • ”Number of Posts” : 初期表示コメント件数を指定する。
  • ”Color Scheme” : ブログのテーマが明るい系か暗い系か指定する。

「Get Code」でコードを取得する。

317846434895_d171ac713f_o.png

<body class="{block:IndexPage}page-index{/block:IndexPage}{block:PermalinkPage}page-permalink page-{PostID}{/block:PermalinkPage}">

<!-- Facebookスクリプト 開始 -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=xxxxxxxxxxxxxxxx&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebookスクリプト 終了 -->

TumblrのHTML編集で・・・
取得した上のコードは、”body”タグの直後に挿入する。(↑ 事例)

{block:PermalinkPage}

<!-- Facebookコメント 開始 -->
<div style='max-width:600px;margin:1.5em 0 1em;'>

<div class="fb-comments" data-href="{Permalink}" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

</div>
<!-- Facebookコメント 終了 -->

<style>iframe.fb_ltr {width: 100% !important;}</style>

{/block:PermalinkPage}

取得した下のコードはコメントを表示する場所に挿入する。(↑ 事例)

  • ”max-width:600px” : 横幅いっぱいに表示するが、最大600ピクセルに制限する。
  • ”{Permalink}” : URLはパーマリンクに置き換える。
  • ”<style>iframe.fb_ltr {width: 100% !important;}</style>” : IEで表示した際に横幅が限定されてしまうのを回避する。

パソコンの場合
416686919502_007ffb5695_o.png

スマホの場合
516500532690_39eceb3a44_o.png

こんな感じで表示される。

※コメント投稿通知が必要であれば、Comment Moderation Tool → [Settings] のモデレータに自分を追加すればよい。 ↓

616047829784_8ce32d127b_o.png

※正常に動作しない場合の対処方法
以下のコードを追加する。

<head>
・・・
<meta name="text:OGP Facebook Admin Number" content="" />
<meta name="text:OGP Facebook App Number" content="" />

<meta property="fb:admins" content="{text:OGP Facebook Admin Number}" />
<meta property="fb:app_id" content="{text:OGP Facebook App Number}" />
・・・
</head>

↓ テーマ編集画面で ”admins” と ”app_id” を設定する。

716668658661_8249a3f0e5_o.png

”admins”はアドレス欄に・・・

http://graph.facebook.com/xxxxxx (xxxxxx:ユーザーID)

と打ち込めば表示される。”app_id”は、アプリケーションIDのこと。

Comment Moderation Tool では、一括でコメントの管理が行える。

admin
カテゴリ:ブログサービス
タグ:Facebook tumblr
2015/02/26 07:02 | コメント (0)

TumblrにGoogle+コメント欄を設置する方法

Tumblrでは、何故か?DISQUSを導入するのが一般的ではあるが、ここではGoogle+のコメント欄を設置する方法を紹介する。

コメント欄を設置したい場所に以下のコードを埋め込むだけ。

{block:PermalinkPage}

<!-- Google+コメント 開始 -->
<h3 style='margin-top:1.5em;'>コメント</h3>
<div style='margin:1em 0 1em;'>
※モバイル端末でコメント欄がはみ出している場合は、一旦デバイスを傾けてください。最適なサイズに自動調整されます。
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class='g-comments' 
data-first_party_property='BLOGGER' 
data-view_type='FILTERED_POSTMOD' 
data-width='600' 
data-href='{Permalink}'>
</div>
<!-- Google+コメント 終了 -->
<div style="clear: both;"></div>

{/block:PermalinkPage}

メモ

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

↑ Google+のスクリプトが既に定義されている場合は不要。

data-width='600'

↑ 横幅の初期値。 (ピクセル)

パソコンの場合
116433677457_7b803b2e4a_o.png

スマホの場合
216640994815_4c14b1789e_o.png

横幅の初期値は600ピクセルとなり、表示領域のサイズが変わると、ピッタリサイズに自動調整される。なお、コメントがない場合に、下の余白が少々目立つが回避策はない。

admin
カテゴリ:ブログサービス
タグ:Google+ tumblr
2015/02/25 04:02 | コメント (0)

「Inbox」をスマホとパソコンで試してみた

Googleが発表した、Gmailの後継サービスであるInboxを試してみた。とりあえず、スマホ(Android 4.4)にInboxアプリをインストールして、パソコンからはウェブブラウザでInboxにアクセスする。とは云っても、現在Inboxは招待制なので、Googleに申請する必要がある。

  • Gmailから「inbox@google.com」に空メールを送信する。件名、内容は空白でよい。
  • すぐに、受付完了の返信が届く。
  • 2日程度で「Your invitation to try Inbox by Gmail」と云う件名のメール (↓スクリーンショット) が届く。Androidアプリインストール用リンク・iOSアプリインストール用リンク・ウェブバージョン用URLが記載されているので、必要に応じてクリックすれば即利用開始となる。

116452338859_b66abf81a8_o.png

特長としては、カレンダーとメールの連携が可能になり、リマインダーの作成が直接行えるなど、メール+スケジュール管理アプリのような性格を持つ。利用できる環境は、AndroidおよびiOS端末、ウェブブラウザのChrome、Firefox、Safariである。

Androidアプリ Inbox
216015989834_756318017b_o.png >

InboxウェブバージョンInbox
316636873021_0f38b7b7a0_o.png

興味のある方は是非お試しください。

admin
カテゴリ:ウェブサービス
2015/02/24 23:02 | コメント (0)

YouTubeをHTML5プレーヤーで再生する方法

YouTubeを”HTML5 プレーヤー”で再生する方法・・・

対応ブラウザは以下のとおり。”Google Chrome”については、”HTML5 プレーヤー”がデフォルトになっている。

Google Chrome
Microsoft Internet Explorer
Firefox
Opera
Apple Safari

まずは、↓をクリックする。

YouTube HTML5 動画プレーヤー

116623375435_decc62a0c3_o.png

そして、「HTML5 プレーヤーをリクエストする」をクリックするだけ。

216436296458_a1e156783b_o.png

再生スクリーンを右クリックすれば、”HTML5 プレーヤー”で再生されていることが分かる。

admin
カテゴリ:ブラウザ
2015/02/23 13:02 | コメント (0)
カテゴリ
最近のコメント
2017-10-25 管理人
翻訳URL Google と Bing
2017-10-25 石川通隆
翻訳URL Google と Bing
2017-10-15 管理人
人参の ”おじや”
2017-10-15 石川通隆
人参の ”おじや”
※ご質問等、管理人の返信が必要な場合は、その旨お書きください。
このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
筆者プロフィール