rails g で使われるテンプレートをSlimで作成する際の <%% 部分の記載方法

こんにちは。
この記事では表題の通りrails gの時に使用されるテンプレートを、
Slimでかいた時に<%%部分の記載方法でつまり、またWEBで適切な記事が見つけられなかったので、備忘録として残しておく。

基本のどのようにしてrails g時に使われるテンプレートをSlimで作成するかについては、
以下の記事を参照してください。
RailsのScaffoldのテンプレートをカスタマイズする – Qiita

結論から申し上げると”そのまま”書けばよかったということなのだが、
<%% をそのまま書くわけではない。以下、解説します。

Rails5 標準のrails g用のテンプレートの中にERBで以下のように記載されている部分がある。



<table>
  
<thead>

<tr>
<% attributes.reject(&:password_digest?).each do |attribute| -%>
      
<th><%= attribute.human_name %></th>

<% end -%>
      
<th colspan="3"></th>

    </tr>

  </thead>


<tbody>
    <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
      
<tr>
<% attributes.reject(&:password_digest?).each do |attribute| -%>
        
<td><%%= <%= singular_table_name %>.<%= attribute.name %> %></td>

<% end -%>
        
<td><%%= link_to 'Show', <%= singular_table_name %> %></td>


<td><%%= link_to 'Edit', edit_<%= singular_table_name %>_path(<%= singular_table_name %>) %></td>


<td><%%= link_to 'Destroy', <%= singular_table_name %>, method: :delete, data: { confirm: 'Are you sure?' } %></td>

      </tr>

    <%% end %>
  </tbody>

</table>



<%% だらけである。
また <%% %><%= %> がネストされていたりする。
私が使った ERBtoSlim のコンバーターでは文字列に変換されてしまう。


