at backyard

Color my life with the chaos of trouble.

Blobmakerを使って、簡単に良さげなデザインのアイコンや画像を作ってみる

下書きフォルダで眠っていた記事を掘り起こして、公開します。 少し前に書いたものとなります。

Blobmakerとは?

www.producthunt.com

Product huntで紹介されていた Blobmaker というのを使ってみたかったのでこの記事を書いている

名前の通り blob(しみのようなもの) を作るデザインツールで、こういうblobデザイン(?)というのはここ数年のwebデザイン界隈で流行っているよう。
確かに言われてみると、よく見かける。
ちなみに参考サイトとかも紹介しつつ、書いてくれている下記の記事がわかりやすかった。

blog.prototypr.io

早速Blobmakerを使ってみる

実に直感的に使えるので、使い方などは書かない。
自分のほしい形状を作成してダウンロードボタンを押すだけ。

www.blobmaker.app

試しにアイコンを作ってみたいので、商用利用可、かつ無料で使えるFLAT ICON DESIGNの素材を使って試してみる。

flat-icon-design.com

追記:Blobmarkerの使い方を解説されている方の記事を見つけました。

studiosero.net

試しにHTMLでSVGを重ねてみた

HTMLだけで2枚のSVG画像を重ねたものを作成してみた。
ただし無理やり作ってみた感じが半端ない。。。
ココらへんもっとうまくやりたいところ

f:id:shinshin86:20190511234803p:plain
実際にblobとiconを重ねてみたところ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blob sample</title>
  </head>
  <body>
    <div>
      <div style="width: 500px;height: 500px;background-image:url([blob画像パス]);display: flex;justify-content: space-around;align-items: center;background-position: left;">
        <img width="200" height="200" src="[icon画像パス]" alt="icon">
      </div>
    </div>
  </body>
</html>

さくらで取得したドメインで、かつNetlifyで管理しているもののSSLの更新を行う場合

さくらで取得し、Netlifyで管理しているドメインSSLの更新を行う場合

さくらからメールでドメインSSL更新に失敗したというメールが来た。

SSLサーバ証明書 更新のエラーについて

いつも、さくらインターネットのサービスをご利用いただき誠にありがとうございます。 このメールは無料SSL機能をご利用のお客様で、証明書の自動更新に失敗した方へお送りしております。
現在ご利用中の無料SSL機能で自動更新に失敗したため証明書の発行ができませんでした。

正常に更新できているドメインもあるので、なんでかな?と調べていたら、該当するドメインについてはさくらで取得したドメインnetlify で管理しているのが原因のようだ。
そしてこのパターンの場合、解決法を調査してみてもわからず、レンタルサーバコントロールパネルから更新手続きを手動で行ってみても、うまく処理できないようだった。

Netlify側で自動更新してくれるので問題ない

結論から書くと、Netlify側で管理しているドメインについては、Netlify側で自動的に更新してくれるので、放置で大丈夫のようだった。

一応Netlify側のダッシュボードで、Domainを使用しているサイトのoverviewから Domain setting、もしくはsetting -> Domain Management からいくと手動でも更新ができるようだが(※そして試しに手動でポチってみた)、手動でポチってみても特に更新は行われないようだった。
(期限切れまで間があったので、その場合は更新されないのだろうか?あくまで緊急用の処置のためにある?これは私の勝手な憶測だが)

Netlify側で手動更新しようとしたときの挙動メモ

ここからは一応残しておくレベルのメモ。特に見る必要はない。

※Domainを使用しているサイトのoverviewから Domain setting、もしくはsetting -> Domain Management からいくと、手動でも更新ができる。

更新しようとすると、Netlify の画面側で下記のようなメッセージが表示される

We’ll contact Let’s Encrypt to renew your certificate, then automatically install it on our CDN.

要約すると あとはLet's Encryptに連絡して更新し、適用しておくよ とのこと。

自分の場合、これをやっても特に更新されたようには見えなかったが、一応こういうやり方もあるようだったので書き残しておく。

気の赴くままに書いていく日

タイトルの通り、気の赴くままに書いていきます。

Node.jsを使ってCSVを書き出す

久しぶりにQiitaを更新しました。

qiita.com

Qiitaに投稿していて思うのは、Qiitaというサービスのそもそものコンセプトでもありますが、開発者にかなりリーチしているということ。
自身が過去に投稿した記事なども、Qiitaを開くたびにLikeが増えていたりしていて、こういうのはモチベーションアップになります。
(私自身の記事は全くバズったりはしていないのですが、それでもやはり嬉しい!)
あと、あやふやな部分などや誤字などは修正リクエストもらえるのもよかですよね。

