機能拡張関連の記事一覧



20150614-FirefoxのアドインFireLinkの設定集-00

私はPCでの普段のウェブブラウジングやWeb制作のブラウザーはFirefoxなのですが、ブログを書くときや、ためになる情報が掲載されているページを共有するときに欠かせないアドオン(機能拡張)があります。

それがFireLinkです。

20150614-FirefoxのアドインFireLinkの設定集-01

開いているWebページのURLやタイトルを好きな形式でコピー出来るアドオンです。

HTML, Markdown, MeidaWiki, PukiWiki といった形式が標準で用意されており、独自のものを作成することが可能です。キーボードによる操作(一時的にON/OFF可能)、タイトルとURLを編集してリンク生成、全てのタブをまとめてコピー、短縮URLの選択、といった便利な機能が用意されています。

FireLink - Copy link with keyboard shortcuts(add-ons for Firefox)


今回は、私が使っているFireLinkの設定を紹介します。

記事の続きを読む




20150507-Evernote-ClearlyでNoto-Sans-Japaneseを設定する方法-03

先日「Webを読みやすくするEvernote Clearlyの表示フォントを游ゴシック体・游明朝体にする設定」というエントリーで游ゴシック体・游明朝体を指定する設定を書きましたが、Windows 8.1では游ゴシック体・游明朝体がインストールされていますが、Windows 7では游ゴシック体・游明朝体がインストールされていないので、設定しても意味がありませんでした。

しかし、Clearlyの表示フォントがCSSで指定できるということは、Webフォントを指定することも可能です。

Webフォントなら、サーバーに日本語Webフォントを用意しておけば、どの環境でも同じフォントで表示できます。


というわけで、今回は、Clearlyの表示フォントを日本語Webフォント「Noto Sans Japanese」(別名:源ノ角ゴシック※)にする方法を紹介します。

※正しくは源ノ角ゴシックではありませんが、そっちの方が分かりやすい人もいるのであえてそう書きます。


「Noto Sans Japanese」は、AdobeとGoogleが共同開発しているWebフォントです。

