カテゴリー: front-end

Reactを使うときのリンク

Reactで開発するときにいつも使っているリンク

node-js

Node.js® は、Chrome の V8 JavaScript エンジンで動作する JavaScript 環境です。

React

ユーザインターフェース構築のための JavaScript ライブラリ

w3schools.com

HTML CSSでなにか調べたいとき

react-icons

reactで使用できるアイコン集

Google Fonts

googleのwebフォント

npm

Node package manager

2021年10月10日
WEB制作でよく使うサイト
いつも使うサイトのまとめ。

css全般
- MDN (https://developer.mozilla.org/ja/docs/Web)
mozilla作成のドキュメント、html、css、javascript、わからないことがあればまずはこちらから
- coliss (https://coliss.com/)
css等いろんなチップス満載の老舗

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]
価格：2486円（税込、送料無料) (2021/9/26時点)

フォント(Font)
- Google Fonts (https://fonts.google.com/)
Webフォント
- Font Awesome (https://fontawesome.com/)
アイコン

https://amzn.to/3i7ayfN
2021年9月26日
Qiitaのような目次をwordpressに導入する| plugin Table of Contents Plus

参考サイト

Table of Contents Plus(wordpress本家プラグイン紹介)
Table of Contents Plusで目次を設置する方法( サイト：OPENCAGE様)

2021年4月10日
なぜ勉強会にいくのか

こちらは、 “ゆる Web 勉強会@札幌 Advent Calendar 2020” の 18 日目の記事です。

この記事の目的

今年はこういうご時世でみなさん集まることができなくなっていますが現在OnLine参加しているが、今後も実際の勉強会に足を運ぶのは考えていない方々の参考になればいいなと思い書いてみました。

書いてる人

ma2ken

派遣工員、57 歳
html, css, ubuntu, js, python などなど、、

Twitter: @ma2ken_zawa
サイト: https://codingfan.info

今はもう IT 業界で働くような年齢ではありませんが、個人的には開発などというおおげさなものではないですけどちょっとしたサイトやプログラムなど作っています。

勉強会に参加するようになった動機

10 数年前 Web サイト制作を請け負っていた時(個人的に)　 IE が 5.0 か？5.5？にバージョンが上がると float で左右どちらかに寄せているボックスに、margin の値を指定すると指定値の 2 倍程度の margin が設定される。
[参考サイト: CSS HappyLife]
というバグでレイアウトが壊れてしまい、今なら検索すればすむことが当時はどうすればいいかと途方にくれている時に CSS の勉強会をみつけて参加するようになったのがきっかけです。

上記疑問は参加して周りの業務をされてた方に質問したところバグであると教えてもらいすぐ解決できました。また普段自分で検索したら出てこないけど WEB 業界では有名な方のサイトその他業務で調べるのに有用なサイトなども聞くことができて非常に勉強になりました。

参加することのメリット

自分が個人的感じたメリットは

– 自分一人で集めることができる情報は限りがあるということに気づくことができる
– 開発で使うツールと操作方法を見ることができる
– ネットで出回ってる情報より現場は結構泥臭いことが理解できる
– その道の強い人の話が直接聞ける
– その業界で就職したいと思ってるのならチャンスが転がっている

参加することのデメリット

特にないので参加し続けてるのですが、あるとしたら
– 聞いただけでわかったつもりになってしまう。

勉強会が怖くて参加できない方々に

ほかの方がブログでも書いていましたがいきなり少人数の勉強会に参加せずその言語のカンファレンス、できれば参加人数 100 人以上(自分の場合初めて行ったのが java のカンファレンス)
今だと全国でオープンソースの今を伝えるイベント　オープンソースカンファレンス(オープンソース関連のコミュニティや協賛企業・後援団体による、セミナーやプロダクトの展示などを入場・参加料が無料でご覧いただけるイベントです。)が開催されてますのでそこでコミュニティの雰囲気感じていただいてから勉強会に参加されるのが良いかと思います。

わたしも最初参加した時は周りは強そうな人ばかりで自分みたいな素人に毛が生えたような人はいないだろうなあと思ってましたが、意外と初めてで緊張してる方が結構いることに気づきそれから楽になりました。

最初は人と話すのも怖いと思いますがそんな時はしばらく聞くだけで何回か同じ会に通っていると

そのうちに雰囲気がわかって来ると思います。

ゆる Web 勉強会@札幌について

WebSite : ゆるWeb勉強会@札幌

結び

ネットで勉強するのも良いですが実際に業務されてる方の話はすごくためになります。

また実際参加するようになるとつながりもできて色々なところに参加しやすくなります。

勉強会楽しいですよ。

2020年12月15日
wordpressのパーミッション設定
個人的備忘録です。パーミッション設定間違えるとwordpress起動しなくなるおそれがあります。実行される場合は自己責任で。

久しぶりにサーバーにwordpress設置したので　パーミッション設定の備忘録。

参考url:
WordPressの理想的なパーミッション設定は？権限を見直してセキュリティ強化しよう

上記サイト参考にしてまず　wpconfig.php　は 600
.htaccess はパーマリンクが設定できるように　606
ディレクトリは 70
他　ファイルは604

しばらくこの設定で様子見していこうと思います。

グループが全部 0 なのは、共有サーバーで複数ユーザーが同じグループ名になってる可能性があるため
です。

2021年5月01日変更

wp-config.php -> 400 (ディレクトリのひとつ上に上げる)

.htaccess -> 604

ディレクトリ -> 705(wp-content/themes , wp-content/upload のみ707 )

ファイル -> 604

ディレクトリ内パーミッションをディレクトリとファイル別々に設定する方法

参考リンク

ファイルやディレクトリのパーミッションを一括で置換したい : Qiita @takeshi81

findを使って変更
```
// ディレクトリ
find /path/to/dir -type d -exec chmod 755 {} +
// ファイル
find /path/to/dir -type f -exec chmod 644 {} +
```
chmodを使って変更
```
chmod -R a=rX,u+w path/to/dir
```
上のQiitaのコメント欄ほとんど転載ですが。

-R(ディレクトリ配下全部の) a (全員のパーミッションを) = (ゼロにクリアして) [000] r (読み込み権限と[+4]) [444] X (ディレクトリのみ実行権限[+1]) ディレクトリ: [555] ファイル : [444]

u(所有者のパーミッションを) + (次のように上書きする) w(書き込み[+2]) ディレクトリ: [755] ファイル : [644]
2020年8月2日
Visual Studio Code(windows10)をアップデートしたら Emmetが使えなくなった。
windows10 が調子悪くなったのでクリーンインストールしてからVScode再インストール、最初Emmetは普通に使えていたが急にうごかなくなったのでその対処。

参考url:
Visual Studio Code official | Emmet in Visual Studio Code
vscodeでEmmetがTab(ショートカットキー)で動かない人へ | Qiita 　@bushi 様

Emmetが使えるように再設定

VScode 公式サイトでは、Emmet2.0 からは初期段階でEmmetは動かない設定になっているようなので設定で変更していきます。
1. 画面左下の「歯車アイコン」から「設定」か、ショートカット Ctrl+, でコマンドパレットを開く
2. 上部設定の検索窓で Trigger Expansion On Tab を入力
3. Emmet: Trigger Expansion On Tab メニューの下　「有効にすると、TABを押したときにEmmet省略記法が展開されます」にチェックを入れる。
以上でVScode Emmetは動くようになりました。これで動かない場合 TABショートカットキーが他コマンドとかぶって可能性もあるようですが自分は試していないのでそれで解決できるかどうかはわかりません。
2020年7月26日
windows10pro、WSL2 Ubuntu20.04　ビープ音（警告音）を消す。
wsl2のubuntuでキー操作していると頻繁に警告音がなってうるさいので消す方法を調べました。

参考 url:
【Ubuntu】ターミナルのビープ音を消す | IT土方の奮闘記様

ビープ音には　ターミナルとvimがあるようなのでそれぞれ設定していきます。

ターミナルの設定

ファイルの場所　/etc//inputrc
下記行をコメントアウト(行頭 # を外す)
```
$ sudo vim /etc/inputrc    // エディタはそれぞれ

# set bell-style none
　　　　　||
set bell-style none
```
vimの設定

ファイルの場所　/etc/vim/vimrc
「 set visualbell t_vb= 」　をファイル最下部に書き込む。
```
$ sudo vim /etc/vim/vimrc

set visualbell t_vb=
```
両方書き込んで保存したら再起動。これで自分の環境ではビープ音が止まりました。

以前書き込んだ下記の通りだと自分の環境で再起動かかると止まりませんでした。

参考 url
https://www.yokoweb.net/2020/06/13/windows10-wsl2-bell-off/ | The modern stone age.様

The modern stone age. | LFI 様

ホームディレクトリの　~/.inputrc に set bell-style none を追加します。
```
$ echo "set bell-style none" >> ~/.inputrc
```
2020年7月25日
【React入門#1あべちゃんのフロントエンド塾React入門 |

youtube

React 少し触ってみたいと思ったときjavascript Nodeを少しかじったかたならこの動画１つ１つが短いのでとっつきやすいと思います。

２日くらいで#8まで行けそうな感じです。

自分は休みの日２日くらいで#8 までいけました。

参考サイト

[あべちゃんのフロントエンド塾React入門(YouTube)
React(本家)
semantic UI(講座で使っているUI フレームワーク)
jsonplaceholder(ダミーapi)

2020年7月20日
コード表示のため　plugin Highlighting Code Block導入
参照サイト　チラ裏の束　様

試しにコード書いてみよう
```
<html>
  <body>
    <h1>Hello World!!</h1>
  </body>
</html>
```
```
def helloworld():
    name = input('input your name: ')
    message = 'Hello ' + name + ' !'
    print(message)
helloworld()
```
ブロックエディタで書くときはこんな感じ

フォーマットから選択
2020年7月19日

カテゴリー: front-end

css全般

フォント(Font)

参考サイト

この記事の目的

書いてる人

勉強会に参加するようになった動機

参加することのメリット

参加することのデメリット

勉強会が怖くて参加できない方々に

ゆる Web 勉強会@札幌 について

結び

2021年5月01日変更

ディレクトリ内パーミッションをディレクトリとファイル別々に設定する方法

参考リンク

findを使って変更

chmodを使って変更

Emmetが使えるように再設定

ターミナルの設定

vimの設定

youtube

参考サイト

ゆる Web 勉強会@札幌について