質問編集履歴

6 質問変更

trafalbad

trafalbad score 219

2017/06/24 21:09  投稿

slimをhtmlに変換したいのですがslim文の意味がわかりません
javascriptのエラーについて
下記のslim文をhtmlに変換したいのですが、htmlではどのような意味なのでしょうか?
サイトなどを参考にしたのですが、わからなかったので、ご教授いただけないでしょうか?
javascriptで下記コードにエラーメッセージが出ました。どこが間違っているかご指摘いただけないでしょうか?よろしくお願いします
```
document.getElementById( "main-image" ).addEventListener( "click", function( e ) {
slim文
```
div#main-image
   = image_tag @image, id:"image"
   div.child id="text-pos"
   - @blocks.each do |blk|
     div.child style="top: #{blk[:y]}px; left:#{blk[:x]}px; width:#{blk[:width]}px; height:#{blk[:height]}px;"
エラーメッセージ
Expected attribute
 /home/ubuntu/workspace/app/views/projects/index.html.slim, Line 46, Column 27
   document.getElementById( "main-image" ).addEventListener( "click", function( e ) {
```
```
自分で解読したhtml文(最後の部分だけ解読できなかったため記載なし)
<div class="float2">
 <div id="main-image">
 <%= image_tag @image, id:"image"%></div>
 <div class="child"><div id="text-pos">
   <% @blocks.each do |blk| %>
全体コード
javascript:
 count = 1 // ボタンで使うカウンター
 document.getElementById( "main-image" ).addEventListener( "click", function( e ) {
   // マウス位置を取得する
   var mouseX = e.pageX ; // X座標
   var mouseY = e.pageY ; // Y座標
   // 要素の位置を取得
   var element = document.getElementById( "main-image" ) ;
   var rect = element.getBoundingClientRect();
   // 要素の位置座標を計算
   var positionX = rect.left + window.pageXOffset ;   // 要素のX座標
   var positionY = rect.top + window.pageYOffset ;   // 要素のY座標
   // 要素の左上からの距離を計算
   var X = mouseX - positionX;
   var Y = mouseY - positionY;
   // formの要素のvalueに代入
   $('#x'+count).val(X);
   $('#y'+count).val(Y);
   console.log([count, X, Y]);
   // count up
   count += 1
   if(count > 1) {
      var element = document.getElementById("text-pos");
      var x1 = $('#x1').val();
      var y1 = $('#y1').val();
      var x2 = $('#x2').val();
      var y2 = $('#y2').val();
      var width = x2 - x1;
      var height = y2 - y1;
      element.style.width = width + 'px';
      element.style.height = height + 'px';
      element.style.top = y1 + 'px';
      element.style.left = x1 + 'px';
   }
 } ) ;
```
  • Slim

    109 questions

    SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

  • HTML

    13390 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby

    10760 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • JavaScript

    23291 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

5 修正

trafalbad

trafalbad score 219

2017/06/23 22:18  投稿

model(Tmpimage)にasset内の画像(90枚)の必要なデータを格納する方法
slimをhtmlに変換したいのですがslim文の意味がわかりません
[このサイト](http://qiita.com/yoshizaki_kkgk/items/2e40bd4f77140b0c97f8)を参考にしてアプリを作ろうとしてます。
【留意点】
1.assetに画像が保存してあること(90枚)。
2.TmpImage(model)は画像保存用に作成されたものであること。
3.controllerのindexアクションでTmpImage.firstのようにTmpImageのデータを持ってくる処理をしていること。
下記のslim文をhtmlに変換したいのですが、htmlではどのような意味なのでしょうか?
サイトなどを参考にしたのですが、わからなかったので、ご教授いただけないでしょうか?
以上のことから次のことをしました
1.asset内に画像(90枚)を保存した
2.TmpImageを上記サイトの通り作成した。
3.ルーティングやその他コードをサイト同様に実装した。
4.controllerでindexアクションで```TmpImage.first```のようにデータを変数に格納する処理をした。
以上を踏まえた上で以下のエラーがcontroller.rbのindexアクション(   ```@image = tmp[:filename]```)に対して出ました。
slim文
```
undefined method `[]' for nil:NilClass
```
つまりtmpには何も入ってないというものです。
【想定していたこと】
asset内の画像が上記サイト同様の処理をすれば読み込まれると思っていたこと
【今回解決したい問題】
indexアクションでasset内の画像が読み込まれるようにしたい。そのためにはTmpImageにasset内の画像のfilenameとimage_idを格納したい。
これを解決する手段を教えて下さい。
```
#controller.rb
class ProjectsController < ApplicationController
   
   before_action :set_project, only: [:show, :edit, :update, :destroy]
   
   def index
     @projects=Project.all
     tmp = TmpImage.first
   @image = tmp[:filename]
   @blocks = TextBlock.view_css(tmp[:image_id])
   end
 
   def show
   end
 
 def new
    @project=Project.new
 end
   def create
     @project=Project.new(project_params)
     if @project.save
         redirect_to projects_path
     else
         render 'new' 
     end
   end
def edit
end
div#main-image
   = image_tag @image, id:"image"
   div.child id="text-pos"
   - @blocks.each do |blk|
     div.child style="top: #{blk[:y]}px; left:#{blk[:x]}px; width:#{blk[:width]}px; height:#{blk[:height]}px;"
```
```
#migrate/create.tmp_images.rb
class CreateTmpImages < ActiveRecord::Migration
 def change
   create_table :tmp_images do |t|
     t.string :title
     t.string :filename, default: false
     t.integer :image_id
     t.timestamps null: false
   end
 end
end
```
自分で解読したhtml文(最後の部分だけ解読できなかったため記載なし)
<div class="float2">
 <div id="main-image">
 <%= image_tag @image, id:"image"%></div>
 <div class="child"><div id="text-pos">
   <% @blocks.each do |blk| %>
```
   
  • Ruby

    10760 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    10137 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • HTML

    13390 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Slim

    109 questions

    SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

4 質問変更

trafalbad

trafalbad score 219

2017/06/23 12:09  投稿

railsでアクセスした時に画像が表示されない原因
model(Tmpimage)にasset内の画像(90枚)の必要なデータを格納する方法
railsで以下のコードを実装しました。index.html.erbの内容が表示されるはずなのですが、アクセスしても何も表示されません。エラーも出ていない状態です。
[このサイト](http://qiita.com/yoshizaki_kkgk/items/2e40bd4f77140b0c97f8)を参考にしてアプリを作ろうとしてます。
【留意点】
1.assetに画像が保存してあること(90枚)。
2.TmpImage(model)は画像保存用に作成されたものであること。
3.controllerのindexアクションでTmpImage.firstのようにTmpImageのデータを持ってくる処理をしていること。
どこか修正すべき点があるため、どなたかご教授お願いします。Imageの中にはid:0,1,2の3つのデータが格納されています。
以上のことから次のことをしました
1.asset内に画像(90枚)を保存した
2.TmpImageを上記サイトの通り作成した。
3.ルーティングやその他コードをサイト同様に実装した。
4.controllerでindexアクションで```TmpImage.first```のようにデータを変数に格納する処理をした。
以上を踏まえた上で以下のエラーがcontroller.rbのindexアクション(   ```@image = tmp[:filename]```)に対して出ました。
```
#index.html.erb
<h1>
Welcome to Show Page
</h1>
<ul>
   <% @image.each do |t| %>
  <li><%= t.id %></li>
   <% end %>
</ul>
<p>
<%= image_tag '00asfs1.jpg', :alt => '登録ボタン' %>
</p>
undefined method `[]' for nil:NilClass
```
<p>
<%= image_tag '01.jpg' %>
</p>
つまりtmpには何も入ってないというものです。
【想定していたこと】
asset内の画像が上記サイト同様の処理をすれば読み込まれると思っていたこと
【今回解決したい問題】
indexアクションでasset内の画像が読み込まれるようにしたい。そのためにはTmpImageにasset内の画像のfilenameとimage_idを格納したい。
これを解決する手段を教えて下さい。
```
```
#routes.rb
Rails.application.routes.draw do
resources :labels
root 'labels#index'
#controller.rb
class ProjectsController < ApplicationController
   
   before_action :set_project, only: [:show, :edit, :update, :destroy]
   
   def index
     @projects=Project.all
     tmp = TmpImage.first
   @image = tmp[:filename]
   @blocks = TextBlock.view_css(tmp[:image_id])
   end
 
   def show
   end
 
 def new
    @project=Project.new
 end
   def create
     @project=Project.new(project_params)
     if @project.save
         redirect_to projects_path
     else
         render 'new' 
     end
   end
def edit
end
```
```
#labels.controller.rb
class LabelsController < ApplicationController
  # *** トップページ ***
 
 
 def index
     @image=Image.all
#migrate/create.tmp_images.rb
class CreateTmpImages < ActiveRecord::Migration
 def change
   create_table :tmp_images do |t|
     t.string :title
     t.string :filename, default: false
     t.integer :image_id
     t.timestamps null: false
   end
 end
end
```  
```  
rake routes  
>>>>  
DEPRECATION WARNING: Sprockets method `register_engine` is deprecated.  
Please register a mime type using `register_mime_type` then  
use `register_compressor` or `register_transformer`.  
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors  
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:16)  
DEPRECATION WARNING: You are using the a deprecated processor interface Less::Rails::ImportProcessor.  
Please update your processor interface:  
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors  
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:21)  
   Prefix Verb  URI Pattern               Controller#Action  
   labels GET   /labels(.:format)         labels#index  
          POST  /labels(.:format)         labels#create  