「Noto Sans Japanese」はGoogleのWebフォントのサービスに登録されているので、すぐに使うことができます(参考:日本語ウェブフォント「Noto Sans Japanese」の指定方法(なぜか日本語に適用されない方向け)

記事の続きを読む



20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-00

画像出典:Evernote Clearly(Evernote)


みなさん、EvernoteのClearlyを使っていますか?

このClearlyはFirefox・Chromeで使用できるアドオン・機能拡張で、Webの文章を読みやすくするためのアドオン・機能拡張です。


このClearlyを使うと、本文にフォーカスした表示のされ方に切り替わって、文章がとても読みやすくなります。



●ClearlyでWebの文章がこんなに読みやすくなる

例を見てみましょう。

千葉県房総半島のいすみ市から大多喜町を走る路線のいすみ鉄道の社長さんのブログです。

元のブログの体裁はこんな感じ(今はスタイルが変わりました)。

左側にサイドバーがあって、ショップを見るボタンやカレンダーや最近のエントリーなどがあります。

本文は右側に掲載されていますが、CSSでフォントがMSゴシックになっていて、行間は140%なので、ちょっと読みづらいです。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-04

画像出典:さようならトワイライト(いすみ鉄道 社長ブログ)(Internet Archiveのデータから)



このWebページをClearlyを使って表示すると以下の様になります。

本文だけが表示されるシンプルなスタイルに変更され、余計なものが目に入らなくなり、かなり読みやすくなりました。

20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-07


Clearlyは標準の設定でもWebの文章は読みやすくなりますが、今回は表示に使うフォントに「游ゴシック体」や「游明朝体」を設定して、さらに読みやすくする設定を紹介します。

記事の続きを読む



Web制作者の中でSimilarWebはアクセス数やユーザーがどこから来てどこに移動したのかといった情報がかなり正確に分かってしまうアクセス解析のウェブサービスです。競合分析で使いたいサービスですね。

このブログでも以前「【Web制作】Zenbackからのアクセス数が急激に減少。原因を調査してみたら…」というエントリーで使用しました。


Similarwebは、どのくらいの精度があるのか見てみたいと思います。実際のアクセスログ(googleアナリティクス)とSimilarwebを比較してみました。Similarwebは、どうやってアクセス数を推測しているのか気になるところでもあります。結論からいうと精度の高さに驚きました。

他人のサイトのアクセス数が分かっちゃう恐ろしいサービス Similarweb - ふりむけばコウホウ


そんな結構正確といわれるSimilarWebですが、アクセス解析のソースが何か気になりますよね?

なんでアクセス数やユーザーの移動がわかるのか、と。

20140828-SimilarWebのソースは何-01

画像出典:Website Traffic & Mobile App Analytics | SimilarWeb(Website Traffic & Mobile App Analytics | SimilarWeb)


サイボウズの秋元さんのブログを読むとその答え(の一部)が分かります。

記事の続きを読む



20130506-Google-Chromeバックグラウンドアプリ機能-01

はてなブックマークを見ていたら「最近、パソコンの終了が遅いと思ったらChromeのせいだった」という記事が盛り上がっていて、そうなのか〜と思った反面、コメントなどでこの機能をオフにしようとしている方がいるようで、少しびっくり。


いやいや、この機能結構大切なんですよ。
私は今のところオフにできないです。


それはなぜか。

記事の続きを読む



20130222-Firefox-PDFをGoogleDocsで開く-00
Firefox 19でPDFの文字が表示されない・文字化けする場合の設定」 という記事を書きましたが、Acrobat・Adobe ReaderのPDFプラグインは重くて使うのはちょっと…と思っている方もいることでしょう。


今回はFirefoxの機能拡張を使ってPDFをGoogle Docs Viewerで開く方法を紹介します。


Google Docs Viewerを使用することで、以下のメリットがあります。
  • プラグインを使用しないため、PDFを結構早く開けます
  • プラグインを使用しないため、クラッシュの可能性も低くなります

また、他にもメリットがありますが、それは記事の後半で紹介します。


記事の続きを読む



そんなわけで皆さん、HootSuite使っていますか!(以下略)
ということで、先日『Fix HootSuite Extで「nico.ms」のニコニコ動画短縮URLを使った時にサムネイル表示対応に改造する』という記事を書きましたところFix HootSuite Extの作者の@civicさんから「次のバージョンアップの時に直すので正規表現教えてねー」ってありがたいコメントを頂いていたのに、返信し忘れていました。さっきアップデートしていることに気が付いたよ…。すみません イヤーそんなつもりは

ということで、日が経ってしまいましたが、実はニコニコ動画にはニコニコムービーメーカーっていうのでアップした動画もあるのでした…。確かswfをアップする動画が「nm」が付くんじゃなかったかしら…。
そのアドレスは例えば「http://www.nicovideo.jp/watch/nm2522142」な感じで「nico.ms」で省略すると「http://nico.ms/nm2522142」です。

なので、前回と同じで追加で修正すると、


"nicoms-nm":{
reg: /nico\.ms\/nm([\d]+)\??/gi,
handler: function(r1){
return ['http://www.nicovideo.jp/watch/nm'+r1, 'http://tn-skr.smilevideo.jp/smile?i='+r1];
}
},


ということになります。

え? smもnmもパターンが同じだから分けるなって?

実はニコニコ生放送も「http://nico.ms/lvxxxxx」ってな感じで「lv」が付くだけなのですがサムネイルをどこから持ってくればいいのかよくわからないもので…調べたけどよくわからん…。
なので、限定的に「sm」「nm」と作ったのです。


あ、smとnmって、よく見たら1文字ダブっていてあと1文字のマッチだから正規表現の『[]』を使えば良いのか。

"nicoms-s/nm":{
reg: /nico\.ms\/([sn]m)([\d]+)\??/gi,
handler: function(r1, r2){
return ['http://www.nicovideo.jp/watch/'+r1+r2, 'http://tn-skr.smilevideo.jp/smile?i='+r2];
}
},

で良いのかな。

20101011-fixhootsuiteext-01

うん。うまくいったみたいだ。(smなんとかもOK)

今すぐ言うとなんかちょっと悪いかなぁと思うので、また後日@civicさんに連絡しよう

ついでにフォト蔵あたりもサムネイルつけるの簡単そうなので後でやってみようっと。
なんとなくTLでフォト蔵なかなか良いよね的な意見もちらほらあって投稿もたまにあるので。

それでは〜。またブログ見てね〜 (のヮの)ノ
記事の続きを読む



Twitterの新しいUI版のは皆さん来ましたか?

私もようやく来ました…。おい、昔から使ってんのになにこの仕打ち…って感じですよ…


それで、TwitterのTLを見ていたら「前のUIに戻した。あっちだと非公式RTボタンがつくアドオンがきかないのよね…。」(via http://twitter.com/sorarium/status/26621490537 )というつぶやきが…。
たしかGoogle Chromeに最近移行したとかなんとか言っていていたので、Chromeの機能拡張でTwitterの新しいUI版に対応しているのもあるよ!ということでご紹介。


その機能拡張は「Twitter Extender」です。インストールするためのページはこちらから。

20101008-twitter-extender-03

「インストール」ボタンを押してインストールしちゃいましょう。

このTwitter Extenderをインストールするとどうなるか。
わかりやすいページ見るとこうなります。
20101008-twitter-extender-01

なんか多いですよね?

普通は「お気に入り」「リツイート」「返信」しかないのに、この画面では「お気に入り」「リツイート」「返信」「Reply to all」「RT」「DM」とかになっている。

「Reply to all」はTwitterクライアントで良く採用されている機能で、Tweetの中にある@と発言者すべての@が入った返信ウインドが開きます。複数人にまとめて@したい時に凄く便利

「DM」はそのまんま。Direct Messageを送る機能です。

さて、「RT」ですがこれは何かというと、リンクにホバーしてみると、
20101008-twitter-extender-04

とか表示される。Old Retweetってのは結構前からTwitterをされている方はわかるかと思うのですが、つまりリツイートなんですけど、いわゆる非公式RTというものです。

クリックすれば、お馴染みの「RT @sorarium: 前のUIに戻した。あっちだと非公式RTボタンがつくアドオンがきかないのよね…。」というRTの形式で投稿欄に入ります。めでたしめでたし


《注意点》

ただし、Tweetの個別ページは投稿ウインドがうまく開かない様で、一度「返信」をクリックしてからでないとダメみたいです

それも「RT」をクリックしても発言者のIDの取得がうまく行かないらしく、
20101008-twitter-extender-05

「RT @: 前のUIに戻した。あっちだと非公式RTボタンがつくアドオンがきかないのよね…。」とかになってしまいます…。このまま投稿しても言及した本人には気付かれないっていう…
よく画面を見て投稿しましょう。


Twitter Extenderは他にも「自分宛の@」なんかも下の図の様にわかりやすく黄色の背景色に変えてくれるのでGoodです! 便利!

20101008-twitter-extender-02



それではまた(´∀`)ノ

記事の続きを読む



TwitterのWebクライアントのHootSuite使っていますか?

http://hootsuite.com/

このWebクライアントをGoogle Chromeで使う時に便利な機能拡張が「Fix HootSuite Ext」です。
この機能拡張は@civicさんが作成されています。

TwitPicやyfrogなどの画像アップロード系のサイトのサムネイルなどの表示もインラインで行ってくれるのでとっても便利です。Google ChromeでHootSuiteを使っていて、まだFix HootSuite Extを使っていない人は是非使いましょう! 無料だし!


それにYouTubeやニコニコ動画の動画系サイトのサムネイル表示にも対応しているのも嬉しいですね。(ニコ厨なんで(´∀`*))

でも…このFix HootSuite Ext、ニコニコ動画からTwitterでつぶやくときに使われる「nico.ms」の短縮URLに対応していないんですよ〜〜。・゚・(ノД`)

なので、さくっと、nico.msのURLでのサムネイル表示に対応できる様に改造してしまいましょう!
Google Chromeの機能拡張って難しそう?


いやいや、意外に怖くないですよ!


昨日、第18回NDS(長岡開発者勉強会)に行ってきてGoogle Chromeの機能拡張の話が出ていたので、ふと。


☆*゚ ゜゚*☆*☆*゚  ゜゚*☆*☆*゚ ゜゚*☆


早速ですが、Google ChromeとFix HootSuite Extをインストールしていない人はインストールしちゃって下さい。(Fix HootSuite Extはこちら

そしてこのアドレスに注目〜。えっと「detail」の後ね。「libkeepなんたらかんたら」って書いてあるでしょ? とりあえずこれをコピーしておくか、覚えておくかしておこう。

20101003-hootsuitefixext-01

そして、この名前のフォルダ名を探します。


Windows 7だと、たぶん

C:\Users\(ユーザー名)\AppData\Local\Google\Chrome\User Data\Default\Extensions\libkeepfhbgiamhpajlgfcoljimloknk

とかだと思われ。

バージョン番号が付いたフォルダがあるので、開いて、おもむろに「pin_inline_images.js」とかいういかにもなファイルをテキストエディタで開こう!

そして「"nico2":{」とか書いてあるところを探すのだ。

20101003-hootsuitefixext-02
正規表現とかわかる人はだいたい何をしているかわかると思うケド、まぁここら辺は色々省略して、その後にある「"img.ly":{」の前に

"nicoms-sm":{
reg: /nico\.ms\/sm([\d]+)\??/gi,
handler: function(r2){
return ['http://www.nicovideo.jp/watch/sm'+r2, 'http://tn-skr.smilevideo.jp/smile?i='+r2];
}
},

を挿入しよう。(「nico2」のをコピペするとすぐに終わる
こんな感じ。

20101003-hootsuitefixext-03
あとはこのjsファイルを保存して、HootSuiteの画面をおもむろに開こう。


そうすると、こんな感じでインラインで「nico.ms」のアドレスが展開されるぞ。
便利だわ。

20101003-hootsuitefixext-04

まぁこんな感じで意外とGoogle Chromeの機能拡張って簡単に改造できるのね。
皆さんもレッツトライ!

おしまい。またブログ見てね〜。(のヮの)ノ

記事の続きを読む



はてなRSS はてなのRSSリーダーってフォルダというかグループのReferrer(リンク元) のURLがアクセス先に付いてしまうからイヤ〜んという人もいるかもですね。

オレ自身、はてな RSS をプライベートモードで使っているのですが、これが、意外な部分で漏洩してしまいます。自分のはてな RSSの記事リンクから、はてなユーザーのダイアリーに飛んだ場合、そのダイアリーにリンク元表示の設定があると、RSS の URL が、アクセス元として残ります。つまり、RSS 登録して講読しているのが漏れるのです。そして、フォルダー名も URL に含まれているので、 どの名称のフォルダーに入っているかも分かってしまいます"
『斬(ざん)』 Web 上でのプライベートモードは危険なモードですよ

だってあんた、せっかくRSS購読しているのがわかっても、Referrerが

http://r.hatena.ne.jp/●●●/とりあえず

とかだったり

http://r.hatena.ne.jp/●●●/これはひどい

だったりしたらなんか悲しくない?

ダメ認定されているのをReferrerで表現されても…という感じで落ち込んでしまうかもしれませんねー。

逆にアクセスする方は、そういうフォルダに入れていて、相手にそうだと思い知らせたいなら別ですが、思い知らせたくはないっ、っていうかオレの思考を深読みすんのはヤメレって思う人はReferrerが出ないように設定すべきでしょうね。

Firefoxを使っていて、Web制作には欠かせないWebDeveloperの機能拡張を入れている場合は、「Disable」の項目で「Disable Referrers」を使えばRefererがつかないと思います。コレを有効にしたままだとうまく動かないページもあるので要注意ですが。

webdeveloper

▲ツールバー的にはここらへん。

補足情報

Refererで検索して出てこないと思ったらReferrerだったorz(07.06.25追記)

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索