Astro(Static Site Genarator) 好きなフレームワークで高速WEBサイト構築 | Reffect
高速なコンテンツ重視の WEB サイトを構築したいという人向けに新たな Static Site Generator(静的サイトジェネレーター:SSG)が登場しました。その名前は Astro。Next.js や Remix などの React フレームワークと同様に注目度の高いフレームワークの一つです。ブログサイトやオープソースのサイト(例：create-t3-app)などで利用され活発に更新が行われているので最新のバージョンは 2023 年 12 月 5 日にリリースされた Astro4.0 です。 リリース当初は Static Site Generator(静的サイトジェネレーター:SSG)として登場した Astro ですが現在はSSR(Sever Side Rendring)も備え, Static Site Generatorではなくフルスタックフレームワークとして開発されています。
Astro
One frontend architecture with endless possibilities Step into the future with Islands — Astro's next-gen frontend architecture. Supercharge your development with automatic JS-to-HTML streaming and a beloved developer experience. Content-first websites Fetch data from your CMS or work locally with type-safe Markdown and MDX APIs. Astro automatically removes unused JavaScript and renders to HTML fo
RubyでWebスクレイピングしたい（ツール選定編） - マイペースなRailsおじさん
自作したスクレイピングツールで画像をあつめたい 現在開発中のアプリケーションで、エフェクターボードの画像が100枚くらい欲しかったので、Google画像検索から画像を集めることにしました。 画像収集は機械学習などでかなり需要があるらしく、自作せずとも利用可能なツールがいくらかあるようです。 GitHub - hardikvasa/google-images-download: Python Script to download hundreds of images from 'Google Images'. It is a ready-to-run code! 画像クローラー - Qiita せっかくですが、rubyではWebスクレイピングするようなプログラムは書いたことがなかったので、自作してみることにしました。 nokogiriかSeleniumか rubyでスクレイピングをする場合、
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
Go言語で動的HTMLをWebスクレイピングする - Qiita
はじめに JavaScriptで動的に生成されるWebページの場合、goqueryに直接URL渡しても正しい値でスクレイピングができない。 そのため、WebDriverを使ってブラウザに表示された実際のHTMLをgoqueryに渡してスクレイピングする必要がある。 環境 Ubuntu 16.04.3 go 1.8.3 インストール ChromeDriver # インストール export WD_VER=2.32 wget -O /tmp/chromedriver.zip http://chromedriver.storage.googleapis.com/${WD_VER}/chromedriver_linux64.zip sudo unzip /tmp/chromedriver.zip chromedriver -d /usr/local/bin/ sudo chmod +x /usr/
最新のフロントエンドは変わりすぎ。2010年頃から見るとタイムスリップしたみたい。 | Divide et impera
僕はプログラマだ。 だが仕事はフロントエンドとOSの間のあたりを主にやっているため、HTMLやJavaScriptのとこらへんは長らく触ってこなかった。 それに、仕事では古くてカビの生えたものをずっと使い続けているから、2000年代初期のテーブルレイアウトとfunctionだらけのJavaScriptを触ってきていた。 プライベートのプログラミングタイムも、レイヤーが低い部分、例えば通信とか形態素分析とかやったり、なにか必要なものがあればコマンドでの形で済ませたりする。 たとえWEB画面が必要でも、軽くjQueryで済ませるような簡単なものしか作ってこなかった。 最近、故あってプライベートでvue.jsというフレームワークをさわることになり、一気に現代に引き戻されることになった。 感想：全然知らない言語で新しいもの作ってる感じ 最近のフロントエンドを見た古代人の感想 古代人のフロントエンド
Big Sky :: Go言語で jQuery ライクな操作が出来る goquery を試した。
スクレイピング等を行う場合、スクリプト言語が大きく威力を発揮します。 例えばブログの様にタイトルと本文の組が反復される様なページをスクレイピングする場合 URLからHTMLを得る HTMLからDOMオブジェクトを得る エントリとなるDOMノードを検索する エントリノードでループする エントリノードからタイトルとなるDOMノードを探索しテキストを得る エントリノードから本文となるDOMノードを探索しテキストを得る この様になるかと思います。こういった処理を一般的なコンパイル型言語を使って実行しようとすると エラーチェック 反復処理 検索処理 といったコードをゴリゴリ書かなければいけなかったりします。もちろんそれ専用のライブラリを使えば出来きますが、コンパイル型言語ではなかなか良い物がないのは事実です。javascriptに到っては jQuery を使えば簡単に出来ますが、コンパイル型言語向け
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
女子高生だったときに気が狂ってWin98でサーバーをたてた話 - Catch me If you can
注！この記事を書いている人間はエンジニアではありません！よって技術的な用語の記載は間違っている可能性がありますが、指摘するときは女子高生だと思って優しくしてほしいの.... この記事は2016年アドベントカレンダー「自宅サーバの思い出」12/3の投稿です。 www.adventar.org seong15といいます。Twitterでは「いちごー」とか「いちご」とか「ひこざえもん」と言われてます。普段は完全リモートワークの会社で営業とか広報とか採用とかやってます。 いろんなシーンでエンジニアと話すことが多いんですが、世間話的にこの話をすると彼らに大ウケという結果がでており、思い出としてどこかに残しておきたいな〜というかんじで登録しました。 わたしは小学校6年生の時、もののけ姫を友達と見に行った帰りに本屋で初めてアンソロジーというものをみつけてから足掛け13年ほど腐女子でした。今は貴腐人を超え
5分で分かる JavaScript を知らない人が JavaScript の便利さを学べる記事を書いたよ - ginpeiのブログ
JavaScript を知らない人に JavaScript の話して欲しいと言われる夢を見たのでブログ書きました。*1 難しい話は抜きにして JavaScript は <script> と </script> で囲えば動きます。*2 HTML をコードレベルで編集できるサービスなら、設定は一切不要です。 <script> JavaScriptのコード </script> 拡張子にも制限はありません。最終的にHTML文書として出力されるのであれば、htmlでもphpでもcgiでも構いません。なおフレームの代わりにPHPを使うという為になる記事があるのですが、ここでは関係ないので読むのは後ででよいです。 ついでに JavaScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。 コピーライトの西暦を自動更新 JavaScript を使えばページフッタの西暦も自動更
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編）
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編） 増井 雄一郎（FrogApps, Inc.） 前回の記事では、 wri.peの紹介と、HTML5のApplication Cacheを使ったHTMLや画像などの読み込み高速化の話をしました。今回は、Web StorageのlocalStorage/sessionStorageを使い、Ajax通信部分と表示の高速化を行う手法を説明しましょう。 localStorageを用いた通信と表示の高速化 前回のApplication Cacheで、HTMLの読み込みが高速化されました。これでも十分速くはなったのですが、画面に全ての情報が表示されるまでには、ちょっと時間がかかります。 wri.peではメモの一覧や、メモ本体の読み込み・保存はXHR(XMLHttpRequestの略。Ajax通信で使うモジュール名)を
wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）
エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP
getElementByIdとgetElementsByNameの違い - hogehoge foobar Blog Style Beta
getElementByIdとgetElementsByNameってよく使い方を間違えます。（私だけかもですが。） ということで、基本中の基本のgetElementByIdとgetElementsByNameの使い方をまとめてみます。 ※「getElementByName」では無く「getElementsByName」だってところがちょっと重要です。 getElementByIdの基本的な使い方 getElementByIdの基本的な使い方は以下の通りです。 ◆ document.getElementById(id) (D1/e5/N6/O6) id 属性で指定した名前で要素を参照します。 oElement = document.getElementById("id1"); とほほのJavaScriptリファレンス - ドキュメントオブジェクトモデル（DOM） 「id 属性で指定した名前で
短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ | らふらく ^^
最近、スマホの普及と共に、プログラミングを学習したい人が増えてきているようです。 私の周りでも、プログラミングに興味があり、webサービスをつくってみたいという人が大勢います。 ということで、プログラミングをやった事がない人（または初級者）のために、 プログラミングで何を学べばいいか、 どうやって勉強したらいいかというノウハウを紹介したいと思います。 何を学ぶべきか プログラミングにはいろんな言語があるため、どの言語をやればいいかわからないという声を耳にします。 そこで、初級者でも学びやすい言語を厳選し紹介したいと思います。 1. 何はともあれ「HTML」 こちらは、Webサービスをつくる上で書かせない言語で、 今見ているページ（見た目の部分）はすべてHTMLで書かれています。 HTMLを学ぶ上では以下のサイトが参考になります。 HTMLの基本 HTML入門 ドットインスト
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
第1回 詳説：デベロッパーツールの使い方 | gihyo.jp
こんにちは、Google Chrome ExtensionsのAPI ExpertとChromium-Extensions-Japan管理人を担当している、太田と申します。いつもはクロスブラウザで連載していますが、今回はGoogle Chromeのデベロッパーツールについて紹介します。 昨今のJavaScript、HTML、CSSブームの背景には、開発環境、特にFirebugに代表されるようなデバッグツールの目覚しい発展が大きく貢献していると思われます。その反面、高機能化するデバッグツールの各種機能を使いこなすことが難しくなってきているという現実もあります。そこで、今回から全4回でGoogle Chromeに搭載されているデベロッパーツールの使い方とそれを利用したデバッグ・チューニングのノウハウをお届けしたいと思います。第1回はデベロッパーツールの機能紹介と基本的な使い方を解説します。 な
Google Chrome版Firebug：デベロッパーツール取扱説明書 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Roots.cx – Crypto is our world!
3分動画でマスターするプログラミング学習サイト - ドットインストール