new_label GET   /labels/new(.:format)     labels#new  
edit_label GET   /labels/:id/edit(.:format) labels#edit  
    label GET   /labels/:id(.:format)     labels#show  
          PATCH /labels/:id(.:format)     labels#update  
          PUT   /labels/:id(.:format)     labels#update  
          DELETE /labels/:id(.:format)     labels#destroy  
     root GET   /                         labels#index  
 
```
  • Ruby

    10760 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    10137 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

3

trafalbad

trafalbad score 219

2017/06/22 17:10  投稿

railsでアクセスした時に画像が表示されない原因
railsで以下のコードを実装しました。index.html.erbの内容が表示されるはずなのですが、アクセスしても何も表示されません。エラーも出ていない状態です。
```
#index.html.erb
<h1>
Welcome to Show Page
</h1>
<ul>
   <% @image.each do |t| %>
  <li><%= t.id %></li>
   <% end %>
</ul>
<p>
<%= image_tag '00asfs1.jpg', :alt => '登録ボタン' %>
</p>
<p>
<%= image_tag '01.jpg' %>
</p>
```
```
#routes.rb
Rails.application.routes.draw do
resources :labels
root 'labels#index'
end
```
```
#labels.controller.rb
class LabelsController < ApplicationController
  # *** トップページ ***
 
 
 def index
     @image=Image.find
     @image=Image.all
 end
