2019-07-04

Ubuntu 19.04にDocker CEをインストールする

Ubuntuのバージョンを18.04から19.04にして、Dockerを再インストールしようとしたら、インストールできなかったので、その対処をメモ。

執筆時点で、Ubuntu 19.04 (Disco Dingo)のStableパッケージはDockerのソースとして公開されていないようでした。

docker-ce package is missing for Ubuntu "Disco Dingo" 19.04 x86_64 · Issue #533 · docker/for-linux · GitHub

今回は、Ubuntu 18.10 (Cosmic Cuttlefish)用のStableパッケージをインストールすることで対処しました。

その手順は以下の通りです。

まず、Docker公式のインストール手順どおりにSET UP THE REPOSITORYを完了させます。

https://docs.docker.com/install/linux/docker-ce/ubuntu/#set-up-the-repository

次に、/etc/apt/sources.listを以下のように編集します。

-  deb [arch=amd64] https://download.docker.com/linux/ubuntu disco stable
+ deb [arch=amd64] https://download.docker.com/linux/ubuntu cosmic stable

あとは、さきほど同様にDocker公式のインストールに従って、INSTALL DOCKER CEを完了させます。

https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce-1

以上です。

2019-06-30

Google Cloud Storage の signed url を使ってブラウザからファイルをアップロードしようとしたらCORS Origin エラーが出たときの対処法

Google Cloud Storage の signed url を使ってブラウザからファイルをアップロードしようとしたらCors Origin エラーが出たときの解決策をメモ。

bucketのcors設定を変更します。今回はgsutilを使います。

cors設定ファイルとして、storage-cors.jsonファイルを用意します。（ファイル名は適当です）

