文系大学生がエンジニアを目指すブログ

Qiitaに書くまでもないメモ的な存在

ジーニアスバーでは教えてくれなかったワイモバイルのsimでiPhone8に乗り換えるとネットが使えない問題の解決法

問題

ワイモバイルのiPhone5SからsimフリーiPhone8に乗り換えるとネットが使えなかった 公式のプロファイルを入れたけど、ネットに繋がらなかった。 simはn141

www.ymobile.jp

解決方法

iOS用APN構成プロファイルジェネレータで非公式なプロファイルを作る iOS用APN構成プロファイルジェネレータ

項目は以下の通り

APN: kqtqjs
ユーザー名: tnsrknk
パスワード: cmtknrn
認証タイプ: PAP

プロトコル、プロキシは空欄でOK

で再起動。

再起動してなかったために1時間近く手間取った。。。 電波の名前はymobileになるかとおもったけどsoftbankのままだった

非公式プロファイルなので自己責任で

slimテンプレートに変えた時にkaminariでhtmlが表示される

症状

途中からslimテンプレートに変えたらhtmlが表示されるようになった

f:id:fujitora:20170924190105p:plain

解決方法

github.com

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

github.com

リファレンス

CKEditor 4 Documentation

やり方

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でナビゲーションのドットが表示されないバグ

owlcarousel2.github.io

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'

github.com

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エンジニアがクラウドワークスを1ヶ月使ってみた感想

クラドワークスをつかったきっかけ

フリーランスになったのでとりあえずクラウドワークスで案件を探した。 4月中旬に初めて案件受けて、4月末までに5案件受けた。

実際どれくらい稼げるのか

クラウドワークスは稼げるのか否かは結構いろんなブログとか記事になってるけど、運と実力と案件次第だと思う。

実力という点でいえば、クラウドワークスで安定して案件受けるなら、クラウドワークスウケする言語や知見を持ってないと厳しいのかなと思う。 運という点では収入は案件ありきだから、コンスタンスに数十万の案件がとれる保証がない。

実績なしのアカウントで2週間で5案件、累計40万の契約がとれた。 で月間ランキングが20前半、週間ランキングがランキング1桁台。

どっかの記事になってた、20万円以上稼いでいるのは111人というのはほとんどエンジニアなのかなと思う。

大変なこと

  1. 案件の詳細について話す(チャット)する時に相手のITリテラシーが分からないから、どこまで専門用語を使っていいのかが分からない。
  2. 納品の最後に星5つで評価されるが理不尽な評価をされることがある。

サーバー構築からwebフロントまでできるから、クラウドソーシングレベルなら技術的に不安な点はないし。 そもそもできなさそうなのは受けないし。

クラウドワークスはいいのか悪いのか

クラウドワークスへの批判・擁護記事があるけど、そもそもブロガー( or ライター)から見たクラウドワークスとエンジニアからみたクラウドワークスは見え方が違う(はず)。 受けるカテゴリーも単価も納品までの時間も違うし。

開発案件でがっつり稼ぐなら、10〜15万の案件を数件、隙間に数万を挟むのが一番いいと思う。 案件次第であたり外れがあるから一概には言えないけど、クラウドワークス使わないで適正価格で案件受けれるなら幸せだよねっていうレベル。

wordpressで410を返す方法

サーバーの.htaccessで設定してもうまく動かなかったのでメモ

RewriteEngine on
〜略〜
RewriteRule ^/tag/.*?[G]

と書いたがcssが適用されないようなページになるだけだった。

プラグイン

ja.wordpress.org

このプラグインを使う

導入

wpの管理画面にログインして、〜〜略〜〜

新規追加できたら「有効化」すると左カラムに"410 for WordPress"のタブができるので選択。

「Manually add URLs」のテキストエリアにhttps://…..と指定すればオーケー

httpステータスコードチェックツール

httpstatus.io

ここでちゃんとステータスが返ってくるかチェックした。

ってやったけど410が帰ってこない

ドキュメント読むと404のページにしか410を設定できない(らしい?)

410はあきらめて404にを返すようにした

function.phpに書いた.

あとでコードかく

参考サイト

shantiworks.info

Railsで画像アップロードで使うGemのメモ

完全にメモ

Carrierwave

Github : carrierwaveuploader/carrierwave

rmagick

Github : rmagick/rmagick/

dropzonejs-rails

Dropborn.js : dropborn.js

Github : ncuesta/dropzonejs-rails

jQuery-File-Upload

Github : 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

大学生のUseragent教えます。

大学の授業に関するサイトのUser agentをまとめたのではてぶにメモとして残しておきます。

講義のサイトと言っても対したものではないですが、出席確認も兼ねているので学業への意識とか学年とかの偏りはなく平均的な値が取れていると思います。(無作為抽出に近い)

大学の偏りは仕方ないです。。。(大学関係なくみんなに使ってもらえるサービス作りたいですね)

サイトの内容

f:id:fujitora:20161231015604p:plain

  • テキストボックス×2
  • ラジオボタン×1
  • セレクトボックス×1
  • 400字以上の文字制限があるテキストエリア×1

Ruby(Rail)で監視にnewRelic入れてます。自分のGMOVPSサーバーにデプロイしています。

集計方法

ほんとはelasticsearchに流してリファラとかゴミ除去したかったんですけど、サーバーのスペック低すぎて動かなかったので諦めました。

fujitora.hatenablog.jp

結局EC2に構築する時間もなく授業が終わってしまった...

googleアナリティクスで計測した4回の授業分の数値です。

提出タイミング

f:id:fujitora:20161229013411p:plain 日ごとのセッションです。きれいですね。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タグに苦しめられた話

qiita.com

の24日目の記事です。リア充してたら1日遅れました

shibuya

昨日は男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でなんかミスってると思ってずっと悩んでた。