BinaryDevelop

  • html2canvasを使ってcanvasにhtmlの内容を書き込んで画像を生成する方法

    前回は、canvas の基本的な使い方を簡単に説明しましたが、今回は、canvas に html の内容を記述して画像を生成する方法を説明します。 html2canvasの公式サイトです。 http://html2canvas.hertzen.com I: html2canvas プラグインをダウンロードする 1: html2canvas プラグインを直接ダウンロードする。 html2ca

    2022-01-14 23:07:10

  • [ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について

    前置き 最近、クライアントのネイティブページを預かった。クライアントは、そのページがIE9以上に対応していること、また、360ブラウザの互換モードが正常にアクセスできることを要求していました。360ブラウザはコードで強制的にエクストリームモードにすることができるので、この問題は比較的簡単に解決することができます。しかし、IE9に対応するためには、多くのCSS3プロパティやH5の新しいAPI

    2022-01-14 22:57:11

  • Html5ポジショニングの究極のソリューション

    背景 新会社への2つ目のプロジェクトは、WeChat内を中心に、他のブラウザも考慮したH5モールを小さなパートナーたちと作ることです。中でもホームページは、現在のユーザーの緯度・経度から最も近い店舗を探し出し、表示する必要があります。フロントエンドが行うべき作業は、ユーザーの緯度と経度を取得し、バックグラウンド・インターフェースに問い合わせ、ページをレンダリングすることです。

    2022-01-14 22:43:17

  • iPhoneXの画面適応 WeChatアプリとH5でセーフエリア下部の小さな黒いバー

    最近、アプリを書くときにiPhoneXの下部の小さな黒い線がコンテンツに重なる問題に遭遇しましたが、実はこれ、iPhoneXのセーフエリアの適応なんです。 前置き Apple iPhone X , iPhone XR などでは、物理的なホームボタンが廃止され、ホームボタン機能の代わりに下部に小さな黒いバーが表示されていることが確認できます。WeChatアプレットやh5ページは

    2022-01-14 22:29:32

  • HTMLのFormのmethod属性の使い方を紹介します。

    1 methodは、サーバーへのデータ送信方法を指定する属性です 2 postとget postのみ可能：公式にはpostセッションでサーバーにデータを送るという説明になっている。実際はデータの送信。 get：アクションが指すURLにフォーム内のデータを変数=値として追加し、両者を"？"でつなぐ。変数間は"&"。一般にサーバーからデータを取得するのに使われる。 3,デフォルトはget

    2022-01-14 22:03:57

  • モバイルやWeChatでHTML5の音声が自動再生されない問題を解決。

    H5ページを再度行ったところ、モバイル側とWeChat側で自動再生を追加しても音声が自動再生されないことがわかりました。 通常の解決策は、インタラクティブなイベントを与えることです。 タグを使用します。 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto"> audio属性はこの

    2022-01-14 21:33:38

  • VSCodeカスタムhtml5テンプレート実装

    (a) 新しいhtmlショートカット VSCodeで新規にhtmlコードを作成する場合、「！」を入力し、EnterまたはTabで以下のようなhtmlファイルのテンプレートが自動生成されます。  (ii) カスタムhtml5テンプレート しかし、毎回新しいhtmlテンプレートを作成するのは、いつも単調に感じてしまいます。例えば、Vueを自動的に導入して、

    2022-01-14 21:33:33

  • canvasを用いたキャプチャ表示の実装

    最近、削除ボタンをクリックすると、削除を確認するためにキャプチャを入力させるポップアップボックスが表示される、という小さな要件を作りました。 では、バックエンドから取得したキャプチャをどのように表示し、ユーザーが入力できるようにするのでしょうか。要件を理解したとき、バックエンドがユーザーの携帯電話に直接コードを送って入力させるのかと思ったのですが、そうではなく、私が誤解していたようです。

    2022-01-14 20:16:21

  • Html5 video タグ 動画のベストプラクティス

    4Gの普及やWiFiの普及により、携帯電話のインターネット速度は安定して高く、動画を使ったHTML5が一般的になりつつあり、フレームアニメーションよりも動画の方が表現力が豊かになっています。 ビデオの属性 <video id="video" src="video.mp4" controls = "true" poster="images.jpg"

    2022-01-14 20:09:19

  • [css3]CSS3アニメーションによる光のボタンの流れの効果

    css3を学んでいく過程で、css3のプロパティを使って簡単に実現できる格好いい効果をたくさん見つけました。animationはcss3のアニメーション効果でよく使われるプロパティです。このプロパティを使って、次のようなマウスオーバーボタンをストリームボタン効果で作る方法を学んでいきましょう〜。 その前に、animationプロパティの使い方を簡単に紹介します。 アニメーション

    2022-01-14 20:01:19

  • HTML5でオプションのスタイルシートを使ってWebサイトやアプリケーションにダークモードを追加する方法を解説

    サイトへのダークモードの追加 ダークモードは、Twitter、Instagram、WhatsApp、YouTubeなど、すでに多くの人気Webサイトやアプリで採用されています。しかし、自分のウェブサイトにこのパターンを追加するにはどうすればよいのでしょうか？ 私は以前から、ウェブサイトのダイナミックなカラーテーマ切り替え機能の大ファンです。好きなカラーテーマを選べるので、ユー

    2022-01-14 19:42:08

  • htmlにおけるhiddenフィールドの役割とその使用例

    基本的な構文 <input type="hidden" name="field__name" value="value"> 役割です。 1 ヒドゥンフィールドは、ページ上でユーザーから見えないようになっています。フォームに隠しフィールドを挿入する目的は、フォームを処理するプログラムが使用できる情報を収集または送信することです。閲覧者が「送信」ボタンをクリックしてフォーム

    2022-01-14 18:43:23

  • postMessageを用いたiframeのクロスドメイン実装について

    ドメインB.comが提供するページサービスをドメインA.comで利用したい場合、直感的に実装できる方法はiframeを利用することです。しかし、iframeでの直接対話には **クロスドメイン問題** があり、これを解決する方法は2つあります。1つは、直接ドメインBを指して、直接クロスドメインを殺し、指定された転送ルールを設定するには、ドメイン上のnginxプロキシ転送、nginxを使用するには、

    2022-01-14 18:25:16

  • divやimgの画像の高さを幅に合わせる方法

    この方法は主にサイトの適応性を高めるために使用されますが、画像を読み込んだ後にコンテンツの高さを保持し、ページのスクロールを回避するためにも実装することが可能です。 I. 画像の幅をjsで決定して特定の値を取得し、jsで画像の高さを設定することができます（ここでは詳しく説明しません）。 jsを使うデメリットとしては、画像の高さを調整できるのはページ更新時のみで、ブラウザのウィンド

    2022-01-14 18:16:33

  • iframeタグが入れ子になっている問題の解決法

    問題の説明 バックエンドの管理システムにeasyuiを使用する場合、ツリーコンポーネントを使用してツリーメニューを実装し、該当メニューをクリックするたびに、それが第一階層のメニューであるかどうか、またURLの有無から既に存在するかどうかを判断しています。 data = pd.read_excel('shop_address.xlsx', sheet_name='uniqlo'

    2022-01-14 18:01:04

  • html2canvasのスクリーンショットが空白になる問題の解決法

    最近、あるプロジェクトでWebスクリーンショット機能を提供する要件に出くわしました。Baiduはhtml2canvasがうまく機能することを発見しました。そこで、試してみることにしました。 でリソースをダウンロードします。 プラグインのダウンロードアドレスです。 html2canvasダウンロードアドレス 使用方法 プロジェクトで使用されているrea

    2022-01-14 17:50:14

  • html5でtype="range "属性のスライダー機能を実装する。

    html5のtype="range"属性によるスライダー機能。 1. html5では、スライダーに関するタグが追加され、実際にはinputタグを拡張し、type属性の値をrangeとします。 2. 面白いので、スライダーのアニメーションの例を作ってみました。動画の自動再生と一時停止にやや似ていますが、開始ボタンと終了ボタンでスライダーのスライドと停止をコントロールしながら、その時のス

    2022-01-14 16:26:05

  • キャンバスを使ってWeChatアバターなしの招待状ポスターを生成する

    私は最近、WeChatの中でアクセス可能なH5のページを作り、長押しで画像を共有するために友人の招待ポスター、オンライン検索情報を送信するために、解決策を思い付いた、画像を生成するためにページを描画するためにキャンバスを使用してください。     問題：キャンバスの画像がクロスドメインになる。     解決プロセス（空白を埋

    2022-01-14 15:45:59

  • postMessageを用いたiframeのクロスドメイン通信問題の詳細な解決法

    今週は頭の痛いことに遭遇しました。別のサードパーティのウェブプロジェクトを私のウェブプロジェクトに組み込みたかったのです。最初に思いついたのはiframeを使うことでしたが、問題はサードパーティのウェブプロジェクトとやりとりすることで、同一生成元ポリシーに違反すること、そしてクロスドメインの問題に対処することが最大の頭痛の種でした。 要件は、私のページでいくつかのボタンをクリックし、リアル

    2022-01-14 15:06:03

  • html5 地図の現在位置の矢印の作り方の例

    機能ポイント 現在の位置の取得 現在のデバイスの向きを常時表示する ハイライト h5を開くたびに、単純に取得したデバイスの向きが正しく表示されない。これは、開くたびにマップ自体がデバイスの向きに影響されるためです。 そのため、コンパスの向きを再度取得して修正する必要があります。 アプレットがデバイス、コンパスの方向を取得し、h5が位置決め矢印をレン

    2022-01-14 15:01:59

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します