table
  thead
    tr
      - attributes.reject(&:password_digest?).each do |attribute|
        th= attribute.human_name
      th colspan="3" 
  tbody
    | \% @%= plural_table_name %&gt;.each do |#{singular_table_name}| %&gt;
    tr
      - attributes.reject(:password_digest?).each do |attribute|
        td
          | \%= %= singular_table_name %&gt;.#{attribute.name} %&gt;
      td %= link_to 'Show', %= singular_table_name %&gt; %&gt;
      td
        | \%= link_to 'Edit', edit_%= singular_table_name %&gt;_path(#{singular_table_name}) %&gt;
      td %= link_to 'Destroy', %= singular_table_name %&gt;, method: :delete, data:   confirm: 'Are you sure?'   %&gt;
    | \% end %&gt;

早速解決方法を。
単純に <%%- <%%== とし、
ネストされている <% %><%= %> はそのまま記載すると、 rails g で正常にテンプレートを生成してくれる。


table
  thead
    tr
      - attributes.reject(&:password_digest?).each do |attribute|
        th= attribute.human_name
        th colspan="3" 
  tbody
    - @<%= plural_table_name %>.each do |#{singular_table_name}| %>
      tr
        - attributes.reject(:password_digest?).each do |attribute|
          td
            = <%= singular_table_name %>.#{attribute.name} %>
        td <%= link_to 'Show', <%= singular_table_name %> %>
        td
          = link_to 'Edit', edit_<%= singular_table_name %>_path(#{singular_table_name}) %>
        td <%= link_to 'Destroy', <%= singular_table_name %>, method: :delete, data:   confirm: 'Are you sure?'   %>

エディター上では、シンタックスエラーとして扱われて、
エラーのハイライトが出たりすると思われるが、これで正常に動作する。
RubyMineを使っているが、警告が出ている。

以上

UbuntuでLAN内PCから接続可能なMySQL ServerとRedis Sereverを常時起動しておく方法

今回は個人的に遊ぶために購入したParallellaが文鎮状態(軽くて文鎮にもならないが)だったので、
社内で有効活用しようとおもいセットアップを行ったので、その解説を書いていこうと思う。

Railsの開発プロジェクトが同時進行しており、
すべて一つのDBにおさめて、社内共有して開発をしたいと思ったのが
今回のきっかけ。

※ 例に漏れず詳しい解説に、後日アップデートしますので今回はドラフト的に必要事項だけ記載します。

■ご注意
・Parallellaはparabuntuインストール済みで、SSH接続可能な状態とします。

■こんなケースにつかえるかも
・ローカル内でLinuxをMySQLサーバー、Redisサーバーとして使いたい時

MySQLの設定

まずは通常通り初期設定を行う。
今回はメインマシンからSSH接続でインストール

sudo apt-get install mysql-server

その後、社内LAN上のPCから接続できるようにuserを作成


# 接続
mysql -u root -p

# ユーザー作成と権限設定
grant all on *.* to 'username'@'192.168.1.%' identified by 'password';

上記例は社内からすべてのテーブルにアクセスできるルートユーザーとして作成している。
@以降のホストIP部分は、それぞれの環境に応じて適宜、変更をしていただきたい。

これで、MySQLの設定は完了。あとはそれぞれRailsの database.yml の設定を変えてもらうだけ。

Redisの設定

若干詰まるであろうはRedisである。
ただ起動するだけではなく、一手間必要。

まず redis.conf を作成する。
今回はユーザーディレクトリ直下に作成した。


vim redis.conf

redis.conf に記載した内容は以下の内容のみ


# parallella からSSHを切ってもそのまま生きるようにデーモン化
daemonize yes

# デーモン化するのでログは、stdoutでは無くファイルに
logfile /home/{user}/redis.log

# PID出力先もわかり易い場所に指定
pidfile /home/{user}/redis.pid

bind オプションはあえて指定しないことで、すべてリッスンするようにしている。
confファイル無しで起動すると、デフォルトでは localhost に限定されるようだ。

後は、作った conf ファイルを指定して、起動するだけ


redis-server /home/{user}/redis.conf

以上で完了。

RailsのRedis関連のrbファイルで、
ホストにRedisを起動しているPCのIPを指定(今回の例だとParallellaのローカル内IP)

RubyMine を使っているのでプロジェクト全体検索で redis を検索したら、
指定箇所が見つかったので、すべて書き換え。

Redis.new(host: "{IPadredd}", post: 6397)

後は rake db:migrate してから、rails s で問題なく起動できれば完了です。

P.S.
ネットワーク内の機器のIPを調べる方法は色々あるが、
個人的にはiPhoneのFingというアプリが使いやすいと思っている。
見やすく操作も楽なので、オススメです。

Adobe XD で作成したカンプデータをPSDにする方法

この記事では、少し前に登場したUXデザイン用アプリケーションAdobe User Experience (XD)で作成したデータを
PSDに変換する方法をお伝えします。

簡単な方法ではありますが、ポイントを押さえていないと、
色が変になったり、データサイズがデカすぎたりと
せっかく作ったデザインデータがWT◯な状況になり兼ねないので、
備忘録も兼ねて解説します。

前回の記事と同じく、時間ができた時にSSなどを付けて詳しく解説します。

必要なもの
・Adobe XD
・Adobe Illustrator

Adobe XD単体で契約しているケースは少ないと思いますので、
フル契約ならAIもお持ちでしょう。

オンライン上のコンバートなども有るが、思いしおかしい PSD が出来るケースも多かったので、
この方法をおすすめしたい。

1, AdobeXDでデザインデータを作成する
2, AdobeXDでデータを PDF に書き出す
ショートカットキー

Cmd / Ctrl + E

3, 書き出した PDF を AI で開く
4, ファイル > 書き出し > 書き出し形式… で、PSDに書き出す。※ここに注意点有り
– カラーモードをRGBにする
– 解像度をスクリーン (72ppi)にする
– デフォでは 150ppi になっているので大きすぎる
– レイヤーを保持
– テキストの編集機能を保持 と 編集機能を最大限に保持 にチェック
– アンチエイリアスはお好みで
– WEBデザインなどであれば、おそらく文字が多いだろうから 文字に最適 の方が良いでしょう
– IICプロファイルを埋め込む にチェックを付ける
– これをしないと色がおかしくなる可能性あり

XDを持っている先に、デザインを提出するときは XD で共有すればよいが、
まだ若いソフトなので、導入していないところも多いであろうし、
実際、PSDで要求されることも多い。
いつかXDがデファクトスタンダードとなる日が来ればありがたい。

P.S.
略称が XD なのだが、完全に顔文字でしかないので気に入ってます。

AWSの無料SSL証明書を独自ドメイン(サブドメイン)で使用する方法 EC2 ELB

今回の記事では、AWSに立てているWebアプリケーション用のEC2インスタンスに
Amazon Certification Manager (以下ACM)で提供されている、無料SSL証明書を設定する方法を解説します。
そんなに頻度は高く無いものの、必ず年間何度かはする作業工程なので、備忘録も兼ねて投稿します。

※ 詳しい解説に、後日アップデートしますので今回はドラフト的に必要事項だけ記載します。

■ご注意
・すでに対象となる EC2のインスタンスは動作しており、独自ドメインも取得済みという状態からのステップです。
・今回はRoute53は使わず、ドメインを保持しているサービスのDNSから繋げる形にします。

■こんなケースに最適
・AWSで公開するサイトと別のサーバーで公開するサイトを同一のドメイン(別のサブドメイン)でアクセスできるようにしたい。

前ステップ
1, 独自ドメインの admin メールアドレスを作成する: 重要
2, ACMで新規に証明書を取得する
– 1のメールアドレスで承認メール受信・承認作業
– この作業は必須なので、先にadmin@独自ドメインのメールアドレスで、受信できるようにしておかないとやっかいです。
3, ELB設定
– httpsしか使わない予定でも、httpをリダイレクトする形にするほうが良いので、ELB設定は両方を受け付けるようにする
– 2のACM証明書を選択して設定を完了する
– セキュリティグループは専用のものを新規で作成する
– ロードバランサーの種類はクラシックを選択する
4, EC2インスタンスのセキュリティグループの設定
– ELBのセキュリティグループからのインバウンドを許可する
5, 独自ドメインのDNS設定の CNAME に ELB の DNS 名 を設定する
– AWSコンソールには Aレコード と書かれているが、 CNAME に設定しないといけないのがみそ
6, http の httpsへのリダイレクト設定(optional)
– 必要な場合は行う。
– 参考記事1: http://qiita.com/snoguchi/items/f5ccb67592f87942480d
– 参考記事2: http://qiita.com/kazunari-yamashiro/items/63793a02d66b6c48ec09

以上が大まかなステップです。

また後日、スクリーンショットなどを交えて、わかり易く解説をしていく予定です。

2017年1月7日 更新
・Xserverをドメインのネームサーバーに設定している場合は、利用不可。
・Z.comはこの方法で利用可能

Amazon犬 – Amazon Dogs

こんにちは!
たくさんの大きなプロジェクトが進行しており、
なかなか投稿ができませんでした。

さーて、久しぶりの投稿ですが、開発関係のことではありません!

たまたま見つけた
Amazon Dogsについてご紹介します。
といってもWebサービスでもなんでもないのですが^^;

米国Amazon.comの既に存在しない商品ページ、404ページに行くと
かわいいワンちゃんたちが出迎えてくれます。

Screen Shot 2016-08-29 at 17.56.04

アクセスするたびに、違うワンちゃんが出てきます。

Screen Shot 2016-08-29 at 17.56.09

Screen Shot 2016-08-29 at 17.56.13

Screen Shot 2016-08-29 at 17.56.16

Screen Shot 2016-08-29 at 17.56.21

ワンちゃんをクリックすると、ワンちゃんの紹介ページが出てきます。

Screen Shot 2016-08-29 at 19.17.32

ワンちゃん紹介ページはこちら
かなりたくさんいますね^^

オフィスにペットが居るっていうのはホント素敵ですね。
今弊社でのオフィスで猫を飼おうと検討中です^^

ワンちゃんたちのカレンダーまで販売されているようです

以上、ちょっと気になったのでご紹介でした。

Electron と Ruby でネイティブアプリを作る方法 – 2 ボタンの配置時の落とし穴

概要

こんにちはアレクスです!

今回は「ボタン配置時の注意」というお話です。

詳しい解説は追記していくとしまして、
簡単に注意点を記載しておきます。

GUIには欠かせないボタンの落とし穴

続きを読む Electron と Ruby でネイティブアプリを作る方法 – 2 ボタンの配置時の落とし穴

Electron と Ruby でネイティブアプリを作る方法 – 1 標準出力随時受け取り

概要

こんにちは。アレクスです。
今回はですね。 Node.jsからrbファイルを実行して、
標準出力を受け取ることについて解説します。

長いこと中途半端に取り組み見て見ぬふりしていました問題が、
以外にもサクッ🍘と解決してしまいなんだか😦だったのですが、
落とし穴なポイントが有りましたので、公開いたします。

今回は超初期段階です、これから複雑な実装を行いますので、
また投稿したいと思います。

最終目的

Rubyで作ったプログラムをElectronから実行して、標準出力を受け取って、
画面に表示させたいですね。プログレスバーに反映できれば great!ですね。

イメージ
Rubyで進行状況のパーセンテージ計算 => 数値をstdout
Node.jsで受け取り => GUIのプログレスバーデザイン部分のwidthに随時反映

初期段階

まずは Node.js から外部コマンドで、簡単な Ruby コードを実行してみます。
エラーもどうなるか合わせてみてみます。



# coding: utf-8
Encoding.default_external = 'UTF-8'

begin

  5.times {
    print "HELLO WORLD!"
    sleep(0.5)
  }

  raise "ERROR"

rescue => ex
  print ex.class
  print ex.message
  print ex.backtrace
end


Node.js は以下のようにspawnを使います。


const spawn = require('child_process').spawn;
const ls = spawn('ruby', ['hello.rb']);

ls.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

ls.stderr.on('data', (data) => {
  console.log(`stderr: ${data}`);
});

ls.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});