end
```
```
rake routes
>>>>
DEPRECATION WARNING: Sprockets method `register_engine` is deprecated.
Please register a mime type using `register_mime_type` then
use `register_compressor` or `register_transformer`.
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:16)
DEPRECATION WARNING: You are using the a deprecated processor interface Less::Rails::ImportProcessor.
Please update your processor interface:
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:21)
   Prefix Verb  URI Pattern               Controller#Action
   labels GET   /labels(.:format)         labels#index
          POST  /labels(.:format)         labels#create
new_label GET   /labels/new(.:format)     labels#new
edit_label GET   /labels/:id/edit(.:format) labels#edit
    label GET   /labels/:id(.:format)     labels#show
          PATCH /labels/:id(.:format)     labels#update
          PUT   /labels/:id(.:format)     labels#update
          DELETE /labels/:id(.:format)     labels#destroy
     root GET   /                         labels#index
```
  • Ruby

    10760 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    10137 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

2 修正

trafalbad

trafalbad score 219

2017/06/22 16:26  投稿

railsでアクセスした時に画像が表示されない原因
railsで以下のコードを実装しました。index.html.erbの内容が表示されるはずなのですが、アクセスしても何も表示されません。エラーも出ていない状態です。
どこか修正すべき点があるため、どなたかご教授お願いします、
```
#index.html.erb
<h1>
Welcome to Show Page
</h1>
<ul>
<% @image.each do |t| %>
<li><%= t.id %></li>
<% end %>
</ul>
<p>
<%= image_tag '00asfs1.jpg', :alt => '登録ボタン' %>
</p>
<p>
<%= image_tag '01.jpg' %>
</p>
```
```
#routes.rb
Rails.application.routes.draw do
resources :labels
root 'labels#index'
end
```
```
#labels.controller.rb
class LabelsController < ApplicationController
# *** トップページ ***
def index
@image=Image.find
end
end
```
```
rake routes
>>>>
DEPRECATION WARNING: Sprockets method `register_engine` is deprecated.
Please register a mime type using `register_mime_type` then
use `register_compressor` or `register_transformer`.
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:16)
DEPRECATION WARNING: You are using the a deprecated processor interface Less::Rails::ImportProcessor.
Please update your processor interface:
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:21)
Prefix Verb URI Pattern Controller#Action
labels GET /labels(.:format) labels#index
POST /labels(.:format) labels#create
new_label GET /labels/new(.:format) labels#new
edit_label GET /labels/:id/edit(.:format) labels#edit
label GET /labels/:id(.:format) labels#show
PATCH /labels/:id(.:format) labels#update
PUT /labels/:id(.:format) labels#update
DELETE /labels/:id(.:format) labels#destroy
root GET / labels#index
```
  • Ruby

    10760 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    10137 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

1 修正

trafalbad

trafalbad score 219

2017/06/22 16:26  投稿

colud9でのslimの使用方法
railsでアクセスした時に画像が表示されない原因
cloud9でslimを使用したいのですが、文字がハイライトにならずに使用できません。おそらく対応していないのではないかと思うのですが、cloud9ではslimを使用できるのでしょうか?
railsで以下のコードを実装しました。index.html.erbの内容が表示されるはずなのですが、アクセスしても何も表示されません。エラーも出ていない状態です。
またslimのコードをhtmlに変換すれば良いと考えたのですが、rubyの記述が入っているとエラーになってしまいます。
変換に効率的な方法(例えばrubyの記述部分のみ別の文字列に変換するなど)がありましたら教えていただけないしょうか?
どこか修正すべき点があるため、どなたかご教授お願いします、
```
#slimコード
div.top-title
 div.left-button
   = link_to "前の登録を取り消し", image_delete_path, method: :delete, data: {confirm: "取り消しますか?"}, class: "btn btn-danger"
 div.right-button align="right"
   = link_to "次の画像へ", image_next_path, method: :post, class: "btn btn-warning"
