HTML

プロジェクト概要 今日のWeb開発分野において、ユーザーエクスペリエンスとインターフェースデザインはますます重要になっています。 Mac Web Vue Templateは、macOSのデザインにインスパイアされた、モダンでエレガントなVue.jsのWebテンプレートです。Vue.jsをベースにした現代的なWebアプリケーションテンプレートであり、そのデザインはmacOSの優雅なインターフェースから着想を得ています。このプロジェクトは、美しいUIデザインだけでなく、完全なプロジェクト構造とベストプラクティスも提供します。 オンラインデモ WebAi にアクセスすることで、このテンプレートの実際の効果を体験できます。招待コード(MoeJue) 主な特徴 macOS風のUIデザイン macOSのデザイン言語を採用 洗練されたすりガラス効果 エレガントなアニメーショントランジション モダンな技術スタック Vue.jsをコアフレームワークとして使用 Viteをビルドツールとして使用 Piniaによる状態管理 Vue Routerによるルーティング処理 SCSSプリプロセッサ ES6+のモダンな機能 レスポンシブデザイン あらゆる画面サイズに完璧に対応 スムーズなモバイル体験 プロジェクト構造の解説 プロジェクトは、明確でモジュール化されたディレクトリ構造を採用しています： src/ ├── assets/ # 静的リソース ├── components/ # Vueコンポーネント │ ├── common/ # 共通コンポーネント │ ├── system/ # システムコンポーネント │ └── apps/ # アプリケーションコンポーネント ├── views/ # ページビュー ├── router/ # ルーティング設定 ├── stores/ # 状態管理 └── utils/ # ユーティリティ関数 この構造設計により、プロジェクトは良好な保守性と拡張性を備えています。 開発規範 プロジェクトは厳格な開発規範に従っています： 命名規則 ...

最初のギャラリーから画像アップローダー、そして現在のアルバムに至るまで、私の画像に対するこだわりは、もはや世紀をまたぐほどのものです。ギャラリーの画像は七牛雲（Qiniu Cloud）に保存していましたが、後にトラフィックを不正に消費されたため閉鎖しました。画像アップローダーは現在、ブログ用の画像アップロードサービスとして利用しています。アルバムは、スマートフォンのアルバムのような概念で、画像も動画も保存できます。徐々に完成度が高まってきています。 ここ数日で、普段保存している動画や画像などをサーバーにアップロードし、UIとAPIを作成して、ついでにオープンソースとして公開しました。（私は熱心なオープンソース支持者でありたいと思っています） 私の二次元アルバム フロントエンドUI ここは阿珏ちゃん（A-Jue-chan）のプライベートアルバムで、普段収集した画像や、各プラットフォームで「いいね」や「お気に入り」登録した動画を保存しています。 Bilibili、YouTube、TikTok、X、Facebook、pixivなどのプラットフォームの動画や画像を含みますが、これらに限定されません。関連するデータ情報の著作権はすべて原作者に帰属します。 データは不定期に手動で更新されます。特定の画像や動画が必要な場合は、直接阿珏ちゃんにご連絡ください。 プレビュー https://photo.moejue.cn 特徴 画像と動画の表示をサポート アルバムの表示をサポート アルバムのパスワード保護をサポート 18+保護をサポート 検索機能をサポート Todo エフェクト表示の最適化 UIの滑らかさの最適化 インストール手順 リポジトリをローカルにクローンします： git clone https://github.com/iAJue/PhotoGallery.git プロジェクトディレクトリに移動します： cd PhotoGallery 依存関係をインストールします： npm install プロジェクトをビルドします npm run build バックエンドAPI 参考用 https://github.com/iAJue/wasteCode/tree/main/photo 返却データ形式 写真API [ { "date": "\u6628\u5929", "items": [ { "src": "https:\/\/moejuevideo.pages.dev\/file\/1730957555106_ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp", "alt": "ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp", "isVideo": false, "duration": null } ] } ] アルバムAPI [ { "folder_id": "3", "folder_name": "images", "created_at": "2024-11-07 15:09:06", "photo_count": "61", "latest_image": "https:\/\/moejuevideo.pages.dev\/file\/1730963758087_GZIaBGlbAAALz_E.jpeg", "attribute": "2", "ispassword": true } ] ランダムAPI ...