参考:Child Process Node.js v5.5.0 Manual & Documentation

でもはじめは実行してもうまく行かなかったんですよね😿

原因

原因は2つありました。

– Ruby側のstdoutp出ないとダメ
putsでもprintでも実験したらダメでした。
– ちゃんとターミナルでしてなかったのでダメ
Sublime Text3のビルドツールでやってました。

p以外でやった場合は、随時ではなく全て終わってから帰ってきますね。
SublimeText3のビルドツールでrunすると以下のエラーが出ました。


events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: spawn ruby ENOENT
    at exports._errnoException (util.js:856:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at nextTickCallbackWith2Args (node.js:474:9)
    at process._tickCallback (node.js:388:17)
    at Function.Module.runMain (module.js:449:11)
    at startup (node.js:139:18)
    at node.js:999:3

以上、簡単ではございましたがご紹介でした。

Google Drive の画像の直リンクURLを取得する – ありふぁぼ

概要

KENGOです。
今回は、タイトルの「Google Drive の画像直リンクを取得する方法」をご紹介したいと思います。

個人的にパソコン内がすぐごちゃごちゃになるタイプなので、
その時しか使わないような、WEBスクリーンショットなどは、一時的にでもローカルに落としたくない。

よく使うスクショ拡張機能などは、直接Google Driveにデータを渡せるものも多い。
なので、直接呼び出せると個人的には非常に便利だ。

GitHub や Qiita に手軽に画像を載せたい時にも Google Drive を利用できる。

活用シーンはいろいろあると思いますので、覚えておいて損はない。

方法

ドライブ上で画像を表示したURLや共有リンクはこのようになっている。

https://drive.google.com/drive/folders/{ID}
# {ID} 部分にはファイル個別の文字列が入る

これでは、imgタグなどで表示されません。
しかし、以下のように書き換えると表示されます。


http://drive.google.com/uc?export=view&id={ID}

このアドレスで、imgタグでも呼び出せますし、
MarkDownでも呼び出すことができます。

ぜひ、ご活用ください! それでは、今回はここまで。

WordPress で絵文字が使えるとたまたま知った – ありふぁぼ

HEY!GUYS! アレックスです

ぜひ紹介したいものや、気になるもの。
でもがっちりと書く内容ではないことをさくっとライトに紹介していく
そんな投稿を「ありふぁぼ」としてシンプルに投稿していきます。

第一回目の今回はWordPressの絵文字です。

まったく、ぜんぜん使うつもりがなかったのですがー
GitHub用のMarkdownをWordpressにコピペで投稿しましたら、
たまたま、一個だけ顔文字が表示されました。

これね!
Emoji

ちょこっと調べてみたら、素敵な記事がありました。
🔗 LINK : WordPress 4.2 絵文字が使えるようになりました 💕
丁寧に使い方が乗っているので、ぜひご参照ください。

でもこちらの方がGitHubと同じ記法で使えるので私にはいいですね。
🔗 LINK : 大量の絵文字を使えるようになるWordPressのプラグイン・Emoji Emoticons
今度入れてみたいと思います。

上の方は、Unicodeなので、そのままコピペで簡単に使えますが、
ユニコードを覚えることは、ナカナカ難しいと思います。
いつもコピペ必要になりそうです。

下の方は、プラグインが必要ですが、GitHubと同じ記法で絵文字をかけますし、
よく使うのは覚えれそうです。

あなたにあった方法を選んでくださいね。

Rubyスクレイピング Mechanize の設定をクラス定義でまとめて使い回す : 連載-2

Overview – 概要

対象のgemでいつも決まって使用する設定たちや、
よく使うプロセスをオリジナルに定義したクラスでまとめて、リユースできるようにする。
今回は実際に仕事で必要になったMechanizeを例として使っています。

ちょっと詰まりましたので、忘れないようにアウトプット! 😐

Contents – 目次

1. Intention – 目的
2. Examples – 例
3. References – 参考文献
4. Revision – 改訂

1. Intention – 目的

Mechanize使用時に、いつも共通で行っている設定やよく使うメソッドを
専用クラスで定義して、使いまわせるようにする。


  require 'mechanize'

  agent = Mechanize.new
  agent.user_agent_alias = 'Windows Chrome'
  agent.ca_file = "../etc/cacert.pem"
  agent.keep_alive = false
  agent.max_history = 1
  agent.open_timeout = 60
  agent.read_timeout = 180

基本的に使用する上記の設定を専用に定義したクラスのinitializeで実行する。
※注意:6行目 (agent. 3行目) のca_fileは、外部ファイルを指定しているので上記コードコピペでは使用不可。後日別投稿にて解説予定。

2. Examples – 例

失敗例から紹介しますね。
はじめは何も考えずに、さくっと以下のコードにしてしまったんですね。


  require 'mechanize'

  class MechanizeHelper
    def initialize
      agent = Mechanize.new
      agent.user_agent_alias = 'Windows Chrome'
      agent.ca_file = "../etc/cacert.pem"
      agent.keep_alive = false
      agent.max_history = 1
      agent.open_timeout = 60
      agent.read_timeout = 180
      return agent
    end
  end

  # Call part
  agent = MechanizeHelper.new
  page = agent.get('http://www.foo.com/bar.htm')

HEY! 楽勝ですね! 🙂 Let”s run!


mechanize.rb:464:in `get': undefined method `fetch' for nil:NilClass (NoMethodError)
from mechanize_helper_mistake.rb:19:in `<main>'

OMG! 😱

考えてみると、今までこういった使い方をするシーンに出会ったことがありませんでした。
きちんと調べて作りましょう! と調べまして、できましたのが以下のコードです。


  require 'mechanize'

  class MechanizeHelper < Mechanize

    def self.initialize
      super
      self.user_agent_alias = 'Windows Chrome'
      self.ca_file = "cacert.pem"
      self.keep_alive = false
      self.max_history = 1
      self.open_timeout = 60
      self.read_timeout = 180
      return self
    end
  end

  agent = MechanizeHelper.new
  page = agent.get('http://www.foo.com/bar.htm')
  # => Success!

Tada! 🎉 やりましたね!

私のケースでは設定値はほとんど変えることがないので、直接書き込んでいます。
しかし、外部ファイルに分けて読み込ませたり、呼び出しごとに引数を設定してもいいでしょう。
あとは他にも良く使うプロセスを考えて、メソッドとして追加していこうと思います。

3. References – 参考文献

📚 LINK : Qiita – Rubyのクラスメソッドとインスタンスメソッドの例
👤 AUTHOR : tbpgr様 2015/06/30

今回は上記を参考にさせていただきました。
ありがとうございました。THX! 😆 Pretty awesome!

4. Revision – 改訂

Qiitaにて、偉大なるプログラマー様からご指摘がございました。
大変すみません。謹んで修正いたしました。


  require 'mechanize'

  class MechanizeHelper < Mechanize

    def self.initialize
      user_agent_alias = 'Windows Chrome'
      ca_file = "cacert.pem"
      keep_alive = false
      max_history = 1
      open_timeout = 60
      read_timeout = 180
    end

  end

P.S.
このブログのデザインを早く作りたいですね。
でも忙しいですね 😿

そして、ワードプレスのemojiが可愛いことを今知りました。
私はAndroidのデザインが一番かわいいと思います。
🔗 LINK : Emojipedia
Emoji