静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる?」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
はじめに 個人サービスを公開するまでに必ずやるべきことがあるのですが、思い出すのに時間が掛かってしまったり、「事前にやっておくべきだった...」と毎回思います。ここら辺の情報は調べてもまとまっている記事がなかったので私なりにチェックリストとしてまとめてみました。難しいことは一切なく(経験者には当たり前なことかも?)、比較的簡単に出来るものを書かせて頂きますので気軽に読んでいただけると嬉しいです。 前提 僕は個人サービスを公開する上で集客に重きを置いています。後述するやるべきことは集客をベースとした内容であり、サービスを利用する上で必ず必要ではないということをご理解ください。また、WEBの要素が強めなので、モバイルアプリ等の開発者は参考にならないことが多いと思いますのでご了承ください。参考までに僕が個人開発しているサービスです。Gmailのようなツール寄りのサービスではなく、キュレーションサ
近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変えてライトモードに使用してもかっこいいグラデーションです。 CSS Tricks to Create that Dark Futuristic Web3 Look by Trisha Lim 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに かっこいいグラデーション使用したテキストのスタイル かっこいいグラデーション使用したボタンのスタイル かっこいいグラデーション使用した背景のスタイル はじめに ダークモードのWeb3の美しさ
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
炎・雪・煙・光など、パーティクル・システムを使って表現するようなものをウェブサイト上で無料で簡単に作成し、そのまま商用利用してしまってもOKなデザインツール「Particle Develop」が公開されています。一体どんなことができるのか使ってみました。 HTML5製のデザインツール Particle Develop - ICS http://ics-web.jp/projects/particle-develop/ これが「Particle Develop」。画面左側には自身が作成したパーティクル表現がプレビュー表示され、右にはパーティクルのテンプレートが並んでいます。記事作成時点でテンプレートは12種類あります。 試しに「Fire」というテンプレートをクリックするとこんな感じ。自身の求めるテンプレートをまず選択すればOK。 プレビュー画面の赤枠部分にある四角いアイコンは、ドラッグ&ドロ
最近のウェブデザインでは、あらゆる画面サイズに対応するレスポンシブレイアウトが必須となっています。デスクトップでは問題ないように見えても、モバイル端末から閲覧するとユーザビリティの問題点が見つかることもしばしば。 今回は、無料なのはもちろん操作に迷わず手軽にレスポンシブデザインを検証できるオンラインツールをまとめてご紹介します。多くのツールで、画面サイズごとにまとめてレイアウトを確認できるなど、ウェブ制作が捗るものばかりです。 詳細は以下から。 レスポンシブレイアウトを手軽に検証できる無料デザインツールまとめ XRespond お好みの画面サイズを設定し、ウェブサイトのURLを入力するだけで、まとめてレイアウトを確認できるオンラインツール。ドロップダウンから特定の端末サイズを指定することもでき、幅広いセレクションが揃います。 Responsinator 上記ツールに似たものとして、Resp
javascript。今やwebの表現になくてはならない存在で、デジマなフィールドで働く僕らにもかなり身近な存在ですが、今回は『JSでそこまでやれんの?!』『いやそれはおかしい!』と言わざるを得ない事例をあえてチョイスしてご紹介。 何が何でもjavascriptでやるんだ!やれるはずなんだ!うるせー黙ってろ!!とでも叫ばんばかりの熱いパトスをぜひ感じてください。 深層学習がブラウザオンリーで!まさかのJS駆動ディープラーニングエンジン『ConvNetJS』ConvNetJS:Source Ledgeでも以前各種のライブラリを紹介してきましたが、そのどれもがクラウドサーバ上で稼働しているもの。 なので、当然のように利用にあたっては通信が必要でした(ものすごく当たり前ですが) が、このConvNetJSはなんとjsベース。つまりクライアントPCの中で稼働してしまうとのこと。 もはや意味が分かり
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア(スペイン)の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 北米を中心に全世界でJavaScriptへの対応熱止まらない。 今回も知る人ぞ知るオープンソースの文字認識エンジン「Tesseract-OCR」が、JavaScriptに移植され話題になっている。 以下は「tesseract.jp」のデモ画像。ウェブ上で画
AIを使っていらすとや風の画像が生成できるサービスです。 Eテレのショートアニメです。 いらすとやが更新されたらお知らせするX(ツイッター)アカウントです。 いらすとやのLINEスタンプに関する情報をお知らせするLINEアカウントです。 ▼ 2024 (46) ▼ 7月 (2) いろいろな濡れて細くなった猫のイラスト いろいろな新紙幣のイラスト ► 6月 (14) ► 5月 (6) ► 4月 (11) ► 3月 (12) ► 1月 (1) ► 2023 (24) ► 12月 (1) ► 10月 (11) ► 7月 (1) ► 6月 (3) ► 4月 (4) ► 1月 (4) ► 2022 (65) ► 10月 (9) ► 7月 (5) ► 6月 (7) ► 5月 (6) ► 4月 (13) ► 3月 (7) ► 2月 (6) ► 1月 (12) ► 2021 (381) ► 12月 (14
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です! 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います! 必要なファイルを準備しよう! 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます! // index.html <!d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く