Y38Design

プロダクトデザインをはじめとして、
Webデザイン、グラフィックデザインなどを手がけるデザイナーY38のサイトです。

Profile Portfolio Blog

Profile

Portfolio

Blog

mixin

Webデザイン 2019年4月9日 火曜日 8:23:47

早朝覚醒した時は持ち出し専用のサブ機を連れてきてクルマの中で作業する。
とは言ってもエディタとブラウザだけしか入ってないからコーディングしかできないけど。
そんでここ数日は、この表サイトを弄って見た目や構造を変えたくないので裏に別ページ作ってそっちでいろいろ試し始めた。
mixin使ったメディアクエリ、いろいろ宣言しないといけなくて頭がパンクしそう。
eachだのを使うやり方もあるみたいだけどそっちはもっとぐちゃぐちゃになりそう…
cssもプログラミングチックになってきてこれらができなきゃと思うとかなりの危機感。
phpやjsが苦手な自分としては、せめてcssはなんとか会得しなければ。

あらら

Webデザイン 2019年4月6日 土曜日 8:32:14

Koala

Webデザイン

koala使わずにatomだけでscssをコンパイルしようとsass-autocompileていうプラグイン使ってみたらそんなコマンドねぇって怒られてアレーと思ってみたらNode.jsやらなんやら全くインストールしてなかったみたい。
Koalaはその辺インストールしなくてもそれ単体でコンパイてくれてたのね…勘違い

トグルスイッチ

Webデザイン 2019年3月26日 火曜日 8:44:17

こちらもやろうやろうと放置していたもの。
チェックボックスをiOSのトグルスイッチ形式の見た目にすること。
特にdisplay:noneとかを使わず予想以上に簡単にできた。
ただ、個別ページのコメント部分には適用してないのでそれはまた後日。

lazyload

Webデザイン

放置してた画像の遅延読み込み、ようやく組み込めた。
ネットで探した中でヒット数が多かったjquery.lazyloadを使うことに。
ただ、思った以上に読み込み速度が上がらない。
ポートフォリオのセクションは画像が多くてそれらをすっとばすはずなのに。
まあそれでも多少でも速くなったのでひとまずは良しとする。
あとは、訪問者が最初に訪れた時だけprofileとportfolioを表示させて、そこからどこかへページ遷移すると表示させない、ということをやりたい。毎ページportfolioとかが表示されるのも鬱陶しいので。
どうすればできるのか、そもそもできることなのか、そこから調べないといけない。

mastodon インストール後〜アップデートまで

Webデザイン 2019年3月13日 水曜日 9:06:58

mastodonのインストールが終わったら、とにもかくにもsshの設定。

ローカルで
$ cd ~
$ mkdir .ssh
$ cd ~/.ssh
$ ssh-keygen -f rsa -t rsa

サーバ上のマストドン(hogegoge)ユーザで
$cd /home/hogehoge
$ mkdir .ssh
$ chmod 700 .ssh

ローカルで
$ scp ~/.ssh/rsa.pub hogehoge@「ipアドレス」:~/

hogehogeユーザで
$ cat rsa.pub > .ssh/authorized_keys
$ chmod 600 .ssh/authorized_keys
$ rm -f rsa.pub

$ sudo vi /etc/ssh/sshd_configを編集
PermitRootLogin no
PasswordAuthentication no
Port 「任意の番号」
#PubkeyAuthentication yes
$ sudo systemctl restart sshd
$ sudo vi /usr/lib/firewalld/services/ssh.xml
〜〜 port=”上記の番号”〜
$ sudo firewall-cmd –reload

ローカルで鍵を使ってログインできるか確認
$ssh -p 上記の番号 -i ~/.ssh/rsa hogehoge@hogehogeのIP

ローカルでこれをつくっておく
ローカル
(~/.ssh/config)
Host foobar
HostName hogehogeのIP
Port ポート番号
User hogehoge
IdentityFile ~/.ssh/rsa

としておくと次回から「ssh foobar」と打てばログインできる

ユーザーに管理者権限を付与
/home/mastodon/liveのディレクトリで行う

echo “export RAILS_ENV=production” >> ~/.bashrc
cd /home/mastodon/live
RAILS_ENV=production bin/tootctl accounts modify alice –role admin

アプデ手順
無難な対応としては、最初にmastodonを一度停止した方が良いので停止する。

systemctl stop mastodon-{web,sidekiq,stream}

Mastodonのインストールパスに移動
cd /home/mastodon/live

git で最新の状態を取得してくる
git fetch origin

