OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする
ContentfulとNext.jsで作る技術ブログ Hello World ContentfulとNext.js、そしてVercelを使ってポートフォリオ兼技術ブログとなるサイトを作った。フロントエンドエンジニアとして、単に技術の知識を共有するだけで... 一般的なブログサービスやQiita、Zennといったサービスでは、Markdownに記述した外部リンクがカード的なUIで表示されることがある。これは OGP (Open Graph Protocol) という仕組みを使った表現で、単なるテキストリンクよりもずっと見栄えがいいのでこのブログでも実現したいと思っていた。先日試行錯誤してひとまず形になったので、この記事ではその実装の方法についてまとめておきたいと思う。上に貼り付けたこのブログ自身へのリンクがそれにあたる。 Next.js （ブログ記事のSSGに使用） marked （Mark
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
Phantomjsで画像ファイルを保存する。 - The Other Road Ahead
2013-10-10 Phantomjsで画像ファイルを保存する。 Phantomjsでは、スクリーンショットを取ることができるが、開いたページの個別の画像を指定してダウンロードすることはできない。じゃあcasperjs使えばいいじゃんって話になるけど、casperjsは、ajaxで画像のurlを指定してダウンロードしているので、ページを開いたタイミングでrequestした画像がダウンロードされるわけではなく、もう一度requestを送ってダウンロードするので、リファラとか気にする場合は面倒なことになる。しかし、phantomjsには、disk cacheの仕組みがあり、そこからcacheした画像を掘り起こせばダウンロードしたファイル取ってこれるよねってことで、それを可能にしたscriptがこちら。 https://gist.github.com/bshamric/4717583 nor
橋本商会 » 画像を安全に埋め込みたい
チャットに画像のURLが貼られた時に、安全にimgタグを埋め込みたいという議論があったので書いておく。 一番単純な実装だと、 var s = "はろー http://shokai.org.ex/example.jpg てすとてすと"; s.replace(/(https?:\/\/.+)\.(jpe?g|gif|png)/g, "<img src=\"$1.$2\">$1.$2</img>"); のようにすると "はろー <img src="http://shokai.org.ex/example.jpg">http://shokai.org.ex/example.jpg</img> てすとてすと" になるのだが、よく考えると http://tumblr.com/logout#.png みたいなのを貼られるとimgタグが描画された瞬間にログアウトしてしまう。 正規表現がショボいのも悪いけど
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
JSCompress - The JavaScript Compression Tool
About JSCompress JSCompress is an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for all JavaScript minification and compression. Why You Should Compress JavaScript There are a number of reasons wh
How to download favicon from website?
When you browse a website, the "favicon" icon shows up in the tab or next to the URL (or next to the bookmark). If I want that graphic, is there a way to download it directly from the site? I'd prefer to download it directly from the web, but if all else fails, I'll dig it out of wherever it is stored on my computer (Windows 7, Firefox 3.6.6).
[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,
![[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbf9a8239270b982158e9318db2dd638d1ac2f8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090802.gif)
Amazonからカーリル(全国図書館検索)へ飛ぶブックマークレット - Koonies/こりゃいいな！
⇒ greasemonkey版はコチラへ 全国4300以上の図書館から貸し出し状況が検索できてしまうという超絶便利！なカーリル。同じく普段からよく使ってるAmazon。 この２つをむすんじゃえ！と作ったのが今回のbookmarklet（ブックマークレット）です。 ★ スクリーンショット Amazon.co.jp： 必死のパッチ: 桂 雀々: 本 ↑ アマゾンの商品ページで実行すると、↓ カーリルの個別ページにジャンプします。 必死のパッチ | カーリル ★ インストール javascript:if(location.href.search(/[^0-9A-Z]([B0-9][0-9A-Z]{9})([^0-9A-Z]|$)/)!=-1){void(location.href='http://calil.jp/book/'+RegExp.$1);} ブックマークに登録するには一旦このページを
REPL Node.js v0.11.6 Manual & Documentation
REPL# Read-Eval-Print-Loop (REPL) は単独のプログラムとしても他のプログラムに手軽に取り込む形でも利用することができます。 REPL は対話的に JavaScript を実行して結果を確認する手段を提供します。 デバッグやテストやその他の様々なことを試す用途で利用されます。 コマンドラインから node を引数無しで実行することで、REPL プログラムに入ります。 REPL は Emacs 風の簡易な行編集機能を備えています。 mjr:~$ node Type '.help' for options. > a = [ 1, 2, 3]; [ 1, 2, 3 ] > a.forEach(function (v) { ... console.log(v); ... }); 1 2 3 より進んだ行編集を行うには、環境変数に NODE_NO_READLINE=1
TideSDK :: App Development
Desktop App development for Linux, Mac, Windows using HTML5, Javascript, CSS3, and a little help from PHP, Python, Ruby if you need it!Desktop App development for Linux, Windows, and Mac using HTML5, JavaScript and CSS3 plus the power of php, python, and ruby when you need it. A little details on what this is... TideSDK (formerly Titanium Desktop) is a remarkable project inherited from Appcelerato
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード <script type='text/javascrip
指先ひとつでページのタイトルとURLをコピーしたい！ブックマークレットでその願い、叶えます♪
追記（2013年2月4日）。具体的な手順を書きましたのでよろしければご参照ください。 タイトルと URL をコピーするブックマークレットの登録、確認、実践手順メモ | oki2a24 パソコンでブログを書くときに使うブックマークレットを残しておきます。スマホでも使う予定です。ブックマークレットのウェブブラウザへの登録方法は割愛します。が、簡単に説明すると、Chrome の場合はブックマークバーに下記のリンクをドラックアンドドロップすれば OK です♪ get title 表示しているページのタイトルを取得します。 get title url ページのタイトルと URL を取得します。 get page link ページのタイトルと URL を取得し、新しいウィンドウで開く HTML ソースを作成します。 ↑なお、この「get page link」ブックマークレットは私が作ったものではありま
デジタルをわかりやすく - catch.jp blog
フリーランスのテクニカルライター 可知 豊の個人ブログです。 IT・ビジネス・プログラミング学習などをテーマに、多くのメディアで記事を書いています。 このほかに、Webコンテンツや簡単なプログラムの作成、Webシステムやプログラミングのトレーニング支援、企業メディアの企画・制作・運営にたずさわってきました。 お仕事、絶賛募集中です。 Works ... 一本指でもサクサク打てる、キーボード超入門 パソコン初心者が文字入力で困ったら読む本 知る、読む、使う！ オープンソースライセンス 著書・実績 自己紹介 Blogs このブログの記事一覧 Heppocode Garage 人差し指でパソコン入力 そのほか ＊ 2024-09：ながらく、いくつかのWebサイトをWordPressで運営してきましたが、 静的サイトジェネレータPelicanを導入して記事を移行しました。 catch.jp blo
ブックマークレットサービス・Hatena::Let を作りました - 2nd life (移転しました)
ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
URL エンコード/デコードフォーム
URL エンコードされた文字列をデコード、もしくは文字列を URL エンコードします。 EUC-JP、SJIS (シフト JIS)、JIS、UTF-8 に対応しています。 2008-01-30、 軽快なバージョンを用意しました。 2009-12-30、Firefox の検索バーからデコードできるものを公開しました。 入力フォーム 入力欄 (M) 文字列を入力してください デコードではなくエンコードする (E) エンコードする場合の文字コード (C) 送信(S) 使い方 デコード方法 「入力欄」に %A4%B3%A4%CE... のような URL エンコードされた文字列を入力し、「送信」ボタンを押すだけです。文字コードはたぶん自動認識します。 エンコード方法 「入力欄」に URL エンコードしたい文字列を入力し、「デコードではなくエンコードする」にチェックを入れます。さらに希望の文字コードを
iOSのWebViewに拡張メニューを追加するWebViewExMenu
MobileSafariとWebView全般に拡張メニューを追加するWebViewExMenuというTweakを作ってみました。 MobileSafariの拡張じゃありません。Webブラウザの拡張でもありません。WebView全般で有効。 WebViewというのは、iPhoneのアプリケーションの中全般で部品として使われています。 Evernoteの中でも、Twitterクライアントの中でも、RSSリーダーの中でも、２ちゃんねるリーダーの中でも、サードパーティ製のWebブラウザでも有効です。 例えば、どこからでもはてなブックマーク登録Bookmarkletを呼び出したり、といったことができます。（自分はTwitterクライアント内のブラウザからはてブするために作りました）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - xxuejie/webruby: mruby running in the browser
jpn.ph
Feelingplace
