質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Q&A

1回答

7007閲覧

BlazorにJavaScript(.js)ファイルのインポートする方法

teilmari

総合スコア14

blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

0グッド

0クリップ

投稿2020/06/14 21:58

Swiper(https://swiperjs.com/get-started/)という、cssとjsのみ画像スライダーを実現するコードを使用したいのですが、
jsファイルの読み込み方法がわかりません。
サムネイル付き画像スライダーを表現する、Swiperのカスタムjsファイル「topimages.js」はwwwroot/js/topimages.jsに配置しています。

Pages/_Host.cshtml内に、

@My-Swiper jsとcssのCDN(1)@

<head>に上記サイトの載っているSwiperのcssとjsのCDNタグを付けました。

@My-Swiper Swiperのカスタムjsファイル(2)@

<script src="~/js/topimages.js"></script>タグも付けても変わらず。

@My-Swiper(3)@

<script>タグでtopimages.jsの内容をそのまま張り付けてもみたのですが変わらず。 @*My-Swiper(4)*@ <app>タグの中に<script>を入れるのは良くないというのを読んだので試しに外側に。 ```Blazor Pages/_Host.cshtml @page "/" @namespace BlazorApp2.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>BlazorApp2</title> <base href="~/" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link href="css/site.css" rel="stylesheet" /> @*My-Swiper jsとcssのCDN(1)*@ <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
@*My-Swiper Swiperのカスタムjsファイル(2)*@ <script src="~/js/topimages.js"></script> @*My-Swiper(3)*@ <script> var slider = new Swiper('#slider', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev' }) var thumbs = new Swiper('#thumbs', { centeredSlides: true, spaceBetween: 10, slidesPerView: "auto", touchRatio: 0.2, slideToClickedSlide: true }); slider.params.control = thumbs; thumbs.params.control = slider; </script>
</head> <body>
<app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app> <div id="blazor-error-ui"> <environment include="Staging,Production"> An error has occurred. This application may no longer respond until reloaded. </environment> <environment include="Development"> An unhandled exception has occurred. See browser dev tools for details. </environment> <a href="" class="reload">Reload</a> <a class="dismiss">????</a> </div> <script src="_framework/blazor.server.js"></script> @*My-Swiper(4)*@ <script type="text/javascript" src="~/js/topimages.js"></script>
</body> </html>
jsファイルを読み込ませたい先のPages/MyPages/TopImages.razorのコードになります。 ```Blazor Pages/MyPages/TopImages.razor @page "/topimages" @inject IJSRuntime JSRuntime @inherits ArticleItem <h3>TopImages</h3> @foreach (var build in builds) { <div id="slider" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="/Images/Builds/@build.ArtImageUrl" style="width:300px; height:auto;"></div> </div> <div class="swiper-button-prev swiper-button-white"></div> <div class="swiper-button-next swiper-button-white"></div> </div> <div id="thumbs" class="swiper-container mb60"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="/Images/Builds/@build.ArtImageUrl" style="width:100px; height:auto;"></div> </div> </div> } @code { }

海外サイトを翻訳かけつつ調べてみたのですが、ファイル自体の読み込む方法がわからずでして・・・。
どなたかご教示頂けないでしょうか、
どうぞ宜しくお願いいたします・・・。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/06/15 00:44

開発環境(Visual Studio のバージョン、プロジェクトを作成したテンプレート、WebAssmbly か Server のどっちかなど)を書いてください。
退会済みユーザー

退会済みユーザー

2020/06/15 00:56

Swiper というのが動かないだけで例えば質問者さんが簡単な JavaScript のサンプルを作ってそれを動かすのは問題なくできるのか、それともそもそも Swiperが動かない以前に JavaScript は全く動かないのかどっちですか?
guest

回答1

0

質問者さんが行方不明ですが、自分がかかわったスレッドがこのまま放置されて終わってしまうのもなんですので、たぶん VS2019 の Blazor Server のテンプレートで作ったアプリの話であろうと想像して回答を書いておきます。

質問にある topimages.js とか正体不明ですしコードはいろいろいじり倒しているので、質問のコードをベースに話はできないです。なので、Swiper のデモのページ(URL 下記)の Default Setup をベースに話をします。

Swiper Demos
https://swiperjs.com/demos/

質問者さんの問題は Blazor での Swiper の初期化、すなわち上のデモ Default Setup のソースコードで言うと下のコードを Blazor でどのように実行するかだと思います。質問のコードは他にも問題があるかもしれませんが、少なくとも初期化ができてないのは明白です。

<!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container'); </script>

Swiper のデモ Default Setup を Blazor Server アプリで動かすためのコードは以下の通りです。

_Host.cshtml

赤枠部分が Swiper のデモ用に追加した部分です。swiper.css, swiper.js は CDN から取得します。

イメージ説明

swiperexample.css

デモのソースコードの <!-- Demo styles --> のスタイルです。_Host.cshtml にインラインで含めても良いのですが、普通はそういうことはしないと思います。なので、wwwroot/css フォルダ下に外部ファイルとして作成し、上の _Host.cshtml から参照します。デモのソースコードの .swiper-container の width:100% が原因でサイズを変えると中身が消えてしまうことがあるので 600px x 300px に変更してます。

イメージ説明

swiperexample.js

これも _Host.cshtml にインラインで含めても良いのですが、wwwroot/js フォルダ下に外部ファイルとして作成し、上の _Host.cshtml から参照してます。赤枠の部分が上で述べた Swiper を初期化するためのものです。この initializeSwiper メソッドを Razor コンポーネントの @code ブロックの中から呼び出せば Swiper を初期化できます。

イメージ説明

Razor コンポーネント

画像の一番下の赤枠のコードが JavaScript の initializeSwiper メソッドを呼び出して Swiper を初期化するコードです。

イメージ説明

コンポーネントのレンダリングが完了した後に呼び出される OnAfterRenderAsync または OnAfterRender で行うのがよさそうです。他にも OnInitializedAsync とかがありますが、そのタイミングでは早すぎるようです。それらのメソッドの詳細は以下の記事を見てください。

ASP.NET Core Blazor ライフサイクル
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1

結果

赤枠部分が Swiper デモのものです。ブラウザは Windows 10 の Chrome です。

イメージ説明

投稿2020/06/16 03:19

編集2020/06/16 03:22
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問