Markdown を拡張する MDX はドキュメント作成の新たな可能性？
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
JavaScript からファイルをダウンロード保存する方法
a タグの download 属性でダウンロード 従来は Content-Disposition で「ファイルに保存」としていた これまで、サーバーからのデータを「ダウンロードしてファイルに保存」するには、サーバーからクライアントへの HTTP レスポンスを送信するときに次のような HTTP ヘッダーを送る必要がありました。 Content-Disposition: attachment; filename="foo.png" ブラウザ側では、Content-Disposition というヘッダーをみることで、そのコンテンツをそのままインラインで表示するのではないということを知ることができます。 言い換えると、Content-Disposition というヘッダーがある場合に、ブラウザはそのページにナビゲートするのではなく、これからサーバーから送られてくるデータは今のページのアタッチメント
ESDocという(多分)モダンなドキュメンテーションツールの紹介 - maru source
こんにちは丸山@h13i32maruです。 僕は2015年からESDoc*1というJavaScript向けのドキュメンテーションツールを開発しています。 https://esdoc.org https://github.com/esdoc/esdoc Star 最初のリリースから2年、昨日ようやくv1.0をリリースできました🎉 いやー、ここまで長かったです。今ではRxJSやSketchAPIなど、様々なツールで使用されています。 この2年間、ESDocは2つのゴールを目指して開発してきました。 ドキュメントの作成・メンテナンスを快適にする（ドキュメントを書くの楽しい！という状態） ソフトウェアの使い方を簡単に理解できるドキュメントを作成する（ソースコード読まなくても大丈夫！という状態） この2つを満たすためにESDocは色々な機能を提供しています。 今日はそれらの機能の中でも(多分)モダ
JavaScriptでCSSを操作する方法 | スターフィールド株式会社
のように記述すれば操作ができます。 ただ、案件によってはjQueryのが利用できなかったり、 対象の要素がSVGなどでブラウザによって認識されないなど、 jQueryを使わずにJavaScriptでCSSを操作する必要があります。 そこで、JavaScriptでのCSSの操作方法をまとめてみました。 var target = document.getElementById("example"); //対象要素をIDで指定 var target2 = document.getElementsByTagName("div"); //対象要素をタグで指定 var target3 = document.getElementsByClassName("example"); //対象要素をクラスで指定(IE9以上) target.style.color = "red"; //colorを設定 targ
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
2015年からじわじわと来ているJavaScriptのライブラリ記事でも書いておくかな！ 【壱】 - わたくし
変更内容 日付 更新内容 2015/09/06 記事に元々入れる予定だったライブラリを一つ追加しています。 初めに 個人的に使ってみて、良さ気なものをピックアップしておいた。 30個ほど候補があったが、分類してみて程よいものを今回紹介する。 5個のつもりだったが、ランダム系のライブラリを追加し忘れていたため最後尾に追加。 こんな夜遅くにビール片手に書いてますので誤字脱字があると思いますが、もしおかしな点があれば教えて下さい。 カウント系の実装 文字入力時にカウント・ダウンしてくれるやつね。 実装はクソ楽 limitCharacts var elem = document.querySelectorAll('input'), limit = 100; limitCharacts(elem,limit); 2Dライブラリと言えばこれ pixi.js こちらから、サンプルが見れる。見
React.jsチュートリアル【日本語翻訳】
フロントエンドの世界では今React.jsが注目されてきていて、自分もチュートリアルをやる機会があって、その際に日本語訳（和訳）を簡単に作っていました。まだこのチュートリアルに関して翻訳されたものがなさそうだったので、ちょっと手直ししてブログにアップすることにしました。誤訳などもあるかと思いますが、Google翻訳よりはマシだと思ってお使いいただければと思います。 当記事のチュートリアルは「React v0.13」当時の古い内容のものとなっています。最新の「React」の公式チュートリアルの翻訳記事は以下となります。 Reactチュートリアル: Intro To React【日本語翻訳】 – maesblog React.js React.jsReactはFacebookが開発しているJavaScriptのフレームワークです。MVCで言う所のViewの部分に特化したフレームワークとなってい
PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips
はじめに PhantomJS - Scriptable Headless Browser PhantomJS はヘッドレスな（ブラウザ画面のない）QtWebKit ベースのブラウザで、JavaScript の API を通じて、そのブラウザを自由自在にあやつることが出来ます。使用シーンとしては、Jenkins などの CI ツールとの組み合わせによる Web ページの GUI の自動テストや、Web ページのスクリーンキャプチャ、スクレイピングなどが挙げられます。 今回は、ログインが必要なページの情報をパースして自分専用に RSS 化したいなと思い、３つ目のスクレイピング用途をベースに調べてみました。その内容を備忘録として残しておきます。 出来るようになること ログインが必要なページの HTML を取ってくる ログインが必要なページのスクリーンキャプチャを撮る PhantomJS の導入
Apache Cordova(PhoneGap)開発におけるTips - Qiita
はじめに Cordova(PhoneGap)を使って、smartFX Virtual Tradeをネイティブアプリとしてリリースしました。 前回Cordova(PhoneGap)を使ったネイティブアプリ事例は概要でしたが、今回は実装のTipsを紹介します。 js、cssを動的に差し替える WebViewを使う利点として、バイナリを更新せずにアプリの動作を変更できるという点があります。 ただ、単にリンク先のjsの内容を書き換えても以前のファイルのcacheを参照する可能性があったり、逆に毎回最新のjsを取得するのはパフォーマンスが落ちるという問題があります。 これを回避するために、最新のJS、CSSのパスが記述されている小さなjsを毎回取得し、そこに記載されているjs,cssをロードするという方法を考えました。 //var JS_PATH="http://192.168.1.77:3000/
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ） - Qiita
はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 Underscore.jsとlodashを紹介します。 両ライブラリとも_で使用できます。 ほかのライブラリにも依存せず、 現在フロントでもサーバでもかなり人気なライブラリです。 個人的にもこれなしでは。。 といった必須なライブラリとなっています。 また、Backbone.jsといった人気なフレームワークが、 Underscoreに依存していたりします。 Underscore.js GitHub: https://github.com/jashkenas/underscore Document: http://underscorejs.org/ 和訳: https://github.com/enja-oss/Underscore lodash GitHub: https://github.com/lodash/lo
リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべにっき ♨
古き良きインターネットアプリケーションであるマウスストーカー*1をリアクティブプログラミングの技術を活用して実装してみるという取り組みをしましたのでご紹介します。リアクティブプログラミングというと主語が大きめですが、ここではbacon.jsを使ってるくらいの意味です。 できたもの まずは完成したマウスストーカーを紹介します。チェーンのように連なった星がマウスカーソルの軌跡を辿ってついてきます。工夫してうごかすとなかなか綺麗です。下のボタンを押すと実際にこの画面でマウスストーカーを有効にすることができます(requestAnimationFrameに対応したPCブラウザのみ)。いろいろ動かして遊んでみてください。 このページでマウスストーカーを有効にする 実装 このマウスストーカーがどのように実装されているか紹介します。ソースコードはGitHubに公開していますので、適宜ご参照ください。手元
JavaScriptだけでファイルの保存機能を実装する
こんばんは。ファガイです。本日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。 概要 ローカル上だけでファイルの保存ができるようになる方法になります。 自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。 今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。 確認ブラウザ IE11 Firefox GoogleChrome にて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。 ソースコード ソース自体は結構簡単です。 var text = "テキストデータ"; var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作り
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
【Yosemiteの新機能】JavaScriptでアプリケーションを操作し、面倒な作業を自動化してみた | Goodpatch Blog
初めまして、ProttのフロントエンドエンジニアのSyoです。よろしくお願いします！ 実は皆さんもう既にご存知と思いますが、Mac OS XにはAppleScriptというスクリプト言語があり、システムアプリケーションや一部のサードパーティ製アプリをコントロールすることができます。これより日常中繰り返し同じ操作する所はプログランミングで操作を自動化することができるので大変便利です。ただし、AppleScriptはそれ以外一切使う所がなくて、その為にわざとAppleScriptを勉強するのは非効率ではないでしょうか。 今秋リリースするOS X Yosemiteでは、AppleScriptに加えJavaScriptも利用可能になりました。ということでJavaScriptを少しでもわかる方は、JavaScriptで簡単にMacアプリケーションを操作することが出来るようになりました！ Hello
iOSのSafariで文字選択が思い通りにならないときに使える画期的な対処方法
iOSのSafariで文字選択が思い取りにならなくてイライラすることがある iOSのSafariで表の中の文字の一部分を選択しようとしても、セル全体になってしまったり、行全体になってしまったりして、必要ない文字まで選択、コピーするハメになって面倒なことがあります。 特に、viewport指定で拡大が禁止されている場合はやっかい。 拡大が禁止されていなければ、拡大すると表の中であっても部分選択ができるようになるのですけどね。 あるブックマークレットを使うと表の中の文字であっても自由に選択できるようになる 今回紹介するブックマークレットを問題のページで実行するとアラ不思議！ 表の中の文字であっても自由に選択できるようになります。（続きは[Read More]から） ブックマークレットのSafariへの登録 以下のブックマークレットを全選択してコピー。 javascript:document.b
AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて AngularJSの日本語リファレンスです。 AngularJSの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教え
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ライブラリを使わない素のJavaScriptでDOM操作 - Qiita