[
  {
    "origin": ["http://example.com",],
    "method": ["GET", "HEAD", "PUT", "OPTIONS", "POST"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

あとは gsutilを使ってcors設定ファイルをbucketに反映させます。

gsutil cors set storage-cors.json gs://{{bucket}}

参考：

2019-04-08

WebStorm + nvm + File Watcher で node-sass を実行する

Jetbrains IDE ソフトウェア開発

ちょっとしたHTMLコーディングするときに、WebStormのFile Watcherでsass(SCSS)をcssに変換できると便利です。

私の開発環境のUbuntuでは、nodeのバージョン管理にnvmを使っています。

私の環境では、File watcher実行時にnode の実行ファイルが見つからないとエラーが出てしまって、File Watcherが使えませんでした。

WebStorm の File Watcherで nvmでインストールしたnodeを実行する方法についてまとめます。

File -> Settings -> Tools -> File Watchersを選択
+ボタンを押してSCSSを選択する
Tool to Run on Changes -> Environment variablesのフォルダーボタンをクリック
NameにPATH、Valueに$PATH:/{{ユーザー名}}/.nvm/versions/node/v10.15.0/binを入力してOKを押す

他に、WebStormでsassコンパイルする方法として、 package.jsonのscriptsに

"css:watch": "node-sass ./*.scss -o css -w "

を追加して、Run / Debug Configurationから実行させる方法もあります。

以前はターミナルでnvmのnodeが使えなかったのですが、最近のバージョンでは解決されたようです。 WebStormに限らず、JetBrainsのIDEは頻繁にアップデートしているので、 File Watcherでnvmのnodeがデフォルトで使えないことも解決するかもしれません。

2019-04-08

Webサービス公開前チェックリスト

マーケティング

サービスをつくっていよいよ公開！の前にチェックする項目をリスト化

SEO
- 基本的なMetaタグ（title, description, og:type, og:title, og:description, og:image, og:url）を記載する
  - og:imageのURLは絶対URLで記述する必要があるので、あらかじめ画像ファイルを公開しておく必要がある
  - ogタグはここから調べる The Open Graph protocol
  - og:type の種類はここから調べる The Open Graph protocol
- Google Search Consoleにサイトを登録する
  - サイトマップを用意して、登録する
アクセス解析 Google Analytics
- Google Analyticsのアカウントを登録する
- 自分のアクセスを除外する
  - Google Analytics Opt-outをChromeにインストール
  - 自分がアクセスする環境のIPアドレスを取得して、GAのIP除外に含める
- ユーザー分析でユーザー指標を有効にする
- Search Console と連携する
- コンバージョンの設定ができているか

2018-06-26

macのmysqlがmysql8.0になってたので、mysql5.7に戻したときのメモ

ソフトウェア開発

brew upgradeをしたら、気づかないうちにmysql 8.0になっていました。ローカルのmysql serverに接続できなくなったので、mysql 5.7に戻したときのメモです。前提として、msyql 5.7がもともと動いていて、brew upgradeをしたことで、mysql 8.0がインストールされたものとします。念の為、/usr/loca/var/mysql以下のバックアップを忘れないようにします。

まず、mysqlのバージョンチェック。 8.0系が表示されることを確認

$mysql --version

mysql 8.0をアンインストール

$brew uninstall mysql

symlinkの状況を確認

$brew doctor

mysql5.7のsymlinkを再設定

$brew link mysql

mysqlのバージョンを確認

$mysql --version

mysql5.7になっていれば完了

お疲れ様でした。

2018-05-08

gitlab + plantuml server を ssl で運用する

ソフトウェア開発

gitlab ce (omnibus) でplantumlを有効にするためにやったこと。

環境 Ubuntu 16.04 (gitlab ce) , Ubuntu 16.04 (plantuml)

はじめに、plantuml-serverをインストールする。今回は以下のドキュメントに従ってplantuml-serverをインストールした。

docs.gitlab.com

openjdk-7-jdkはubuntu 16.04だとダウンロードできないので、ppaを追加しておく。

askubuntu.com

sslはnginxのreverse proxy と certbotで構築する。

nginxをインストールする。

virtualhostとreverse proxyを設定する。以下のようなvirtualhostを/etc/nginx/sites-available/defaultに書き込む（別ファイルにしても良い）。

server {
         listen 80;
         listen [::]:80;

        server_name uml.example.com;

        location / {
                proxy_pass http://127.0.0.1:8080/;
                proxy_pass_request_headers on;
                proxy_set_header        Host  $http_host;
                proxy_set_header        X-Real-IP  $remote_addr;
                proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header        X-Forwarded-Proto $scheme;
        }

}

ここで, 127.0.0.1:8080は、/etc/tomcat7/server.xml に記載されているポートとなっている。

続いて、certbotをインストールする。インストール方法は公式ドキュメントに従ってインストールする。

certbot.eff.org

https://uml.example.com/plantumlにアクセスして、httpsとなっていればOK。

最後に、gitlab側でplantumlの設定を行う。

前述のgitlab - plantumlのドキュメントに従って、gitlab のadminパネルからplantumlを有効にして、 urlをhttps://uml.example.com/plantuml/とすれば完了。

wikiなどでplantumlが直接画像で表示されるようになる。

※gitlab ce (omnibus)と同じサーバーにplantuml-serverの設置を試みたが、nginxの設定がうまく行かず、断念した。なので、今回はgitlab ce と plantuml-serverは別のサーバーとしている。

2018-03-28

video.jsのVolumeControlをiOSで表示する

ソフトウェア開発

iOSでインライン動画自動再生をしたときにミュート解除ができないのは不便なので、 iOSでもボリュームコントロールを表示できるか試行錯誤してみた。

playerの再生開始イベントでshow()を呼ぶと表示できるみたい。

環境

video.js (6.8.0)
iOS 11

Code

<video id="video_player" class="video-js vjs-default-skin" controls preload playsinline muted>
    <source src="" type="application/x-mpegURL">
</video>
/* ... */
<script>
var player = videojs('video_player');
player.ready(function() {
    player.on('play', function() {
            player.controlBar.volumePanel.show();
            player.controlBar.volumePanel.volumeControl.show();
            player.controlBar.volumePanel.muteToggle.show();
    });
});
</script>

FUMINORI.WORK

Webアプリ開発・スマホアプリ開発・UIデザイン・マーケティング

Ubuntu 19.04にDocker CEをインストールする

Google Cloud Storage の signed url を使ってブラウザからファイルをアップロードしようとしたらCORS Origin エラーが出たときの対処法

WebStorm + nvm + File Watcher で node-sass を実行する

Webサービス公開前チェックリスト

macのmysqlがmysql8.0になってたので、mysql5.7に戻したときのメモ

gitlab + plantuml server を ssl で運用する

video.jsのVolumeControlをiOSで表示する

環境

Code