あっきー💃の投稿 - Crieit

Windows WSLのUbuntuにGoogleChromeをインストールする

2020-09-20T19:59:37+09:00

Railsで開発をしていてRspecでChromeDriverでのテストを利用しているためChromeが必要になったのでインストール

sudo apt-get update
# 必要なライブラリのインストール
sudo apt-get install libappindicator1 libappindicator3-1 fonts-liberation

# 最新安定版のDL、インストール
curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

# ここでパッケージの依存関係で怒られたので依存関係の解消
sudo apt --fix-broken install

# 再度インストールを試した
sudo dpkg -i google-chrome-stable_current_amd64.deb

# インストールされていることの確認
google-chrome --version

参考

Railsでモーダルの出し分けを管理する

2020-05-01T22:32:30+09:00

Railsでモーダルの表示処理をまとめて衝突しないように管理する方法を紹介します。

背景

ツクリンクを運営する中でモーダルが少しづつ増え、衝突することがあったためモーダルの優先順位を付け、衝突しないよう実装をしました。

実装

前提

以下の３つのモーダルがあるとします。

A: 初回ログインで出すモーダル（全ページ）
B: 特定のユーザーにだけお知らせを出すモーダル（全ページ）
C: 特定のページで出すモーダル（Posts#show）

コードサンプル

全ページに出すモーダルはApplicationControllerで該当ユーザーか判断しモーダルに必要な情報をセットします。

# controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :set_modal_A
  before_action :set_modal_B

  def set_modal_A
    return if cookies['modal_A'].present? # 表示済みなら何もしない
    if is_first_signed_in? # 初回ログインか？
      @modal_A = { title: '表示に必要な情報など' }
    end
  end

  def set_modal_B
    return if cookies['modal_B'].present? # 表示済みなら何もしない
    if show_notice? # お知らせを出すユーザーか？
      @modal_B = true
    end
  end
end

Viewごとに出るモーダルは provide でモーダルをセット

# views/posts/show.html.erb
<% provide :modal, render('modal/C') %>

レイアウトのView（もしくはそれに準ずるパーシャル）でモーダルの出し分けを行います。
ifの上位にあるものが優先され、モーダルが複数renderされるのを防いでいます。

# views/layouts/application.html.erb
<% if yield(:modal).present? %>
  <%= yield(:modal) %>

<% elsif @modal_B.present? %>
  <%= render 'modal/B' %>
<% elsif @modal_A.present? %>
  <%= render 'modal/A' %>
<% end %>

各モーダルのViewでは表示を管理するCookieを保存するなどの処理をしています。

# views/modal/A.html.erb
<% cookies.permanent['modal_A'] = { value: true, expires: 1.day } %>
お知らせだよ！

インスタグラムのブログパーツを作った📷

2019-06-23T17:06:57+09:00

作ったもの

Insta Window Tool

こんな感じでインスタの写真をサイトに貼り付けられます。

作った背景

インスタグラムの写真をサイトに貼る必要があったので調べたところ、ブログパーツは既にあったのですがブログパーツのサイトにリンクしてしまう残念仕様だったので自作しました。

技術スタック

VueJs
FirebaseHosting
UIKit

くらいかな？

今後の予定

ブログパーツのサイズや色など設定できるようにしていくつもりです（いつか）

突貫で作ったものなのでキレイにしてくれたり機能追加してくれる方募集中です😉
https://github.com/akinov/insta_window

なにかあれば@kuronekopunkへ💁‍♀️