komagataのブログ

@machidaさんが

「全てのテキストエリアはgithubみたいに画像のD&D・コピペができて欲しい。あとMarkdownで書きたい。」

と常々言っていて、僕もちょっとしたコメント欄でもMarkdownが使えたら嬉しいけどいちいち実装が面倒なので、

「確かにそうですよねー」

と言って流していました。

しかし流すのにも限界がきたので、TEXTAREを画像のD&DとコピペができるMarkdown Editorにするnpmモジュールを作りました。

komagata/textarea-markdown: Make textarea a markdown editor.

railsで使うなら下記のような感じです。

<textarea id="editor" data-preview="#preview"></textarea>
<div id="preview"></div>

import TextareaMarkdown from 'textarea-markdown'

document.addEventListener('DOMContentLoaded', () => {
  const token = document.querySelector("meta[name=\"csrf-token\"]").content;
  const textarea = document.querySelector('#editor');

  new TextareaMarkdown(textarea, {
    endPoint: '/api/image.json',
    paramName: 'file',
    responseKey: 'url',
    csrfToken: token,
    placeholder: '%filenameをアップロード中...'
  })
});

少し便利なところが、textareaのdata-previewにセレクターを入れておくとそこがpreview（HTMLが反映される場所）になるところです。

仕事で使いつつ、もうちょっとリッチな補完とか入れていく予定です。

rubyでいえばGemfileに

gem "foo", path: "~/foo"

みたいに書くヤツ。

npm linkを使う

いい感じにシンボリックリンクを貼ってくれるnpm linkを使うと良い。

npmモジュール側のディレクトリで下記。

$ npm link

利用側のディレクトリで下記。

$ npm link foo

モジュールが完成したら、下記で解除。

$ npm unlink foo

webpackerでrailsプロジェクトでもjsの再利用が進んだのでgemに負けじと活用したいです。

= render @posts

を省略しないで書くヤツ、毎回忘れてググるので貼っておきます。

= render partial: "posts/post", collection: @posts, as: :post

これが便利なシチュエーションは、@postsにPost以外のものが入ってるけど、viewとしはposts/postで出したいという時。

例えばPostをSTIしてUnpublishedPostというクラスがある場合にunpublished_posts/unpublished_post.html.slimを見に行かないようにするとか。

インターンの方の日報をチェックしてコメントするのが日課（仕事）なのですが、今まで、

「チェックしてないやつはどれかな？」

と探し回らなくてはいけなくて、さらに、

「チェックが漏れてる人がいたら申し訳ないな」

と思っていたのが、確認済みのものにチェックマークが入るようになってクッソ便利になった。

他に人にはどうでもいいかもしれないけど、僕にとっては日課がはかどるライフチェンジングな追加機能でした。

あざーす！

256 INTERNS

Rails Developers Meetup #6で交換型インターンシップについて発表しました。

Rails Developers Meetup #6 東京会場｜IT勉強会・セミナーなどのイベント情報検索サービス - TECH PLAY［テックプレイ］

交換型インターンシップ

もしインターンやってみたいなという方がいらっしゃったら下記から応募していただけるととてもうれしいです。

256 INTERNS

また、会社でインターンを受け入れて弊社のシステムで教育したいという方もいらっしゃったら連絡いただければ幸いです。

オフィスでいい感じだったので家でもPC用のデスクにイケアのLINNMONという横幅120cmの天板を使っています。

LINNMON テーブルトップ - ホワイト - IKEA

ただ、上記のように家の最近買ったディスプレイの足が低く、テーブルの上も手狭で気になっていました。

そんな時にネットで机上棚というものを見つけました。しかし、いかんせん高いし欲しいのともちょっと違ったので、

「自分で作ったら行けるんじゃない？」

と思って作ってみました。

あまり写真に変化がありませんが、テーブルの上に横幅の同じ棚が追加されたのがわかりますでしょうか？

これによってディスプレイの高さもちょうどよくなり、後ろにケーブルが出る系のものも隠す感じで繋げられるようになって机上のスペースが増えました。

このテーブルシェルフは近所のホームセンターでカットしてもらってネジで止めて、ミルクペイントのスノーホワイトを塗ってニスを塗りました。

足の部分を太くしたのはガッシリ感が出て良かったですが、ネジ穴はパテじゃなくてダボで埋めればよかったなと思います。今後に活かしましょう。

かかった値段は工具やペンキは余ってたのがあったので木とカット代で5000円ぐらいだったと思います。

なかなか満足度が高かったので色々作っていきたいです。

今までの流れはこうでした。

1. @machidaがslimでモックとして作る。
2. 僕がjsにするためにhtmlに翻訳してfoo.vueに移す。

これがクッソ面倒だったのですが、pugならslimとほとんど同じなのでコピペでいけました。

$ yarn add pug

templateタグにlang="pug"を追加する。

app/javascripts/packs/components/foo.vue:

<template lang="pug">
  header.content
    h1 トップページ
</template>
<script>
いろいろ
</script>
<style>
いろいろ
</style>

「ヒューッ！」

webpackerの設定は一切無し。

RubyMineを使ってるなら、pugプラグインを入れればシンタックスハイライトもちゃんと動きますね。

Ruby - なぜ最終行に改行を入れるのですか？(71778)｜teratail

POSIX上、テキストファイルは「行」の集合体で、そして「行」は「0文字以上の文字+改行」からなっている、とのことです（Qiita）。

Rubyのコードでも、（よほど変なことをしない限り）それに従わない必要性のある理由もないことでしょう。C言語においても、改行で終わらないコードは正しく動くことが保証されません。

へぇ〜、やっぱ大事なんすねぇ〜。

create_join_tableでuuidを使う場合はどう書けばいいのか。

column_options: { type: :uuid }を使う。

class CreateJoinTableUserWork < ActiveRecord::Migration[5.1]
  def change
    create_join_table :users, :works, column_options: { type: :uuid } do |t|
      t.index [:user_id, :work_id]
      t.index [:work_id, :user_id]
    end
  end
end

現場からは以上です。

こちらについて、@tricknotesさんからズバリな回答をいただきました。

動的に増える要素へのイベント設定 | komagataのブログ

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

上記のようなHTMLでliが動的に増える場合、イベントのbubblingを利用して親の要素にイベントを設定しておいて下記のように捕まえればいいそうです。

const ul = document.querySelector("ul");
ul.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("FOO↑↑↑");
  }
});

これなら処理速度も安心ですね。

こういうやり方はEvent Delegationって呼ばれてるそうです。

スッキリしました！