ネット速度の速遅による違いについて ネットワークの普及に伴い、ユーザーは応答速度の速遅をますます重視するようになっています。ウェブサイトが速ければ速いほど、ユーザーの定着率とコンバージョン率も高まります。 簡単に言えば、スピードアップが重要です！ウェブサイトの速度に影響を与える要因はたくさんあります。例えば…………………. 真面目な話は私のスタイルではありません。さて、私のパフォーマンスをご覧ください。 アイデアの起源： 最初は純粋なCSSで実装することを考えました。背景画像をbase64エンコードしてbackground-imageに直接配置すれば、背景画像がウェブページと一緒に読み込まれる効果が得られるだろうと。 ステップ1： まず、事前に準備した素材画像を処理し、水着と水着のスカートを脱がせます ステップ2： 新しいHTMLファイルを作成します ステップ3： 完了。。 すると問題が見つかりました。私の背景画像ファイルサイズが12MBに達していたため、エンコード後の文字列が大きすぎ、ウェブページの読み込みが重く遅くなり、まったくユーザー体験がありませんでした。 さらに、この方法で読み込まれた背景画像は突然表示され、唐突すぎて効果が良くありませんでした。 その後、変更しました： CSS+JavaScriptで実装することにしました。background-imageで背景画像を直接読み込むことで、徐々に表示される効果が得られ、背景画像の読み込みが完了した後、JSで動的に画像を挿入します。 window.onload = function(){ var img=new Image(); img.src=‘裸体.jpg’; if(img.width==0){ alert(‘图片加载失败’) }else{ document.getElementById(“泳衣”).style.backgroundImage=“url(泳衣.png)”; document.getElementById(“泳裙”).style.backgroundImage=“url(泳裙.png)”; } } 思わず一言漏らしました。「なんてひどいネットワークだ、遅すぎて人物画像の服すら読み込めないなんて！」