時々、ポストした記事に追記したり修正したりすることで、記事のクオリティも上がっていくし、自分にとっての公開備忘録とかお手製ドキュメントといった感じで使えます。
今現在私はwebから直接記事を書いている感じですが、web上のマークダウンプレビューも全然動作が軽いし、すごく使いやすく良いです。
これからも使わせてもらいます。

浜崎あゆみの告白本のレビューを読んでアユを聴き返している

少し前にバズっていた下記の記事を読んで、久しぶりに浜崎あゆみを聴き返しています。

nyankichitter.hatenablog.com

ちょうど私が中学生の頃にアユ旋風が日本列島を駆け巡っていたような気がします。
よく聴いたアルバムはLOVEppersです。
今も聴き返しながらこれを書いていますが、いやー懐かしい。

music.apple.com

Fly highを口ずさみながら田舎の通学路を自転車で駆け回っていた思い出が蘇るww

サマソニのストリーミングを見た

フジロックに引き続き、サマソニもストリーミングで見ました。
フジとは違って(?)フルステージで配信というのはされず、飛ばし飛ばし(そして多分リアルタイムじゃない)な映像だったのがちょっと残念。
なるべく多くのライブを見せたいということからだろうけど、そこはライブの臨場感を優先しても良かったのかなと思う。
とはいえ、いずれにせよ、無料で夏フェスが見れること自体が素晴らしい。
ライブも実際楽しかったし、最高でした。

以前フジロックを見たときの感想は下記にあります。

shinshin86.hateblo.jp

主に見たのは8/17(土)のラインナップ。

以下、一言コメント

THE INTERRUPTERS

初観
ランシドばりのパンクなイメージだった。
ステージングが楽しげで見ているこっちも幸せな気持ちになった

CIRCA WAVES

初観
アークティック・モンキーズを彷彿とさせるUKロックな感じ
かっちょいいロックをこれでも披露するステージングはグッド

BABYMETAL

個人的に大好きなギミチョコを見れたのが嬉しかった。
あの分厚いサウンドの中、声がしっかり通っていてすげーと思った!
2曲だけしか流れなかった。

RED HOT CHILI PEPPERS

イントロ〜キャントストップの流れがやはり神。
ジョン・フルシアンテと比べられがちだけど、ジョシュのギターもかっこいい。
あの低い位置で構えながら引くの姿が、また見とれちゃうんだよな。

グーグルストリートビューでさまよい続けるサービスに関する話が面白いかった

さっき読んだブログの記事ですが、サービス公開して、Polcaを使ったクラウドファウンディングを始めるまでの経緯なども含め、面白かった。
こういう形で寄付を募りながらサービスを継続していくやり方はイマっぽい。

i-m-a-g-e.club

この方の場合、寄附金額がサービス運営費よりも大きいので良かったが、必ずしもそうじゃないケースもあるだろう。
一つのサービスに対して毎月発生する費用をどのようにまかなっていくいくかというのは、ひとつ色々と試行錯誤していくべきポイントなのかもしれない。

ブラウザ上のplayground環境で遊べるサンドボックスを提供してくれる roonnroll が面白そう

下書きで書き残したままになっていた記事を見つけたので公開しました。
以下、本文

playground環境で遊べるサンドボックスを提供してくれる roonnroll が面白い

偶然見つけました、roonnroll というサービス

welcome.rootnroll.com

これはzshfishなどのシェルのplaygroundを提供してくれるサービスのよう。
しかもこのサービス自体がgithubで公開されているので、覗いてみるのも面白そう。

github.com

This repository contains source files to build Docker images used to run interactive playgrounds/demos on rootnroll.com.
(このリポジトリには、rootnroll.comでインタラクティブなプレイグラウンド/デモを実行するために使用されるDockerイメージを構築するためのソースファイルが含まれています。)

試しにいくつかだけ、少し触ってみた。

ブラウザから fish shellを試す

モダンなシェル環境でおなじみのfish shell
早速、私もブラウザ上から遊んでみましたが、なかなかモダンな気がします。

rootnroll.com

ただ、私自身 bash や zsh をそこまで使いこなしているわけではなかったので、それらのシェル環境に比べてどこがどう良いのかまではコメントできなそうです。。
とりあえずモダンな環境で遊んで楽しかった!という感じ😂

ブラウザから Oh My Zsh を試す

こちらは普段私も使っています、Oh My Zsh

rootnroll.com

最近だと、macのデフォルトシェルが zsh に変わるってことで、また知名度を上げるかも??なシェル環境ですね。

shinshin86.hateblo.jp

