OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする
ContentfulとNext.jsで作る技術ブログ Hello World ContentfulとNext.js、そしてVercelを使ってポートフォリオ兼技術ブログとなるサイトを作った。フロントエンドエンジニアとして、単に技術の知識を共有するだけで... 一般的なブログサービスやQiita、Zennといったサービスでは、Markdownに記述した外部リンクがカード的なUIで表示されることがある。これは OGP (Open Graph Protocol) という仕組みを使った表現で、単なるテキストリンクよりもずっと見栄えがいいのでこのブログでも実現したいと思っていた。先日試行錯誤してひとまず形になったので、この記事ではその実装の方法についてまとめておきたいと思う。上に貼り付けたこのブログ自身へのリンクがそれにあたる。 Next.js （ブログ記事のSSGに使用） marked （Mark
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
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
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
デジタルをわかりやすく - catch.jp blog
フリーランスのテクニカルライター 可知 豊の個人ブログです。 IT・ビジネス・プログラミング学習などをテーマに、多くのメディアで記事を書いています。 このほかに、Webコンテンツや簡単なプログラムの作成、Webシステムやプログラミングのトレーニング支援、企業メディアの企画・制作・運営にたずさわってきました。 お仕事、絶賛募集中です。 Works ... 一本指でもサクサク打てる、キーボード超入門 パソコン初心者が文字入力で困ったら読む本 知る、読む、使う！ オープンソースライセンス 著書・実績 自己紹介 Blogs このブログの記事一覧 Heppocode Garage 人差し指でパソコン入力 そのほか ＊ 2024-09：ながらく、いくつかのWebサイトをWordPressで運営してきましたが、 静的サイトジェネレータPelicanを導入して記事を移行しました。 catch.jp blo
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
JavaScriptを使ってPOST送信する方法 | Websegment.net
If you put your mind to it, you can accomplish anything. 最近ホントにWeb業界ではJavaScriptが流行っていて、JavaScriptでデータのやりとりも当然の様に行われています。またまたWebデザインもについてキレイなページを世に出さないと見向きもしてもらえない。なんてことが多くなってきた様に思える今日この頃。です。 で、サーバサイドが出来る人はデザインに関してはやはり専門でないので、劣る部分が多いかと思います。（サーバサイドな方々に語弊があったらゴメンナサイ） 私の数年前の固定概念だったのですが「フォームを使ったPOST送信にはinputタグや、buttonタグじゃないと送信できない。」まぁ当然ながら今はそうでもないです。 JavaScriptを使えばaタグからでもinputタグのtypeがbuttonであってもPOST送信
第26回 地図データ用クラウドデータベースと作るWebアプリ | gihyo.jp
店舗分類コードを含めて、ガソリンスタンドだけでなく、LPガススタンドやその他の燃料給油所の情報もまとめたData Sourceにします。 アップロード用のファイルは、前回と同じくテキストファイルとして作成します。よって、テキストファイルの最初の2行は次のようになります。エンティティの種類の名前は、FuelStoresとしました。 Bing Spatial Data Services, 1.0, FuelStores ID(Edm.String,primaryKey)|Latitude(Edm.Double)|Longitude(Edm.Double)|Address(Edm.String)|Code(Edm.Int64) データの変換 さて、提供されているデータはXML形式のファイルで、都道府県ごとに分かれています。すべてのファイルをダウンロードしてData Sourceとしてアップロード
Feelingplace
the study guide Photo by Nadiaux 告白します。 Apphtmlが公開されたのが確か2010年の9月。 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサ […]
踊るサボテン工房｜Mac｜CotEditor Tips
CotEditor Tips .scptd も実行できます。 ヘルプファイルには「CotEditor は次の拡張子を持つファイルをスクリプトファイルとして認識します：.applescript .scpt .sh .pl .php .rb .py」とあります。従って「.scptd」などのファイルは実行不可能かと思いきや、そうでもありませんでした。 スクリプトフォルダには実行したいスクリプトのエイリアスを置き、そのエイリアスファイルの拡張子を「.scpt」としたら「.scptd」ファイルの実行も可能でした。この裏技により、もっと複雑なスクリプトを実行することも不可能ではありません。 JavaScript で拡張スクリプトを作る。 上述のように「.js」ファイルをスクリプトファイルとは認識してくれないのですが、JavaScript に長けた人なら CotEditor の拡張スクリプトを Java
指先ひとつでページのタイトルとURLをコピーしたい！ブックマークレットでその願い、叶えます♪
追記（2013年2月4日）。具体的な手順を書きましたのでよろしければご参照ください。 タイトルと URL をコピーするブックマークレットの登録、確認、実践手順メモ | oki2a24 パソコンでブログを書くときに使うブックマークレットを残しておきます。スマホでも使う予定です。ブックマークレットのウェブブラウザへの登録方法は割愛します。が、簡単に説明すると、Chrome の場合はブックマークバーに下記のリンクをドラックアンドドロップすれば OK です♪ get title 表示しているページのタイトルを取得します。 get title url ページのタイトルと URL を取得します。 get page link ページのタイトルと URL を取得し、新しいウィンドウで開く HTML ソースを作成します。 ↑なお、この「get page link」ブックマークレットは私が作ったものではありま
How To Make a Bookmarklet For Your Web Application – BetterExplained
Browser buttons (bookmarklets) are shortcuts that act like a simple browser plugin. Their advantages include: Fast installation: Just add a link to your bookmarks Convenient: Use features while on your current page Easy to write: Bookmarklets are just like making a webpage; there’s no need to write a whole browser plugin Cross-browser: The same bookmarklet can work in IE, Firefox, Opera and Safari
なんでjavascript:voidにvoidが必要なのか | MemeTodo
2011年5月27日金曜日 なんでjavascript:voidにvoidが必要なのか ブックマークレットなどでjavascript:void 内容という感じでvoidが入ってる理由を考えたことなかったというか、Bookmarklet BuilderやHatena::Letなどを使ってたり、普段の癖から無名関数で囲って書いてたりしてたので素でvoidと書いた記憶がなかった。 javascript:(function(){/*内容*/})(); The void operator in JavaScript という記事を見て、初めてvoidという存在がブックマークレットでどういう機能をしているかと言うことに気づいた。 void expr;// undefined というようにvoid演算子で評価した式はundefinedを返す。 そのため、voidなしでブックマークレットを書いた場合は式の返
★JavaScriptリファレンス
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
自動更新（オートリロード） - borbisの日記
自動リロードっていうか、つまり現在画面に表示されているページを指定秒数毎に読み込みます。 areload.html <html> <script> document.write('<frameset>'); document.write('<frame name="areload" src="'+document.referrer+'">'); document.write('</frameset>'); setTimeout('R()',location.search.substring(1)*1000); function R(){location.reload();} </script> </html>↑をareload.htmlとしてローカル保存。ここで、ローカル保存とは、京ぽんのデータフォルダ（C:\data\）に保存する事です。つまり、↑の箱の中にあるHTMLを C:\data
自動更新(オートリロード)のブックマークレット - borbisの日記
W-ZERO3 の Opera 8.5 Mobile には、ページの自動更新(auto reload)の機能が実装されていなかったので、Bookmarkletを作った。 W-ZERO3 の Opera は、ブックマークレットからローカルに置いたhtmlを読むことが出来ないので京ぽん用のブックマークレットとは、別物になってますが、ほとんど、同じ考え方で使えます。 javascript:(function(){var T=prompt('更新間隔?(秒)','60');if(T&&!isNaN(T)){var F='<html><frameset rows="*,0"><frame src="'+location+'"><frame></frameset></html>';var W=open();with(W.document){write(F);close();}var H='<html>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using the command line
jpn.ph