5月20日の告白以来、ハト主は行方不明の状態が続いていました……. 何ヶ月ぶりか分かりませんが、三合一がまた更新されました。2ヶ月前にグループで立てた目標を、今日達成しました。間の2ヶ月間何をしていたかは聞かないでください-.-（大規模なハトの集会に参加するのに忙しかった） 正文 ネットワーク認識が頻繁にダウンし、非常に不安定であるというフィードバックを多くの仲間から受けていたため、今回特別にローカル認識を更新しました。 1G以上のメモリを搭載したマシンへのインストールを推奨します。推奨構成は2コア2G、最適構成は16コア32Gです [#手動顔文字] v2.0 ローカルQRコード認識と生成を追加 ネットワーク認識インターフェースを削除 既知のバグを修正 その他のいくつかの詳細な最適化 詳細な説明とインストールチュートリアルは、こちらをクリックして以前のバージョンをご覧ください。 新しいバージョンのウェブサイトはすべて古いバージョンのデータを保持しており、以前のユーザーの使用には影響せず、スポンサー版のデータとも同期されています。 スポンサー版 旧バージョンの海賊版が横行していたため、新版の三合一にはスポンサー版が追加されました。 デモサイト：https://qr.moeins.cn スポンサー版の主な特徴： QRコードの認識と生成を最適化し、認識精度を大幅に向上させ、認識速度を高速化し、CPUとメモリを占有せず、より安定しています。 21種類の三合一生成テンプレートを新規追加し、無限拡張をサポートします。追加チュートリアルは文末にあります。 外部APIインターフェースを新規追加しました。このプログラムに限定されず、どのプログラムからでも呼び出し可能です。 入手方法： こちらをクリックして18.88元以上をプロジェクトに寄付すると、決済コード三合一のスポンサー限定版を入手できます。ぜひお試しください！ スポンサー版に関するいくつかの小さな説明（これまでは特に説明していませんでした） これまでのところ、私のすべてのスポンサー版プロジェクトはドメインに縛られず、暗号化されておらず、自由に拡張でき、二次開発をサポートしており、スポンサー金額も低く設定されています。そのため、スポンサーしてくださった方々は、入手したソースコードを安易に共有しないようお願いいたします。これは作者への敬意であり、ご自身の権利の保護でもあります。売買関係ではないため、重大なバグがない限り、作者は不定期に更新するか、無期限に更新を延期する場合があります。小さな問題が発生した場合、作者が空いている時間であれば指導や修正を手伝う用意がありますが、大規模な新機能の追加といった場合には、協力を拒否するか、別途料金をいただく権利があります。 スポンサー版テンプレート拡張チュートリアル テンプレートの推奨サイズは：900*1200 テンプレート画像を/public/static/images/template/テンプレートディレクトリに配置します。注意点として、中国語名を使用せず、jpg拡張子のみをサポートします。 ルートディレクトリのconfig.phpにあるqr_template項目に関連データを以下のような形式で設定します。 '001' => [ 'name' => '默认模板', 'data' => [ 150,200 ], 'title' => true, 'size' => 20 ] パラメータ説明 名称 変数名 必須 型 例 説明 テンプレートID なし はい int 001 テンプレートのファイル名。数字を推奨し、重複不可。 エイリアス name はい string デフォルトテンプレート フロントエンドに表示されるテンプレートのエイリアス X,Y data はい array [150,200] QRコード生成の左上隅の開始X（横座標）、Y（縦座標）座標。負の値は不可で、テンプレートサイズより小さいこと。 テンプレートタイトル title いいえ bool false テンプレートタイトルを有効にするかどうか。テンプレートがサポートしている場合（デフォルトテンプレートなど）に使用。空でも可。 サイズ size いいえ int 20 QRコードの生成サイズ。デフォルトは20。空でも可。 はい、とても簡単です！

これは非常に基本的なHTMLフォームの送信に関する問題ですが、非常に実用的なテクニックでもあります。 私の業務シーンは次のとおりです： inputを動的に作成できるフォームです。下の図のように。 これは、inputのnameを固定値にできないことを意味します。さもなければ、間違いなく上書きされてしまいます。 1つ目は、従来の一般的な送信方法で、送信する各inputに一意のnameを付けます。 ...... ブラウザが送信したデータをキャプチャした形式は次のようになります。 サーバー側で取得して出力するとこのようになり、バックエンドでのデータ処理には非常に不親切です。 2つ目は、配列形式でのフォーム送信です。 ...... ブラウザとバックエンドでの出力はそれぞれ次のようになります。 よく見ると、送信されたnameの値が変化し、同じような？配列？になっていることがわかります。 バックエンドに送信すると、データが以前よりもずっと整理されていることがわかります。 ただし、ここで注意すべき点は、送信する配列のキーに引用符を使用する必要はないということです。さもなければ、引用符もキーの一部になってしまいます。 もちろん、実際の開発では、送信するグループの数（上記の1、2、3のような）が不確定で、フロントエンドで自由に追加できるという問題に遭遇することもあります。このような場合、どうやって配列を使ってこれらの内容を送信すればよいのでしょうか？ 以下が私の業務での実際の解決策です このようにすれば、2次元配列のキーを自分で管理する必要がなくなり、ブラウザが自動的に生成してくれます。 バックエンドで受信したデータはこのようになり、非常に処理しやすくなります。 この方法は、不確定な数の関連データセットをまとめて送信する場合に適しています。 一件落着！〜

1、シーン：ある選手のランキングと、1つ上の順位の選手との票差をクエリする 方法2（重複を除外してソートし、自分より票の少ない数をクエリする） $temp = DB::fetch_first(“SELECT distinct total+jewel_vote+forge_vote ,COUNT(*)+1 AS RANK FROM " . DB::table(‘vote_competition’) .” WHERE total+jewel_vote+forge_vote>" . $competition[‘all’] . " and aid={$aid} ORDER by forge_vote desc"); $rank = $temp[‘RANK’]; 1つ上の順位の選手の票数を直接クエリすることはできない if ($temp[’total+jewel_vote+forge_vote’]) { //ここでクエリされるのは1位の選手との票差です $up = $temp[’total+jewel_vote+forge_vote’]-$competition[‘all’]; } 方法1（変数を定義して累加ソート） $temp = DB::fetch_all(“SELECT a.cid,a.total,a.forge_vote,a.jewel_vote,(@rowNum:=@rowNum+1) AS rank FROM pre_vote_competition AS a, (SELECT (@rowNum :=0) ) b WHERE aid={$aid} ORDER BY (a.total+a.forge_vote+a.jewel_vote) DESC “); foreach ($temp as $key => $value) { if ($value[‘cid’] == $cid) { //現在の自分のランキング $rank = $value[‘rank’]; if ($up) { $up = $up - ($value[’total’] + $value[‘forge_vote’] + $value[‘jewel_vote’]); } break; } //1つ上の順位の選手との票差 $up = $value[’total’] + $value[‘forge_vote’] + $value[‘jewel_vote’]; } ...

ブログ | デモサイト | QQグループ | GitHub 洗練されたLaravelフレームワークと、全然可愛くないMeizi UIに基づいたオンライン動画アプリケーション 作者より オンライン動画サイトはどこにでも溢れていますが、それは私が自分で一つ書くことを妨げるものではありません。こうすれば、後で自分でアニメを見るのも便利になりますし、結局、自分で手を動かしてこそ豊かになれるものです。さらに新しい知識も学べるのですから、なんと素晴らしいことでしょう。 ページデザインは一部のウェブサイトを参考にしました。動画リソースはすべてインターネットからのものです。もし著作権侵害がありましたら、速やかにご連絡ください。 一緒にあのうんざりする60秒広告を捨てましょう〜 データベースなし、バックエンドモードなし、設定ファイルは一つだけ(config/web.php) 広告なし、VIP解析をサポート、公式ソース、高速、多チャンネル、多カテゴリ To-do: 独立したチャンネルホームページ テレビ局ライブ配信 複数の解析インターフェース 追加予定… スポンサー限定版 これはデュアルバージョンアプリケーションです。つまり、2つの異なるバージョンがあります。スポンサー版は通常版を最適化したもので、機能とパフォーマンスが大幅に向上し、実行速度が大幅に向上し、優先的な更新が維持されます。 さて、問題です。スポンサー限定版はどのように入手できますか？ ここ または ここ でプロジェクトに58元以上を寄付することで入手できます。 もちろん、もしプロジェクトがあなたのお役に立てたなら、またはあなたが必要とするなら、私たちを支援することを選択できます。たとえわずかな金額でも、それは愛です。 オープンソースプロジェクトを書く人が利益のために書くことはないと思います。結局のところ、それはレンガ工場で一日レンガを運ぶよりも稼げないからです。 インストール要件 LNMP/AMP (PHP5.6+が必要) curl、OpenSSL拡張機能 Composer Composerによるメインプログラムのインストール 1. Composerを使用してmoeinsをインストール $ composer create-project a-jue/moeins #依存ライブラリのインストール後、インストールスクリプトが自動的に実行されます #以下のプロンプトが表示されたらインストール完了です > Illuminate\Foundation\ComposerScripts::postInstall > php artisan optimize Generating optimized class loader The compiled services file has been removed. > php artisan key:generate Application key [base64:Hx0I9UUQg7OyIz8lpDYG6Y/gW1uxS760ERdWfGG2jyQ=] set successfully. 2. ディレクトリ権限 publicサブディレクトリを公開Webディレクトリとして設定します 3. URLリライト Apacheサーバーの場合、プロジェクトディレクトリ内の.htaccessにはすでにリライトルールが設定されています。必要に応じて適宜修正してください。Nginxサーバーの場合、以下は参考となる設定です： ...

CSS3のランダム背景画像フェードイン・フェードアウト切り替えエフェクト デモ効果はこの記事の背景に表示されています 皆さんが私の幻想領域二次元限定版のソースコードを解析するのに苦労しているようなので（30分以上もかけている人もいるようです）、時間を見つけて整理して公開することにしました 当初はjQueryで実装する予定でしたが、CSS3の@keyframesルールに気づきました。CSS3は、かつてJSでしか実現できなかった効果を実装できるほど強力になっています 定義と使い方 @keyframesルールを使用することで、アニメーションを作成できます。 アニメーション作成の原理は、あるCSSスタイルを別のスタイルに徐々に変化させることです。 アニメーションの過程で、このCSSスタイルを複数回変更することができます。 変化が起こるタイミングは、パーセンテージで指定するか、キーワード「from」と「to」（それぞれ0%と100%に相当）で指定します。 0%はアニメーションの開始時点、100%はアニメーションの終了時点です。 最高のブラウザサポートを得るためには、常に0%と100%のセレクタを定義する必要があります。 注：アニメーションの見た目を制御するには、アニメーション関連のプロパティを使用し、アニメーションをセレクタにバインドしてください。 CSSのコア部分（画像アドレスの変更を忘れないでください） body { background: #000; background-attachment: fixed; word-wrap: break-word; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-repeat: no-repeat } ul { list-style: none } .cb-slideshow li:nth-child(1) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099) } .cb-slideshow li:nth-child(2) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159) } .cb-slideshow li:nth-child(3) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149) } .cb-slideshow li:nth-child(4) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139) } .cb-slideshow li:nth-child(5) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129) } .cb-slideshow li:nth-child(6) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119) } .cb-slideshow,.cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2 } .cb-slideshow:after { content: '' } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: -2; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s } .cb-slideshow li:nth-child(2) span { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s } .cb-slideshow li:nth-child(3) span { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s } .cb-slideshow li:nth-child(4) span { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s } .cb-slideshow li:nth-child(5) span { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s } .cb-slideshow li:nth-child(6) span { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out } 17% { opacity: 1; -webkit-transform: scale(1.1) rotate(0) } 25% { opacity: 0; -webkit-transform: scale(1.1) rotate(0) } 100% { opacity: 0 } } もちろん、HTMLコードと組み合わせる必要があります HTML部分（中のテキスト部分との数は自由に変更可能です） ...

約3ヶ月ぶり、最初のランダム二次元画像APIの公開からかなりの時間が経ちました。 第二弾API、突然の登場です。 更新内容： 前バージョンと比較して、今回の画像は、背景画像やデスクトップ壁紙などにより適しています。 前バージョンはまさに寄せ集めで、あらゆる種類の画像があり、ひどいものでした（私自身も使っていません）。今回のバージョンでは、時間をかけて一部の画像（1080P以上）を選別し、新浪雲にアップロードしました。 真の意味でHTTPSをサポートし、画像はすべて新浪雲でホストされており、速度も向上しました。 あらゆる意味でのパラメータ設定を削除しました。 画像コンテンツはすべてアニメ・二次元画像です（全年齢向け（笑））。 APIエンドポイント： https://random.52ecy.cn/randbg.php はい、呼び出しはこれほど簡単です。直接アクセスするだけで利用できます。どうぞお試しください。 以前の簡易版 プロジェクトホームページ ランダムアニメ壁紙、毎日更新して、毎回違う画像を楽しめます。

HTML5は、World Wide Webのコア言語であり、標準汎用マークアップ言語を応用したハイパーテキストマークアップ言語（HTML）の5回目の大幅な改訂版です。 1999年以降、HTML 4.01は大きく変化しました。今日では、HTML 4.01の一部の要素は廃止され、これらの要素はHTML5で削除または再定義されています。現代のインターネットアプリケーションをより良く扱うために、HTML5では多くの新しい要素と機能が追加されました。例えば、図形の描画、マルチメディアコンテンツ、より良いページ構造、より良いフォーム処理、そしてドラッグ＆ドロップ要素、ジオロケーション、ウェブアプリケーションキャッシュ、ストレージ、ウェブワーカーなどのいくつかのAPIが含まれます。 タグ 説明 タグは、グラフやその他の画像などのグラフィックを定義します。このタグはJavaScriptの描画APIに基づいています。 実行結果の表示： お使いのブラウザはHTML5をサポートしていません コード部分： お使いのブラウザはHTML5をサポートしていません // キャンバスオブジェクトを取得 var my_canvas = document.getElementById(“my-canvas”); // 描画コンテキスト（ブラシ）を取得 var my_huabi = my_canvas.getContext(“2d”); var x = 50; var y = 50; var r = 20; function deawBall(x,y){ // ブラシの色を設定 my_huabi.fillStyle = “green”; // 新しいパスを開始 my_huabi.beginPath(); // ボールを描画 my_huabi.arc(x, y, r, 0, 2 * Math.PI); // パスを閉じる my_huabi.fill(); } var fx_x = true;//fx_xがtrueの場合、x軸方向に移動 var fx_y = true;//fx_yがtrueの場合、y軸方向に移動 var speen = 1; // タイマー window.setInterval(“moveBall()”, 10); function moveBall(){ // 現在のボールの移動方向を判断 if(fx_x == true){ x += speen; if(x >= 500-r){ // 下端に達したら、上向きに跳ね返る fx_x = false; } }else{ x -= speen; if(x <= 0+r){ // 上端に達したら、下向きに跳ね返る fx_x = true; } } if(fx_y == true){ y += speen; if(y >= 400-r){ // 左端に達したら、右向きに跳ね返る fx_y = false; } }else{ y -= speen; if(y <= 0+r){ // 右端に達したら、左向きに跳ね返る fx_y = true; } } // キャンバスをクリアして再描画 my_huabi.clearRect(0, 0, 500, 400); deawBall(x, y); }