zsh便利なんだけど、ついつい設定コミコミにして重くなりがちなので、そろそろ.zshrc の整理をしようかと思っています。
また、上にも書いたけど自分の場合、zsh(というかoh my zsh)は簡単なセットアップで自動補完とかしてくれるし、見た目も良さげになるので使っているという感じで、zshをそれほど使いこなせているわけではありません。
zshは例えばbashに比べてどういうことができるのか? roonnroll内で色々と触ってみながら改めて学び直すのもよいかと思いました、そんな今日このごろ。

ブラウザで pipenv を試す

シェル環境だけでなく pipenv もありました。

rootnroll.com

最近Python書くときは、もっぱら pipenv 使っています。
JSの npm と近いノリで使えるので、嬉しいです。こういうのをPythonでも求めていたという感じです。

ちなみに基本的な使い方については自身のQiitaにも書いています。

qiita.com

こういうふうに気軽に試せるplaygroundが提供されているのは良いですね。

mac上からApple Music の年間プランに切り替える方法

私はApple Musicを日頃から使っているのですが、
Apple Musicって月¥980だけどさ、年間だと¥9800で使えてちょっとお得なんだよ〜」
と、同じくApple Musicを使っている友人からお得な情報を教えてもらい、早速年間プランに変更してみました。

ただ、このApple Musicの年間プランへの変更方法がなかなか分かりづらい感じでしたので、実際に操作した際の記録を備忘録として残しておきます。

環境はmacOSを想定しています。
iTunes appを開いて下記の順に操作すると、年間プランに変更が可能です。

macを使って、Apple Musicの年間プランへ変更する方法

  1. iTunesからストアタブを選択する
  2. 画面下にある管理というところにあるアカウントを選択する
  3. アカウント情報画面が開くので、設定内にある登録という項目の管理ボタンを押す。
  4. すると、現在契約(登録)しているサービスが表示されるので、そこにあるApple Musicメンバーシップの項目の編集ボタンをクリックして年間プランに変更すればOK

f:id:shinshin86:20190813191450p:plain
ここまで来れば、あとは年間プランに変更するだけ!

iPhone, iPad, PC(Window)環境での切り替え方

iPhone, iPad, PC(Window)環境での切り替え方を書かれている方の記事を見つけたので、下記に貼っておきます。
これ読んだ感じ、Windows環境とmac環境ではプラン切り替えの手順は同じそうですね。

yossy-style.net

苦手なセミの克服方法 (検証中)

セミが怖い、セミが苦手

はい、それは私です。

昔はそれほどでもなかった。
というか、近所のお兄ちゃんたちに混じって子供の頃は蝉の幼虫とかも捕まえていたと思うんだけど、いつの間にかだめになってしまった。。
あの硬そうなフォルムと、かな切り声を上げて暴れまわる様がダメなんですよね〜
あと、今住んでいるマンションが結構踊り場にセミ爆弾が落ちていて、割とそれで驚くことが多いので、最近さらに苦手度が増してきてしまっている次第です。
本当は夏は憂鬱です。

で、結構こういう人って多いのかなと思って調べてみたら、皆さん悩んでいるんですね。。。

発言小町 - 恐怖・・・セミが怖くて外出できない

ここに書かれている内容、共感しかなくて辛い泣。

ちなみにセミが苦手な方が解決方法を求めてインターネットで検索するケースは結構あるようで、結構セミ対策の記事は見つかりました。

蝉恐怖症によるセミ対策方法!効果実証済みおすすめ撃退方法4選!〜こっちに飛んで来ないで〜(蝉画像なし)

蝉(セミ)恐怖症の症状がヤバイ!意外な原因と簡単に対策できるおすすめグッズを紹介!

上の記事はセミ対策おすすめグッズの紹介だったり、セミの特性が書かれていたりするので読む価値ありです。
ありなのですが、読んだところで、やはり、どうしてもセミが苦手なのは治りません。
(まあ、そりゃそうだよな)

ただ、心の底からセミを克服したいと私は思っているは少し荒療治的な行動に移すことにしました。

そう、You Tubeを活用するのです!!!!!!!!!!

セミの動画をひたすら見まくる(セミ画像は出ないので安心してください)

セミが嫌いな人もいるかと思うので、リンクはすべてテキストリンクで貼ります。
セミの画像はこの記事には一切出てきません。
ただしリンク先は潔いぐらいセミがドアップで写っています。苦手な人は本当に開かないほうが良いと思います。
ただ、これらの動画を見て、セミの姿・動き・声になれることで、自分はセミ克服ができるんじゃないかとホンキで考えています笑。

一応、セミレベルを3段階に分けて貼っていこうと思います。

セミレベル:1 - うわー無理レベル

虫捕りマスター、はじめ

有名YouTuberのはじめしゃちょーがセミ取りする動画。
セミのドアップは少ないですが、それでもすごい!!!!!!今見返したけど、撮ったセミをかごに入れていくところとか背筋ゾワゾワしちゃう。

