7

Ruby on RailsでコーディングしたWebページをバックエンドの埋め込み可能にして、ユーザーが埋め込みコードをコピーして貼り付けることで簡単に共有できるようにしたいと思います。（YouTubeの埋め込みコードによく似ていますが、Webページ用です）誰かがチュートリアルや一般的な指示を教えてもらえますか？JoomlaCMSに自分のWebページを埋め込むことを計画しています。

どうもありがとう。

橋脚。

4

3 に答える 3

18

モバイル アプリ ストア用のウィジェットを作成するとします。ウィジェットを使用すると、特定のアプリの情報を任意の Web ページに埋め込むことができます。

タグを使用するscriptと、埋め込み可能なコードは次のようになります。

<script src="http://my_appstore.com/apps/1234.js" type="text/javascript"></script>

1234 は、埋め込みたい特定のアプリの ID になります。

タグを使用するとiframe、他の Web ページに挿入するコードは次のようになります。

<iframe src="http://my_appstore.com/apps/1234" width="500" height="200" frameborder="0"></iframe>

最初に決めなければならないのは、どの種類のタグを使用するかです。とiframeタグを使用する方が簡単ですが、iframe の使用に制限されています。iframe を使用することは悪いオプションではありませんが、これをサード パーティの Web ページに配布すると、後で変更することができなくなります。代わりに、scriptiframe を挿入するタグを使用することをお勧めします。このタグを使用すると、後でコンテンツを直接ページに埋め込むように切り替えることもできます。

iframe を挿入するということは、コンテンツの縦横比を固定する必要があり、親ウィンドウのさまざまなウィンドウ サイズに合わせて変更できないことを意味します。コンテンツを直接埋め込む場合、この問題は発生しませんが、CSS には細心の注意を払い、すべての要素にスタイルを追加する必要があります。そうしないと、ホスト ページのスタイルが継承されてしまうからです。また、コンテンツを直接埋め込んでから AJAX 呼び出しを行うと、JSONP を使用しない限り、クロスブラウザー リクエストの問題が発生する可能性があります。

まず、 Railsウィジェットを埋め込むために使用するSinatraで簡単な Web ページを作成しましょう。

mkdir host_page
cd host_page

テキスト エディターを使用して、フォルダーhost.rb内にファイルを作成します。host_page

# host.rb
require 'sinatra'
get '/' do
  erb :index
end

index.erbhost_page を作成して起動します。

mkdir views
cat '<script src="http://localhost:3000/apps/1234.js" type="text/javascript"></script>' > views/index.erb
ruby host.rb

訪問http://localhost:4567/しても何も表示されませんが、すぐにウィジェットが表示されます。

では、埋め込む Rails アプリを作成しましょう。プロジェクトの新しいフォルダーから始めて、次の操作を行います。

rails new widget
cd widget/
rails g controller apps
rm app/assets/javascripts/apps.js.coffee

必要なルートを追加します。

# config/routes.rb
MyApp::Application.routes.draw do
  resources :apps
end

アプリ コントローラーを編集します。

# app/controllers/apps_controller.rb
class AppsController < ApplicationController
  def show
    @mobile_app = {
      :title => "Piano Tutorial",
      :descr => "Learn to play piano with this interactive app",
      :rating => "*****"
    }
  end
end

そのコントローラーでは、常に同じアプリを返しています。実際の状況では、params で見つかったモデル ID から適切なアプリ データを取得するモデルとコントローラーがあります。

JavaScript ビューを作成し、サーバーを起動します。

echo 'document.write("<h3><%=@mobile_app[:title]%></h3><p><%=@mobile_app[:descr]%></p><p><em><%=@mobile_app[:rating]%></em><p>");' > app/views/apps/show.js.erb
rails server

以上です。http://localhost:4567/ウィジェットに移動して表示します。

iframeを使用する場合は、show.js.erbファイルの内容を次のように置き換えます。

document.write("<%=escape_javascript(content_tag(:iframe, '', :src => app_url(params['id'])).html_safe)%>");

ここでは a を使用していますが、以前のようにタグをcontent_tag使用するだけで、前の方法と同様の方法で行うこともできます。<iframe>

明らかに、iframe を使用する場合、2 つの呼び出しを行います。1 つは iframe をレンダリングするため、もう 1 つはその iframe のコンテンツをロードするためです。この 2 回目の呼び出しでは、まだ html ビューがありません。そのようなビューを作成するだけです：

# app/views/apps/show.html.erb
<h3><%=@mobile_app[:title]%></h3>
<p><%=@mobile_app[:descr]%></p>
<p><em><%=@mobile_app[:rating]%></em><p>

これで、再びiframehttp://localhost:4567/内のウィジェットをポイントして表示できます。

于 2013-02-11T18:57:04.550 に答える
1

誰かがこれに出くわした場合、ほぼ9年後...

JavaScript メソッドを使用する場合は、上記のコメントで言及されている @abessive のように、Cross-Origin リクエストを許可する必要があります。これをコントローラークラスの先頭に追加することで、これを行うことができました。

protect_from_forgery except: :method

は:method、埋め込みリクエストに対して呼び出されるメソッドです。

これが私のコントローラーです：

class PagesController < ApplicationController
  protect_from_forgery except: :home

  def home
    render 'index.js'
  end
end

そして、routes.rb 内の関連するルート:

get "index.js", to: "pages#home"

そして、ウィジェットをレンダリングするJSコードを含むviews/pages/index.js.erbがあります。

(Rails 6.1.4 を使用しています)

于 2022-01-23T21:25:31.110 に答える