橋本技研ブログ売れるホームページ研究所、橋本技研の技術系備忘録ブログ。ショッピングカートシステムの制作などが得意です。Node.jshtmlソースを読み込み、ソース中のimgのパスを相対パスに変換したい。ブラウザ上であれば、jQueryあたりでサクッとできるのだけど、これをサーバーサイド(node.js)で行いたい。jQueryはdom環境でないと動かないので、node上でdomを扱えるライブラリと組み合わせる手もあるけど、今回はcheerioというnode上でhtmlをjQueryチックに扱えるパッケージを使ってみた。インストールはnpmで。)」を使うと行けそうな感じ。contentに、Domデータ(cheerioオブジェクトと呼べばいいのかな?)かテキストデータを渡せば置換されるらしい。cheerioは、jQueryチックなセレクタが使えるので、img要素は以下のようにすれば取得できる。$('img')cheerio、なかなかやりおる。関数を渡すこともできるらしい。xxxxxxx}期待通り、img要素の数だけコールバックが呼ばれる。そうそう、これを探してた。eachやsomeみたいで、分かりやすくて良いね。関数に渡される引数が、配列のインデックスなのが何とも惜しい。Dom要素を返してくれたら良いのに。思う人は他にもいるだろう、というかそういう要望が上がってすでに実装されているんじゃないかと思い、ソースを追ってみると...ビンゴでした!第2引数として、Dom要素が渡されるようになってました。xxxxxxx}つまり、elmのsrcを書き換えてreturnしてあげればOK。コードがすっきりして嬉しい。srcを相対パスに変換する際に、ドメインやパスが一定の条件にマッチした場合のみ変換してやる必要があるので、例えば「https://cashe.hogehoge.com/」から始まるURLのみを相対パスにする場合は、以下のようにすればよい。出力すると、htmlタグやbodyタグが付いたソースが出力されるので、これらが不要な場合はもうひと工夫が必要。cheerioのセレクタを利用して簡単に解決できた。よし!これで完成か、と思いきや、もうひとつ厄介な問題がある。出力すると、日本語が数値文字参照で出力されてしまう。↓こんなやつこれは間違いという訳ではなく、このままブラウザに渡せばきちんと表示はされる...けれど、ソースを見てチェックする際には辛すぎる。UTF-8で出力して欲しい。これについては、ドキュメントに何も記載がなく、ググっても全く情報が見つからなかった。自前でデコードするしかないのかと諦めかけたところで、一応念のためにcheerioのソースを追ってみることに。すると...むむむ...このオプションは臭い...、ぷんぷん匂う...。数値文字参照での出力が回避できました。})bagooon橋本たかし★ホームページの制作(デザイン・コーディング・プログラミング)に加え、ネットショップの販売促進に関するアドバイスも致します。20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。プログラミングの経験は30年以上。PHP、Ruby、Perl、JavaScript、Vue、Nuxt.JS、MySQL、Elasticsearch、サーバー構築、Dockerなど、幅広く対応します。使ったサービスを制作しているのですが、その中で使用するnpmパッケージにバグが見つかりました。サイトをVarnishを使って爆速化した話。あるコーポレートサイトをリリースしたのですが、最初のレスポンスが返ってくるのがちょっと遅いのでなんとかしたい。reCAPTCHAを設置して不正なアクセスから防御する今、「ウェブサイト制作をぐっと楽にするウェブサービス」を制作している。日付や通貨表示のフィルタを日本語表記に対応させる方法AngularJSには、便利なフィルタが用意されています。フィルタを使用すれば、日付や通貨のデータを簡単な表記で様々なフォーマットで...記事を読むWordPressにiOSアプリのアイコン付きアフィリエイトバナーを表示するスクリプトを作ってみたよWordpressに、iOSアプリのアフィリエイトバナーを貼る場合、以下のようなAppStoreのバッジリンクならば簡単に貼ることができます...記事を読むJavaScriptで、電話番号を半角数字のみに加工する関数を作ってみた最近、Node.jsでウェブサービスを作ることが多いです。1GB)を、fsのストリームを使って以下のように返却したところ、プログレスバーが表示され...記事を読むブラウザ上のボタンをクリックすると、Illustratorで指定したファイルが開くようにする方法ブラウザにはセキュリティを確保するために様々な制約があります。Composeでお手軽に利用してみた。コメントをキャンセルメールアドレスが公開されることはありません。サイトをVarnishを使って爆速化した話。Composeでお手軽に利用してみた。