#index.html.erb
<h1>
Welcome to Show Page
</h1>
<ul>
   <% @image.each do |t| %>
  <li><%= t.id %></li>
   <% end %>
</ul>
<p>
<%= image_tag '00asfs1.jpg', :alt => '登録ボタン' %>
</p>
div.float2
 div#main-image
   = image_tag @image, id:"image"
   div.child id="text-pos"
   - @blocks.each do |blk|
     div.child style="top: #{blk[:y]}px; left:#{blk[:x]}px; width:#{blk[:width]}px; height:#{blk[:height]}px;"
   
div.float2
 div.form
   = form_for(:pos, url: image_register_path, method: :post) do |f|
     div.form-group
       = f.label :pos1, "1.左上の座標"
     div.form-group
       div.form-inline
         = f.label :pos1, "x :", style: "margin-right:10px;"
         = f.number_field :pos1_x1, id: 'x1', class: "form-control", style: "width:100px; margin-right:30px;"
         = f.label :pos1, "y :", style: "margin-right:10px;"
         = f.number_field :pos1_y1, id: 'y1', class: "form-control", style: "width:100px; margin-right:30px;"
     div.form-group
       = f.label :pos2, "2.右下の座標"
     div.form-group
       div.form-inline
         = f.label :pos2, "x :", style: "margin-right:10px;"
         = f.number_field :pos2_x2, id: 'x2', class: "form-control", style: "width:100px; margin-right:30px;"
         = f.label :pos2, "y :", style: "margin-right:10px;"
         = f.number_field :pos2_y2, id: 'y2', class: "form-control", style: "width:100px; margin-right:30px;"
     div.form-group
       = f.label :text, "3.テキスト"
       = f.text_area :text, class:"form-control", style:"height: 200px;"
     div.form-group
       = f.submit "登録", class:"btn btn-primary"
<p>
<%= image_tag '01.jpg' %>
</p>
```
```
#routes.rb
Rails.application.routes.draw do
resources :labels
root 'labels#index'
end
```
```
#labels.controller.rb
class LabelsController < ApplicationController
  # *** トップページ ***
 
   div
     = link_to "リセット", root_path
 
 def index
     @image=Image.find
 end
end
```
```
rake routes
>>>>
DEPRECATION WARNING: Sprockets method `register_engine` is deprecated.
Please register a mime type using `register_mime_type` then
use `register_compressor` or `register_transformer`.
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:16)
DEPRECATION WARNING: You are using the a deprecated processor interface Less::Rails::ImportProcessor.
Please update your processor interface:
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
(called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:21)
   Prefix Verb  URI Pattern               Controller#Action
   labels GET   /labels(.:format)         labels#index
          POST  /labels(.:format)         labels#create
new_label GET   /labels/new(.:format)     labels#new
edit_label GET   /labels/:id/edit(.:format) labels#edit
    label GET   /labels/:id(.:format)     labels#show
          PATCH /labels/:id(.:format)     labels#update
          PUT   /labels/:id(.:format)     labels#update
          DELETE /labels/:id(.:format)     labels#destroy
     root GET   /                         labels#index
```
  • Ruby

    10760 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Slim

    109 questions

    SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

  • HTML

    13390 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る