セミレベル:2 - マジ無理レベル

クマゼミ 捕獲 2016.7.20 近くの公園で

ここからレベルの次元が一気に変わります笑。ってか、まだ二個目なんだけど。
撮ったセミのドアップ映像がこれでもかと流れます。体、お腹までばっちり。
正直無理な人は気を失うレベルです。私は最初見たとき冷や汗でまくりでやばかったです。
ちなみにイヤホンを耳に入れた状態で見ると、直ぐ側にセミがいる感じがして、もうこれ書きながら失神仕掛けています(支持滅裂)

蝉の捕まえ方

2個目に貼った動画よりは多少マイルドかな。。。って思ってみていると、やはりそうでもなかったです笑。
なんで皆さん、こんなにセミに触れるの。。。。。。。爪の垢を煎じて飲みたいです。それでセミ恐怖症が直るなら。

セミを捕まえてエサをあげてみよう! 夏休み自由研究 Feeding a Cicada! Summer Research Project

子供向けな世界観でかわいらしい...な、わけあるかーーーーーーーーーーーーーーーー!!!!!!!!!!!!!!!!!!!!!!!!!
こちらもセミがドアップで映ります。クマゼミアブラゼミです、イヤホンしているともうやばいです。
子供はこういう動画見てセミ集めたいーーーーとかって言い出すのかな。

アブラゼミ ♂ 捕獲 観察

もう初っ端からドアップ。
マッチョな外見。そうそう、これなんだよ、マンションの踊り場で休んでいるセミの姿😱
セミの顔からお腹まで詳細に写してくれています。本当、そのセミ耐性を私にも分けてください!!!!!!!!泣って感じです。

ヒキガエルのこうへい、アブラゼミ喰う

タイトルのとおりです。。。。。。。。。。。。。。🐸
この動画、イヤホン聞きながら見ると、かなり臨場感あるサウンドで蝉の鳴き声が聞こえます。
最初、部屋に入ってきたのかと思ってドキッとしちゃいました。

セミレベル:3- 観覧注意

蝉捕まえてきた、まる。

相当やばいので、本当に大丈夫な人だけ見てください。
気になる人に動画の内容を話すと、段ボール箱の中に大量のセミが捕まえられて入っています。
もうひたすらやばいです。。。。。言葉が正直出てきません。

最後に

この動画が見慣れる頃にはセミにも多少耐性がついているでしょうか。検証してみます。
毎朝見ていくぜー...

追記

有言実行すべく、ちゃんと見ています。
まだマンションで出くわすとビビりますが、この前明らかに踊り場に転がっていたセミファイナル(セミ爆弾化したセミ)に対して、あえて近づき爆発するまえに飛ばしてしまうということをしました。
すこし、、、、、成長しているかもしれない、、、、、、、、!

はてなブログの無料版だけど、Google AdSenseの広告が貼れた

はてなぶろぐの無料版で、Google AdSenseの審査に通った

少し前のことだが、こちらの方の記事を読んで、はてなブログの無料版でも行けるようになったのか!と思い、試してみた。

gadgeterkun.hatenablog.com

問題なく審査には通った。

f:id:shinshin86:20190811110145p:plain

Google AdSenseの自動広告が、はてなブログに表示されない

Google AdSenceの自動広告を最初設定したのだが、どうやら広告が正常に表示されていないよう。。。
AdSenceのダッシュボードを見ても広告の表示回数が0回となっている。

はてなブログのヘルプ(Googleアドセンスの設置をする) の内容をチェックしたところ、

はてなブログ内でGoogleアドセンスの自動広告機能が動かない場合は、お手数ですが、下記のGoogleアドセンスの公式ヘルプを参照の上、手動で広告を設置してください

広告ユニットを作成する - AdSense ヘルプ

とあったので、一緒に貼られていたリンク先のやり方をみて、広告ユニットを手動で作成して、タイトル下にコードを設置した。

一応手順としては、

  1. google adsenceにアクセスする
  2. 広告 -> 広告ユニット と移動し、新しい広告ユニットの作成を進めていけばOK

あとは生成されたコードをはてな側に貼り付けることで広告が生成されていることが確認できた。

ちゃんとGoogle AdSenceのダッシュボードにも広告表示回数が反映されているようなので、これでOKだろうということで備忘録がてら、こちらにも書き残そうと思った次第。

f:id:shinshin86:20190811110624p:plain
表示回数がカウントされている!ちなみにこのページビューで、どれぐらいの収益を発生させられるんだろうか...

もし、はてなブログで広告を設定したのに表示されないという方がいたら、確認してみると良いかもしれません。