slimテンプレートに変えた時にkaminariでhtmlが表示される
症状
途中からslimテンプレートに変えたらhtmlが表示されるようになった
解決方法
app/view/kaminari/_paginator.html.slimを書き換える
デフォルト
= paginator.render do
ul.pagination
= first_page_tag unless current_page.first?
= prev_page_tag unless current_page.first?
- each_page do |page|
- if page.left_outer? || page.right_outer? || page.inside_window?
= page_tag page
- elsif !page.was_truncated?
= gap_tag
= next_page_tag unless current_page.last?
= last_page_tag unless current_page.last?
修正後
= paginator.render do
ul.pagination
== first_page_tag unless current_page.first?
== prev_page_tag unless current_page.first?
- each_page do |page|
- if page.left_outer? || page.right_outer? || page.inside_window?
== page_tag page
- elsif !page.was_truncated?
== gap_tag
== next_page_tag unless current_page.last?
== last_page_tag unless current_page.last?
Railsでパソコンとスマホでviewを分ける
Gemfile
gem 'rack-user_agent'
app/controllers/application_controller.rb
上でbefore_actionで判定させる。
before_action :check_user_agent_for_mobile
判定のメソッド
def check_user_agent_for_mobile if request.from_smartphone? request.variant = :mobile end end
view
index.html.erbがPCで表示されてindex.html+mobile.erbがSPで表示されるようになる。
AWS EC2のiptableとSELinuxをオフにする
EC2でRailsのサイト公開してもアクセスできなかった原因
初期状態
$ getenforce
Enforcing
効いている。
$ sudo service iptables status
Table: filter Chain INPUT (policy ACCEPT) num target prot opt source destination 1 ACCEPT all -- 0.0.0.0/0 0.0.0.0/0 state RELATED,ESTABLISHED 2 ACCEPT icmp -- 0.0.0.0/0 0.0.0.0/0 3 ACCEPT all -- 0.0.0.0/0 0.0.0.0/0 4 ACCEPT tcp -- 0.0.0.0/0 0.0.0.0/0 state NEW tcp dpt:22 5 REJECT all -- 0.0.0.0/0 0.0.0.0/0 reject-with icmp-host-prohibited Chain FORWARD (policy ACCEPT) num target prot opt source destination 1 REJECT all -- 0.0.0.0/0 0.0.0.0/0 reject-with icmp-host-prohibited Chain OUTPUT (policy ACCEPT) num target prot opt source destination
効いている。
SELinuxのオフ
$ vi /etc/selinux/config
SELINUX=enforcing
を
SELINUX=disabled
にする
iptable
$ sudo service iptables stop
carrierwaveのテンプレ
いまさらながらだが、、、一応rails5
Gemfile
gem 'carrierwave' gem 'rmagick'
controler
$ rails g uploader image
app/uploaders/image_uploader.rbが作成される
$ rails g controller image
app/controllers/images_controller.rbが作成される
modle
$ rails g model image --skip-migaration
invoke active_record
create app/models/image.rb
invoke test_unit
create test/models/image_test.rb
create test/fixtures/images.yml
DB
ridgepoleなのでSchemafileに
create_table "images", force: true do |t| t.string "path" t.datetime "created_at" t.datetime "updated_at" end
を追加してridgepoleコマンド
準備終了
ここまでで一通りファイル作ったからあとは書くだけ
app/models/image.rb
class Image < ApplicationRecord mount_uploader :path, ImageUploader end
app/controllers/images_controller.rb
class ImagesController < ApplicationController
def upload
image = Image.create(path: params[:file])
respond_to do |format|
format.html { render json: {path: image.path.url}}
format.json { render json: {path: image.path.url}}
end
end
end
config/routes.rb
post '/image/upload' => 'images#upload'
app/views/topics/_form.html.erb
$(document).on 'turbolinks:load', -> $('input.js-upload-image').on 'change', -> fileList = @files i = 0 l = fileList.length while l > i fileReader = new FileReader fileReader.onload = -> dataUri = @result return fileReader.readAsDataURL fileList[i] i++ formData = new FormData formData.append 'file', $('input.js-upload-image')[0].files[0] jQuery.each $('input.js-upload-image')[0].files, (i, file) -> $.ajax url: '/image/upload' type: 'POST' data: formData cache: false processData: false contentType: false context: this success: (msg) -> msg = JSON.parse(msg) domains = msg.path.split('/') filename = domains[domains.length - 1] hostname = window.location.origin console.log hostname + msg.path $('input#office_thumb').val hostname + msg.path return return
app/assets/javascript/topics.coffee
<div class="form-group"> <%= form_tag image_upload_path, multipart: true do %> <%= file_field_tag 'image', class: 'js-upload-image' %> <% end %> </div>
Railsで使ってるckeditorにボタン追加する
したいこと
wordpressのadd quick tagみたいにボタン押すとhtmlがテキストエリアに入るようにしたい
英語ばっかだったから日本語でメモ
ckedior
gem
リファレンス
やり方
app/assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = function( config ) { config.extraPlugins = 'defaulttable'; config.toolbar = 'MyToolbar'; config.toolbar_MyToolbar = [ ['Defaulttable'], [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ], [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ], [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ], '/', ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ], [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ], [ 'Link', 'Unlink', 'Anchor' ], '/', [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ], [ 'Styles', 'Format', 'Font', 'FontSize' ], [ 'TextColor', 'BGColor' ], [ 'Maximize', 'ShowBlocks' ], [ '-' ], [ 'About' ], [ 'car-table' ] ]; };
config.extraPluginsで追加するプラグインの名前(プラグインのjsファイルを置くディレクトリ名になる)を指定
config.toolbar_MyToolbarの一番初めに'Defaulttableを追加
app/assets/javascripts/ckeditor/plugins/defaulttable/plugin.js
ディレクトリに気をつける。
CKEDITOR.plugins.add('defaulttable', { init: function (editor) { var pluginName = 'defaulttable'; editor.ui.addButton('Defaulttable', { label: 'My New Plugin', command: 'InsertTable', icon: 'http://www.hogehoge.com/images/hoge.png' }); var cmd = editor.addCommand('InsertTable', { exec: InsertTable }); } }); function InsertTable(e) { e.insertHtml('<table><tr><td>hoge</td></tr><tr><td>hoge</td></tr></table>' ); }
Rails5にアップデートしたらコンソールにログやputsがでなくなった
問題
rails5にアップデートするとアプリケーションサーバーがpumaに変わる。そん状態でrails sすると
=> Booting Puma => Rails 5.0.0.1 application starting in development on http://localhost:3000 => Run `rails server -h` for more startup options Puma starting in single mode... * Version 3.9.0 (ruby 2.2.2-p95), codename: Private Caller * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://localhost:3000 Use Ctrl-C to stop
とでてhttp://localhost:3000/hogehogeにアクセスするが、叩かれてるSQLやファイルの読み込み(rails5からデフォルトでOFFらしい)やcontorllerでputs "hoge"とやっても何も表示されない。
解決方法
$ rails server webrick
でアクセスするとrails4同様ターミナルにいろいろとログや読み込みファイルが表示される。
-.-.-.
(Gemfile)
group :production do gem 'puma' end
にしてproductionだけにしたほうがいいのかな？
Owl Carousel 2でナビゲーションのドットが表示されないバグ
I used “Owl Carousel 2”, but owl-dots disabled.
I added style to my css file.
.owl-dots { text-align: center; bottom: 5px; width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .owl-dot { border-radius: 50px; height: 10px; width: 10px; display: inline-block; background: rgba(127,127,127, 0.5); margin-left: 5px; margin-right: 5px; } .owl-dot.active { background-color: #ea5514; } .owl-dots { text-align: center; }
Slimテンプレートを使った時にckeditorのエラーが出る問題
現象
テンプレートをerbからslimに変えてrails sしなおしたらエラーが出た。
ActionView::Template::Error (Unknown line indicator ckeditor/plugins/preview/preview, Line 11, Column 0 } ^ ): 2: html 3: head 4: = render 'shared/meta_tags' 5: = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true 6: = javascript_include_tag 'application', 'data-turbolinks-track' => true 7: = csrf_meta_tags 8: body
解決策
gemのバージョンを3.1.1に固定する。
gem 'slim-rails', '3.1.1'
Railsのturbolinksでjavascriptが発火しない問題の解決策
$(document).on 'turbolinks:load', ->をつける
$(document).on 'turbolinks:load', -> $('#hogehoge').click -> alert "clicked hogehoge"
page:loadを使う
ready = -> $('#hogehoge').click -> alert "clicked hogehoge" $(document).ready(ready) $(document).on('page:load', ready)
jqueryの'ready'とTurbolinksの'page:load'の両方カバーできる。
非Turbolinks遷移時は'ready'で発火、Turbolinks遷移時は'page:load'で発火の両方をカバーするという意味。
Turbolinksをサポートしていないブラウザでも'ready'が発火するので安心。 jquery-turbolinksというgemを使うと'ready'triggerにpage:loadを追加してくれる。
webエンジニアがクラウドワークスを１ヶ月使ってみた感想
クラドワークスをつかったきっかけ
フリーランスになったのでとりあえずクラウドワークスで案件を探した。 4月中旬に初めて案件受けて、4月末までに5案件受けた。
実際どれくらい稼げるのか
クラウドワークスは稼げるのか否かは結構いろんなブログとか記事になってるけど、運と実力と案件次第だと思う。
実力という点でいえば、クラウドワークスで安定して案件受けるなら、クラウドワークスウケする言語や知見を持ってないと厳しいのかなと思う。 運という点では収入は案件ありきだから、コンスタンスに数十万の案件がとれる保証がない。
実績なしのアカウントで2週間で5案件、累計40万の契約がとれた。 で月間ランキングが20前半、週間ランキングがランキング1桁台。
どっかの記事になってた、20万円以上稼いでいるのは111人というのはほとんどエンジニアなのかなと思う。
大変なこと
- 案件の詳細について話す(チャット)する時に相手のITリテラシーが分からないから、どこまで専門用語を使っていいのかが分からない。
- 納品の最後に星5つで評価されるが理不尽な評価をされることがある。
サーバー構築からwebフロントまでできるから、クラウドソーシングレベルなら技術的に不安な点はないし。 そもそもできなさそうなのは受けないし。
クラウドワークスはいいのか悪いのか
クラウドワークスへの批判・擁護記事があるけど、そもそもブロガー( or ライター)から見たクラウドワークスとエンジニアからみたクラウドワークスは見え方が違う(はず)。 受けるカテゴリーも単価も納品までの時間も違うし。
開発案件でがっつり稼ぐなら、10〜15万の案件を数件、隙間に数万を挟むのが一番いいと思う。 案件次第であたり外れがあるから一概には言えないけど、クラウドワークス使わないで適正価格で案件受けれるなら幸せだよねっていうレベル。
wordpressで410を返す方法
サーバーの.htaccessで設定してもうまく動かなかったのでメモ
RewriteEngine on 〜略〜 RewriteRule ^/tag/.*?[G]
と書いたがcssが適用されないようなページになるだけだった。
プラグイン
このプラグインを使う
導入
wpの管理画面にログインして、〜〜略〜〜
新規追加できたら「有効化」すると左カラムに"410 for WordPress"のタブができるので選択。
「Manually add URLs」のテキストエリアにhttps://…..と指定すればオーケー
httpステータスコードチェックツール
ここでちゃんとステータスが返ってくるかチェックした。
ってやったけど410が帰ってこない
ドキュメント読むと404のページにしか410を設定できない(らしい?)
410はあきらめて404にを返すようにした
function.phpに書いた.
あとでコードかく
参考サイト
Railsで画像アップロードで使うGemのメモ
完全にメモ
Carrierwave
Github : carrierwaveuploader/carrierwave
rmagick
dropzonejs-rails
Dropborn.js : dropborn.js
Github : ncuesta/dropzonejs-rails
jQuery-File-Upload
jquery-fileupload-rails
jQuery-File-UploadのGem
Github : tors/jquery-fileupload-rails
gem install するときrmagickでこける
$ sudo yum -y install ImageMagick $ sudo yum -y install ImageMagick-devel
fogを使うとbundle installでエラーがでた
Fetching ovirt-engine-sdk 4.2.4
Installing ovirt-engine-sdk 4.2.4 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
current directory: /home/centos/app_name/vendor/bundle/ruby/2.4.0/gems/ovirt-engine-sdk-4.2.4/ext/ovirtsdk4c
/home/centos/.rbenv/versions/2.4.0/bin/ruby -r ./siteconf20180924-32416-iap465.rb extconf.rb
checking for xml2-config... no
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers. Check the mkmf.log file for more details. You may
need configuration options.
Provided configuration options:
--with-opt-dir
--without-opt-dir
--with-opt-include
--without-opt-include=${opt-dir}/include
--with-opt-lib
--without-opt-lib=${opt-dir}/lib
--with-make-prog
--without-make-prog
--srcdir=.
--curdir
--ruby=/home/centos/.rbenv/versions/2.4.0/bin/$(RUBY_BASE_NAME)
--with-libxml2-config
--without-libxml2-config
--with-pkg-config
--without-pkg-config
extconf.rb:29:in `<main>': The "libxml2" package isn't available. (RuntimeError)
To see why this extension failed to compile, please check the mkmf.log which can be found here:
/home/centos/app_name/vendor/bundle/ruby/2.4.0/extensions/x86_64-linux/2.4.0-static/ovirt-engine-sdk-4.2.4/mkmf.log
extconf failed, exit code 1
Gem files will remain installed in /home/centos/app_name/vendor/bundle/ruby/2.4.0/gems/ovirt-engine-sdk-4.2.4 for inspection.
Results logged to /home/centos/app_name/vendor/bundle/ruby/2.4.0/extensions/x86_64-linux/2.4.0-static/ovirt-engine-sdk-4.2.4/gem_make.out
An error occurred while installing ovirt-engine-sdk (4.2.4), and Bundler cannot continue.
Make sure that `gem install ovirt-engine-sdk -v '4.2.4' --source 'https://rubygems.org/'` succeeds before bundling.
In Gemfile:
fog was resolved to 2.0.0, which depends on
fog-ovirt was resolved to 1.1.2, which depends on
ovirt-engine-sdk
gem を fogからfog-awsに変えて
config.fog_provider = 'fog-aws'
を追加。
CarrierWave.configure do |config|
config.fog_provider = 'fog-aws'
config.fog_credentials = {
(略)
}
end
大学生のUseragent教えます。
大学の授業に関するサイトのUser agentをまとめたのではてぶにメモとして残しておきます。
講義のサイトと言っても対したものではないですが、出席確認も兼ねているので学業への意識とか学年とかの偏りはなく平均的な値が取れていると思います。(無作為抽出に近い)
大学の偏りは仕方ないです。。。(大学関係なくみんなに使ってもらえるサービス作りたいですね)
サイトの内容
- テキストボックス×2
- ラジオボタン×1
- セレクトボックス×1
- 400字以上の文字制限があるテキストエリア×1
Ruby(Rail)で監視にnewRelic入れてます。自分のGMOのVPSサーバーにデプロイしています。
集計方法
ほんとはelasticsearchに流してリファラとかゴミ除去したかったんですけど、サーバーのスペック低すぎて動かなかったので諦めました。
結局EC2に構築する時間もなく授業が終わってしまった...
googleアナリティクスで計測した4回の授業分の数値です。
提出タイミング
日ごとのセッションです。きれいですね。1つ目の頂点が授業日、2つ目の頂点が締切日です。
デバイス
| カテゴリ | セッション |
|---|---|
| mobile | 2582 |
| desktop | 957 |
| tablet | 4 |
モバイル上位10機種
| デバイス | セッション |
|---|---|
| Apple iPhone | 2135 |
| Sony SOV32 Xperia Z5 | 44 |
| Sony SO-01H Xperia Z5 | 43 |
| (not set) | 32 |
| Sony SO-01G Xperia Z3 | 23 |
| Sony SO-03G Xperia Z2 SO-03F for DoCoMo | 22 |
| Asus Z00ED Zenfone 2 Laser | 20 |
| Microsoft Xbox One | 20 |
| Samsung SC-05G Galaxy S6 | 19 |
| Sony SO-02G Xperia Z3 Compact | 19 |
OS
| os | セッション |
|---|---|
| iOS | 2139 |
| windows | 744 |
| Android | 425 |
| Macintosh | 235 |
ブラウザ
| ブラウザ | セッション |
|---|---|
| safari | 1980 |
| chrome | 864 |
| Edge | 281 |
| safari(in-app) | 170 |
| IE | 147 |
| Android Webview | 55 |
| Firefox | 23 |
| Android Browser | 17 |
| opera | 6 |
まとめ
iphone多いですね笑
個人的に400字はスマホよりパソコンで打ってる人が多いと思ってたのですが圧倒的にスマホからの提出が多いです。 使用ブラウザはiphoneユーザーが多いからかsafariが多いですね
もっとツールとして使用される大学の生徒用サイトはさらにスマホからの利用が多そうです。
大学のシステムはスマホにも対応してないし、見にくいしクソ。どうにかしてくれ素晴らしい
(注)リファラアクセス等ゴミ除去してないから完全に正確ではないです。
新しいmacbookpro(非タッチバー)買ったらちゃんと15回分集計するつもりです。買ってください
クリスマスにBoostrapのformタグに苦しめられた話
の24日目の記事です。リア充してたら1日遅れました
昨日は男2人で渋谷の焼肉に行きました🍖🍖🍖
BoostrapはCSSを書かなくても最低限のデザインができるのでとても便利です。
が、フォームに<form>というタグを使うとsubmitされない現象が起きました。
Railsで投稿フォームを以下のように作りました。(わかりやすいようにいらないタグは消しました。)
<form>
<%= form_for @post, :url => {:action => :create} do |f| %>
<%= f.text_field :title , class: 'form-control', placeholder: 'タイトル' %>
<%= f.text_area :content , class: 'form-control' %>
<%= f.submit "投稿" %>
<% end %>
</form>
ただのテキストボックスとテキストエリアとsubmitボタンしかないめっちゃシンプルなerbです。
controllerも書くまでもない普通のcontrollerです。 がこれでsubmitしてもviewは変わらずURLのところが
http://localhost:3000/admin/post/new?utf8=%E2%9C%93&authenticity_token=XXXXX&post%5Btitle%5D=XXXXX&post%5Bcontent%5D=XXXXX&commit=%E6%8A%95%E7%A8%BF
となるだけでcontrollerのcreateメソッドにも入っていませんでした。
原因が<form>タグを使っていたことでした。
なんでこんな仕様なのかは(まだドキュメント読んでないので)分かりません、、、
誰か知ってたら教えてください。
postできないのはRailsでなんかミスってると思ってずっと悩んでた。