新しいリリース版が出ているにもかかわらず上記コマンドでも当該バージョンのタグが取得されない( * [new tag] が表示されない)場合は下記のコマンドで取得してみる
git fetch –tags origin

または、既に取得済みである可能性もあるので、その場合は
git tag -l

で現在取得済みのタグ一覧を表示し、当該バージョンのリリースタグがあるか確認する

取得したら目的のタグに切り換える。ここでは v1.4.1 にアップデートする。
git checkout v1.4.1

bundler を使用して gem やらの更新
bundle install

フロントエンド関連のライブラリも yarn で更新
yarn install

DBの構成変更がある場合は db:migrate を実行する(何も無い場合も実行しても何も起こらない)
RAILS_ENV=production bundle exec rake db:migrate

フロントエンドのCSSやJSの更新とパッケージング(これがチョット長い)
RAILS_ENV=production bundle exec rake assets:precompile

※ここで「Using /mastodon/config/webpacker.yml file for setting up webpack paths Compiling… Compilation failed:」となったらほぼメモリ不足らしいので、スケールアップするなどする

最後にエラーのような文言が出るが、500.htmlに関するレンダリングエラーじゃなくって、500のエラーを吐き出すページ?をレンダリングしましたよ、ってことなので無問題

アプデできたらmastodon起動
sudo systemctl start mastodon*

もしくはsudo systemctl start mastodon-{web,sidekiq,streaming}

うまくいかない場合は個別に立ち上げる
sudo systemctl start mastodon-web
以下同

参考、アプデ手順
https://gist.github.com/anon5r/bd96ee4127d6b66ad4150287f5a4ed99

参考、その他保守
https://qiita.com/kumasun/items/bf4997f181f893130041

日々

Webデザイン 2019年2月7日 木曜日 5:57:24

なにがしかの勉強をしている。
先日まではmastodonのインスタンス立ち上げ、今はようやくsassの勉強。
インスタンス(今はサーバって呼ぶことになったのね)はさくらのスタートアップスクリプトを使ったからrubyだのなんだのはさっぱり理解していないけれど。
sassは自分のMacにインストールする時にまたあの黒い画面で格闘しなきゃいけなくて、だんだん慣れてきた。
だけど全部コピペ。
sassは今のところネスト、変数、演算、mixinによるメディアクエリくらいしか試せてない。if文とかも使えたりするみたいでcssもプログラミングぽくなってきたなぁ。
こりゃ勉強しないとまずい、と思って日々なにがしかを勉強している。
ここの見た目はそんなに変えないとは思うけど、sassを使って組み直すのがひとまずの目標。

mastodon

Webデザイン 2018年12月29日 土曜日 8:25:21

前からやろうやろうと思っていたmastodonサーバーの立ち上げをしてみた。
vpsやsshというものは全くわからないのでサーバにOSをインストールする時に走らせるmastodonスタートアップスクリプトがうまく導入できない、鍵がうまく作れない、ターミナルでsshなのかローカルなのかぐちゃぐちゃになってしまって何日もかかってしまった。
なんとかmastodonを動かせるようにして、最低限のセキュリティ対策はしたのだけれど、もっとセキュリティは強化しないといけない…のかもわからない…できるとしたら何をすべきかわからない。監視の仕方もわからない。
mastodonを立ち上げて管理するということはとても大変だと身をもって感じた。
こりゃ公開は難しいな…

mastodon

Webデザイン 2018年12月27日 木曜日 7:33:58

先日ふいに思い立ってmastodonのサーバを立ててみた。
サーバを立ち上げるということが初めてで今までCUIなんてほぼ触ったことがないので何日もかかってしまった。
おまけにコマンドはほぼコピペ。
一応サーバはたててmastodonもインストールした(さくらのスタートアップスクリプト)のだけど、最低限のセキュリティ設定しかしておらず、またサーバやmastodonのアップデート、データベースがどこにどういう風に格納されているのか、わからなくて公開できずにいる。
やはり自分は様々な言語を学ばないといけないと感じた。
だがやらなければいけないことが多すぎてあっちを少し触りこっちを調べ、とちゃんと一つをモノにできていない。
どれかに絞らなければ…

position:sticky

Webデザイン 2018年12月18日 火曜日 17:53:54

このサイトのProfileとPortfolioはjqueryでスライドトグルさせているのだが、そのトグルするdivの中のh3にstickyをtopからマージンを取った位置に指定すると、トグルさせる時にペコペコ動いてしまう。
jqueryではどうしようも無さそうでひとまずfadeToggleでごまかしている。
他にもjqueryに依存しないものが必要になってるような気がしている。

toTop