動画をフルウィンドウにすればコントローラは動画域から外れるので見えるようになりますが、アプリにメモを取るなどが面倒だなと思い、Chrome の拡張機能を作ってみました。
ZOOM hidden vjs-control-bar: Chrome ウェブストア
ソースコードは GitHub にあげています
まずは実装できるかの検証を行いました
Chrome 検証ツールのインスペクタを使って確認すれば良いのでこれは簡単にできます
ここではいきなりエディタを使うのではなく、Chrome 検証ツールの Console にコードを書いて実行してみます。
JavaScript のコードは Console に記述して実行できるので便利ですね。
あとは実際にエディタを使って開発していきます。必要なものは下記
今回の開発ではデータを取得・保存・メッセージの受け取りなど不要なのでシンプルな構造で作れました。ファイルについて解説していきますね。
このプロジェクトに関する設定を json ファイルとして記述します
{
"manifest_version": 3,
"name": "ZOOM hidden vjs-control-bar",
"version": "1.1.1",
"description": "Button of hidden for vjs-control-bar on ZOOM",
"icons": {
"16": "images/icon16.jpg",
"32": "images/icon32.jpg",
"48": "images/icon48.jpg",
"128": "images/icon128.jpg"
},
"host_permissions": [ "https://*.zoom.us/rec/play/*" ],
"author": "yat@yat-net.com",
"content_scripts": [
{
"matches": [ "https://*.zoom.us/rec/play/*" ],
"js": [ "content_script.js" ],
"css": [ "style.css" ],
"run_at": "document_end",
"all_frames": true
}
],
"action": {}
}
現在 manifest_version は3で開発となっているので、合わせてあります。
今回利用していない仕組みもあるので、開発してみたい!という方は下記サイトが参考になるかと。
自分で実際に使ってみてテストし、周りの人にも実際使ってもらってフィードバックをもらって自分で気づけ無い挙動の対応。そしていよいよ公開手続きです
こちらはこの記事がわかりやすかったのでオススメです
Chrome拡張機能の概要から公開まで(ManifestV3対応) ~公開編~
上記ページに記載ないもので対応したことをちょっと書いておきます
何度アップロードしてもエラーがでたので、zip 圧縮時に問題があると思い、ターミナルのコマンドで圧縮しました
zip -r ファイル名.zip 圧縮するフォルダ
-r はフォルダを圧縮するオプションです
審査が通ると下記のようにアイテムに並びます。並んだものを上書きするのかと思ったのですがどうも違うようで、単純に manifest.json ファイルのバージョンを上げて圧縮後改めてページある「新しいアイテム」としてアップロードするようです。当然審査が入ります。
]]>記事のテーマを考える中で、「色々な制限・制約の中で、プロのデザイナーは一体どれだけのものが作れるのか?」
という話になり、ちょっと面白そうだったのと、自分でも試してみたくなったので、今回のテーマで書いてみることにしました。
実際、デザインの仕事は色々な制限・制約の上でものづくりが求められるので、僕自身難しいなと感じることが多いです。
例えばプロダクトを扱う企業やマーケティング会社のインハウスデザイナーは、限られた時間の中で広告用のバナー・アイキャッチを用途・サイズ別に大量に作らないといけません。そのため、繁忙期になると特にクオリティと時間に追われるという側面があります。
実際、僕自身も独立する前までは、インハウスで Web サイトのデザインやマーケティングに必要なデザインをしていました。
普段の仕事は納期仕事ではないので、余裕をもったスケジュールでしたが、突然参加が決まったセール用のバナー作成指示などは、「1時間後には出稿したい」という切羽詰まった要望が割りと普通にありました。
1時間ならまだいい方で、「やっぱりセールに参加することにしたから、15分ぐらいでぱぱっと作ってもらえる?」みたいな会話って社内だと発生しやすいんです。
当時は無茶言うなあと思いながらも、「まあ普段から触っているサイトだし素材もあるからなんとかなるか」と思い直してすぐに作って提出していました。
ただこの場合、条件が揃っているから叶っていただけで、たとえば「コーヒーショップの呼び込みバナーを作ってもらえません?3分で!」と言われたら流石に無理があります。
だって素材を切り抜かないといけないし、そもそも素材を探さないといけない。それだけでも3分なんてあっという間に超えてしまう…
でももし切り抜きにも素材探しにも時間がかからなかったらどうでしょうね?
今回は、そんな無茶を叶えてくれるツールのお話です。
豊富なテンプレートや生成 AI を使ってクリエイティブを作成できるのが Adobe Express の良いところ。
ワンクリックで画像の背景を切り抜いたり、テンプレートのテキストを編集できたりとデザインワークがかなり簡単にできるため、ノンデザイナーの方にもおすすめのツールになります。
では本当に、Adobe Expressを使えば、3分でバナーが作れるのか? 早速、「コーヒーショップの呼び込みバナー」を例に、実際の画面で使い方を見ていきましょう。
Adobe Express は基本的に無料で使えますが、一部の機能やテンプレート・素材はプレミアムプラン(有償)となります。
Creative Cloudのコンプリートプランを契約している方なら、プレミアムプランも使い放題。僕もコンプリートプランなので、今回はプレミアムプランで試していきます。もちろん無料版も機能が充実していて使い勝手がよいですよ!
まずは自分が作りたいクリエイティブを上部のメニューから選択します。該当する様々な候補がサブメニューとして出現するので、作りたいタイプを選択。
テンプレート選択画面に変わるので、理想に近いものを選択すればあとはテンプレートを編集して必要な情報に書き換えましょう
文字周りの装飾も短時間でこんな事ができます
ということで、テンプレートから選んで編集すれば3分で作れました。
ですが、細かい部分を考えるとまだまだ手を加える必要はあります。
たとえば
文字の調整などは設定を変えれば変更できます。ですが写真の色を変えたい場合はこのサンプルだとコップと背景が一枚の写真になっているため変更ができず、写真そのものを変えないといけません。
そうなると、そもそもレイアウトなんかは考え直さないといけないので作り直しになります。
せっかくなのでもう少し機能を使って、実際に3分でどこまでできるのかやってみました。
テンプレートの検索を使って「コーヒー」で出てきた中から一つを選択。
すでにいい感じですが下記が気になります。
早速吹き出しを素材から探してみました
あとは吹き出しの内容や名前の変更と、文字の調整をして完成したのがこちらです
ここにテイクアウトのテキストと、素材を同じように検索して追加・編集して仕上げ
今のところ Adobe Express 上では字詰めができないので、気になる点はあるものの、一応3分程で目標の条件で作る事ができました。
デザイン素材で検索すると切り抜き済みの素材がたくさん出てきたので「これは便利だ!」と思いました。仮に背景付きの素材でも、「背景を削除」を使うことで、複雑な背景でなければ簡単に切り抜けます。
テンプレートを使うメリットは、とにかく簡単にデザインができること。レイアウトがすでに出来上がっているので、そこに必要な情報を入れてしまえば完成です。ただし、それだけだとディティールが甘いままになるので、気をつける点がいくつかあります。
一つは文字のバランス。
金額表記で大事なのは数字の部分なので、単位はそこまで目立たなくても伝わります。単位を小さくすることで、より数字を目立たせられます。
また、今回テイクアウトも OK とコーヒー1杯「150円」の3行を一つの塊として作ったので、それぞれの文字の開始位置・終了位置を整えました。
テイクアウトの文言は他の2行ほど目立たなくても良いので小さめにし、左側はコーヒーカップのカーブに沿うように余白を少し開け、右端はツラが合うよう揃えています。
カーブに揃えることと、キャンバスの四角に揃えることを意識するだけでもきれいに整えて見せられます。
ちなみに「テイクアウトもOK」は他の2行を目立たせるために小さくしています。そのまま右に揃えると左側が空きすぎるため、テイクアウト用のコーヒーカップを配置しました。これで1行目のバランスが整ううえ、イメージでも伝えられるので非常にいいバランスになりました。
また、四隅の上下左右の感覚が均一になるよう位置を調整しています。揃えるべきところはしっかり揃えないと違和感が発生するので気をつけましょう。
デザインするにはセンスがなくて…という意見をよく聞くのですが、こういったセオリーを知ることがセンスに繋がっていきます。まずはどういうところに目を向けるべきかを考えていくと、デザインはそこまで難しいものではないと理解してもらえると思います。
Adobe Express は、他のグラフィックツールと比べてできることに制限があるものの、ここまでのものを3分という短時間で作ることができます。例えば自分のブログや YouTube のサムネイルが必要だけどデザインに自信が無いという方には、是非使ってほしいと思うツールです。
デザイナーにとっても嬉しい機能として下記があります
フォントや素材は豊富に揃っていると便利ですが、ノンデザイナーさんからすると多すぎて逆に迷ってしまい、どれを使えばいいのかわからないってなりますよね。
そこでフォントと素材の選び方を少しお話しておきます。
フォントが沢山あってもタイプに分けるとそこまで多くないので、まずは下記を覚えましょう
まずフォントには英語用のフォントと日本語用のフォントがあります。どちらも兼ねているフォントもありますが、海外で作られたフォントは英数字のみで日本語に対応しているものが少ないため、こういったものは英語用のフォントになります。
一方、日本の文字は英数字以外にひらがな・カタカナ・漢字など文字の種類が多いため、フォントによってひらがなのみ・カタカナのみというものや、全てを揃えたものなど、文字タイプが違います。
ですので、デザインでフォントを選ぶ時はまず英数字のみなのか、日本語まで網羅するのか考えましょう。
そして日本語と英語のフォントはそれぞれ大きく分けて2つのタイプがあることを覚えておいてください。
日本語のフォントと英文フォントをデザインのなかで混在させる場合、統一感を出すならゴシック体とサンセリフもしくは明朝体とセリフというようにタイプをあわせます。
ただこれは基本的な話で、より表現を上げるためにフォントには様々なタイプが存在します
見出しや吹き出し・装飾文字など、部分的にあえて書体を変えることで効果的に見せることができます。今回作ったデザインは、全体としてはサンセリフとゴシック体を利用し、吹き出し部分は丸ゴシックを利用しています。そうすることで、吹き出し自体を目立たせることと、やさしさを強調して表現しています。
次に文字には太さがあります。細いものしかないものもあれば、細い・太いの2タイプ揃えているものもありますし、太さを7段階調整できるものもあります。
デザイン上、小さい文字はより細く見えますし、大きい文字はより太く見えます。サイズの違う文字をデザイン上に配置する場合、この特性を考慮して文字の大きさによって太さを変えることが大切です。
全体の太さが同じぐらいに見えるよう調整すると、全体が整って見えます。そう考えると、文字の太さにバリエーションがあるフォントの方が使いやすいとも言えそうですね。
気をつけてほしいのは、一つのデザイン上であまり多くのフォントを使わないことです。フォントの種類があまり増えすぎると統一感を出すのが難しくなるので、最初はなるべく少ないフォントの種類で作るのがオススメ。
最初は3種類ぐらいまでにとどめておいて、デザインに慣れてきたら増やしていきましょう。あえて沢山のフォントを使ったデザインも面白いものが作れるので、今後の目標にしても楽しいですよ。
こちらはテンプレートで出てきたデザインそのままですが、バランスがとても良いので是非参考にしましょう。
デザインのテイストを決定する素材は、選定する際に悩んだり、挿入する数によってバランスを取るのが難しくなったりと、考える事が多いです。
迷子にならないようまずはポイントを押さえておきましょう
「主題となるもの」とは、今回のバナーでは中央のコーヒーカップです。パッと見てコーヒーに関するバナーであることが伝わりますよね。これこそが、このバナーの主題です。
次に背景ですが、今回のバナーでは素材自体に背景がすでに配置されています。左のイエローと右のグレーを中央で分けたもので、仕事と休憩という2つの時間をこの背景で表現しています。
文字を目立たせる装飾は左上の吹き出しです。開始時間を単なるテキストで伝えることもできますが、他にも伝える情報があるのでそのままではちょっと伝わりにくいです。
あえて吹き出しを使うことで他の情報より目立たせられることと、差が生まれることで他の部分も目立って効果的ですよね。
最後は余白を埋める「あしらい」についてです。右側の3本の線とテイクアウトOKの横に置いたコーヒーの素材がこの役割を持っていますが、無いとこんな感じになります。
左側は上部に吹き出しと下側にコーヒーショップ名があるので、比較すると右上の余白がどうしても気になります。中央に大きなコーヒーカップがあるので視線を集められそうですが、実は左上・左下・右下に要素があるので右上の何もない空間のほうがより目立ってしまい目線が余白に向いてしまいます。
しかし、情報をここに入れると全体的に仰々しくなってしまうので、今回のような「線の素材」などが活躍してくれます。
余白は、配置しているもの同士がそれぞれ別のグループであることを明確にしてくれるので、吹き出しとコーヒーショップの間には装飾を配置していません。余白を埋める時は埋めるべきか空けておくべきかをよく考えましょう。
また、テイクアウトOKの左も少し開いていますが、これは上記で述べたようにコーヒーカップに沿わせて配置するために装飾は右側に配置しました。
今回のバナーは、テンプレートを選択した時点で良いものがすぐ見つかったのでサクッと作ることができました。ですが、当然見つからない場合もあります。
特にテンプレートを探していると、テイストはイメージに近いけど内容がぜんぜん関係ないものがよく見つかります。こういう場合は内容をカスタマイズすれば完成するので素材を生成 AI で作ってみます。
果たして3分でどこまで出来るのか・・・?
テキストは全て編集できるので、中央のイラストをコーヒーに変えてみます。
テキストは全て編集できるので、中央のイラストをコーヒーに変えてみます。
ツール左側の「メディア」というメニューに「テキストから画像生成」があるのでこちらを選択してサイズを決定。
生成したい内容を書き込み、コンテンツタイプを選んで決定すると生成してくれます。
しかし説明文が短いと、「プロンプトが短すぎます」と言われるので、ここはよく文章を考えて入力しなければなりません。
「切り抜きやすいコーヒーラテのイラスト」と指定してみます。
コンテンツタイプも指定なしで作り直してみましょう。
生成されました!これを使いたいので切り抜きます。
生成されたイラストを選択し直すと、画像編集メニューがでてくるので、「背景を削除」を選択します。
実行するとキレイに背景が削除されました
あとはテキストをコーヒーショップ向けに変更して完成です
生成の調整などが必要なので3分ではできませんでしたが15分ぐらいで完成しました。
いかがでしたか?
テンプレートをうまく活用すればかなり時短で作れることと、デザインに詳しくなくても一定のルールに従って編集することで、ノンデザイナーの方でもしっかりしたものが作れることが伝われば嬉しいです。
また、デザイン以外の生成も可能で、例えば QR コードも作れます。
ホーム画面の右側メニューにあるプラスマークをクリックすると、他にも色々作れるものが並んでいるので、そちらも是非チェックしてみてくださいね。
最後に、実はこの記事のアイキャッチ画像も Adobe Express で作ってみました。
僕なりにアドビさんのイメージを具現化してみたつもりなんですが、どうでしょうか?
作りたいイメージに合う素材を探して配置を繰り返し、テキストを入れて完成までで、大体10分ぐらいで完成しました。
自分で表現できるというのがデザインの面白さ・楽しさだと思っています。
そういう意味では、Adobe Expressはデザインすることの喜びを、誰でも手軽に体験できるツールだとも思います。
ぜひ、Adobe Expressを通じて色んな人にデザインすることの喜びを知ってもらえたら嬉しいです。
]]>ここ数年 Web サイト制作の学習を始めた方が一気に増えた感じがありますね。HTML や CSS などエディタに簡単なコードを書くだけでブラウザに文字や画像が表示された感動は今でも忘れられません。
そこから気づけば20年ぐらい Web 制作の業界で仕事をしているのですが、僕もひとに教えることが増え多くの人が JavaScript が難しいという意見をよく聞くようになりました。
実際 HTML や CSS とは違い、プログラミング特有の言葉が一気に押し寄せるものは途端にやる気を阻害し、自分には向いていないと感じるひとも多いと思います。
僕自身は専門学校でプログラミングの学習をしてから HTML や CSS の学習を始めたので、変数や関数などはすでに知っていたこともあり、言葉が分からないとはならなかったんですが、それでも特有のカタカナ言葉に翻弄されていました。
おそらく多くの人がこのカタカナ言葉の意味が分からなかったり、ニュアンスがつかめないというトラップに引っかかって蟻地獄から抜け出せないような何とも言えない状況に陥ったことがあると思います。
基礎を学ぶなら書籍でしっかり学習しよう!
そう意気込んで挑んだものの、最初からとにかくこのカタカナ言葉の応酬から始まると中々前に進めずストレスを感じだし、中には知らない言葉が多すぎて眠くなってしまうってひとも多いと思います。
「みんなはこれで理解して言っているんだから自分はきっと向いていなんだ…」って思い込んでしまうのも割りとここに多いと思うんですよね。
果たしてそうなんでしょうか?
本当はそんなこと無いんですが、ニュアンスを掴む術がわからないとどう進めればいいか分からなくなりますし、独学だと簡単に辞めてしまいます。
さて、これほんとにどうやって理解すればいいんでしょうね?
それを今回お話ししたいと思います
全くきたことがない言葉を文章で説明されてもイマイチどういうことが分からなかったり、こうかな?と思ってもそれであっているのか自身が持てなかったりしませんか?
これは当たり前のことで、わからないってことは自分の中に答えがない。
答えがないから正解か判断ができない。
こんな状況なんです。
例えば JavaScript でよく出てくるイベントという言葉。
これを聞いても「イベントという言葉は知っているが、プログラミングのイベントというのは別のことだろう」と考えてしまいがちです。
でもそんなことはなく、平たく言えば「何かが起こったこと」で、冒頭で僕が述べた「ハロウィンというイベント」というのとニュアンスは同じです。
すべて「何かが起こった」わけなんですよね
JavaScript だとよく出てくるのは上記が主で、プログラムで書くと
addEventListener()
ってのがよく出ます。
MDN Web documents の解説を見てみると
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
addEventListener()
はEventTarget
インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
と書いてありますが、カタカナ言葉がこの文章だけでも4つも出てきて苦手意識がある人はこの時点で「分からないから他のサイトを見よう」となりますね。
でも本当はこの一文に重要なことが書いてあるので、ここが読めれば検索しすぎて疲弊することが減りますし、何より学習事態がやりやすくなります。
なので、この一文の読み方のコツをちょっと解説していきます
addEventListener()
は EventTarget
インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
まずは冒頭にある addEventListener
にしっかり目を向けましょう。
「う、長いからしんどそう…」
大丈夫です、これも読み方にコツがあります。
最初の一文字は小文字で下記始まっていますが、Event と Listener は大文字になっていますよね?
この書き方はキャメルケースという言い方をする書き方で、ラクダのコブのように大きくなっているところ小さくなっているところが続いていることからこの名前がついています。
由来を知っていたほうが覚えやすいのでこれはメモしておきましょう。
さて、この大文字になっているところはそれぞれ独立した英単語であることがわかります。分解してみると
この3つです。意味はそれぞれ下記の通りです
加えるはつまり足すとか追加するって事ですね。イベントはさっき説明した「何かが起こったこと」という意味。ではリスナーはなんでしょう?
これは英単語なのでそのまま英語翻訳を使います
「listener」は英語の単語で、日本語に訳すと「聞き手」または「聴衆」を意味する。音楽、ラジオ、講演など、何かを聞く人全般を指す言葉である。また、対話や会話において、話す側ではなく聞く側の人を指すこともある。
https://www.weblio.jp/content/%E3%83%AA%E3%82%B9%E3%83%8A%E3%83%BC
なんとなくニュアンスは伝わりますか?大事なのは聞き手とか聞く人っていうことです。
じゃあこの英文3つを翻訳してみましょう。Deepl で翻訳を書けると下記のように出てきます
add event listener
https://www.deepl.com/translator#en/ja/add%20event%20listener
イベントリストの追加
イベントリストに追加
イベントリストだから、ハロウィンみたいに年間通して色々なイベントが並んでいるかのごとく、ブラウザ上で「クリックした」とか「ブラウザが広がった」とかのイベントをリストに追加したってことです。
プログラム上のイベントがリストに追加されてどうなるんだ?と思うかもしれませんが、まだ文章の初めを読んでいるだけなので、addEventListener() については
イベントをリストに追加するもの
と捉えて置きましょう。
で、次に進むと文章は
addEventListener()
は EventTarget
インターフェイスのメソッド
となっていますね。
EventTarget も2つの単語がくっついていることがわかると思うので、これもさっきと同じようにバラバラにして翻訳します
意味を合わせると、「イベントの目的」と翻訳できます。しかしこのキーワードにはインターフェースというのがついているので、これも翻訳しましょう
インターフェース(英:interface)とは、もともと「接点」や「境界面」を意味する語であり、特にコンピュータシステムにおいて異なる機器やシステムを接続する部分を指す用語として用いられる表現。人間と機械の接点となる入出力システムを指す場合もある(ユーザーインターフェースおよびマンマシンインタフェース)。
https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9
ニュアンスとしては接点や境界面を意味していて、異なるものを接続する部分というのが意味としては近いものになりますね。
異なるものを接続する部分
そしてこの言葉ですね。これもプログラミングをやっているとよく出てくる言葉です。これも同じく翻訳しましょう
https://www.weblio.jp/content/%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89
とてもシンプルですね。
ここでさっきの文章を調べた言葉で補足してみます
addEventListener()
は EventTarget
インターフェイスのメソッド
を掴んだニュアンスを使って文章を補足すると
イベントをリストに追加する addEventListener() というのは、イベントの対象と接続する手段
となります。
ハロウィンというイベントをリストに追加したら、参加したい対象者と繋ぐ。こんな感じですね。
JavaScript の話なので、プログラミング的なことでいえばクリックというイベントをリストに追加して、その時に何かさせたい処理と接続するための手段ってことです。
ということは、この addEventListener を使って「画面上の画像を削除する処理」と接続すればクリックした時に画面上の画像を削除できるってことになってきます。
また、この文章の後ろに続いている
ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
もカタカナ言葉を翻訳して読み解くとこうなります
目的に特定のイベント(例えばクリック)が配信されるたびに呼び出される関数を設定します
カタカナ言葉ではないですが聞き慣れない言葉が出てきましたね。
翻訳がかけられない言葉や、翻訳してもイマイチ分からない言葉が出てきたらこのサイトで調べてみましょう
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
ニュアンスを掴むための解説が沢山掲載されています。学習し始めの段階で読むにはとても参考になるので是非色々見てほしいのですが、今回は関数に焦点を当てると
処理をまとめたものだよ
何かを入れると何かをやって何かを返してくれるよ
何かを入れると何かをして何かを返してくれる、処理のまとまり
https://wa3.i-3-i.info/word1905.html
と出てきます。一言で説明は難しいですがなんとなく言ってることはわかりますかね。これはそのまま補足として入れてしまいましょう。ついでに冒頭の文章も入れてしまいます。
イベント(クリックとか)をリストに追加する addEventListener() というのは、イベントの対象と接続する手段です。
ターゲット(対象:例えばボタン)に特定のイベントが配信されるたびに呼び出される関数(何かを入れると何かをして何かを返してくれる処理のまとまり)を設定します。
ということになります。
どうでしょう、元の文章より長くなりましたが初見よりニュアンスは掴みやすいのではないでしょうか。
元の文章はこちらです
addEventListener()
は EventTarget
インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
後はこれを理解する日本語力と想像力が必要なので、文章を読むだけでまだ分かりづらいという方は、絵にしながらまとめていくとニュアンスは更につかみやすくなります。
意味を調べたときに大事なのは、このニュアンスを掴む事です。ニュアンスが掴めれば完全な意味を理解できなかったとしても、「なんとなくこういう事を言っている?」ところまでたどり着けるようになります。
何もわからない状態とは雲泥の差なので、このニュアンスを掴むことを繰り返して慣れていきましょう。
そして学習で大事なのはノートに自分なりにまとめることです。
アナログのノートでもデジタルのツールでも何でも構いません。自分なりにこういうことを言っている?と頭の中を整理しながら書き留めていくことで、情報を整理したインプットが行なえます。
単に見たままを写すのではないので気をつけてくださいね。
jQuery で学習している人は addEventListener() ではなく on() が出てきますね。
「クリックした時に何かしたい」で検索している人は click() にたどり着くと思いますが、click() はクリックにしか使えませんが on() は様々なイベントに対応できて便利です。
なので、上記 addEventListener() の jQuery 版に近いものがあります(ただし完全互換ではないのでご注意)
ところで on って英語でなんて習いましたか?
「なにかの上にある = on」こんな感じですかね?
on の意味をこれで覚えていると間違ってはないですがちょっと語弊が出てきます。
ちょっとここで on の単語を Google で画像検索してみましょう
on 単体で検索すると靴のブランドがたくさん出てきたので、「on の意味」で検索しました。
するとどうでしょう、机の上を意味する画像が少ないことがわかります。そして、「くっつく」という意味を伝えるようなものがたくさん出てきますね。
実際の on の意味は上以外に「くっついている」という意味があります。(更にもっとたくさんの意味があります)
「机の上に」を表す画像が少ないことがわかりますね。
壁に写真が掛けられていたら英語だと
A picture on the wall.
という言い方をします。
でも壁の上じゃないですよね。
机の上というのはもっと正確に言えば「机の上でくっついている状態」が on ということになります。
ここから英語で電気が通電していることを turn on と表現するんですが、これは on を上に乗っているで覚えているとピンと来ませんよね。
それぐらい英語を理解しておくって大事。
何が言いたいかというと、jQuery の on() もマウスが上に乗っているを端的に言ってるわけじゃないってことです。
ボタンにマウスカーソルを載せてクリックするというアクションがあったら、マウスカーソルを載せるまでは on ですが、クリックするまではニュアンスに含まれないので on ってなんだ?ってなってしまいます。
ボタンをクリックした時に◯◯する
これをコードにするとこんな感じです
$('#button').on( 'click', function() {
◯◯する処理;
});
これを応用して、ページが読み込まれたらに書き換えると load を使って下記のように使うことができます
$(window).on( 'load', function() {
◯◯する処理;
});
$( window ) はブラウザから確認できるものという意味で、これが load(読み込み)状態とくっついたら、つまり全ての内容が読み込まれてload 状態になったら◯◯という処理を行う。という意味になります。
なぜ on でこういうことになるかというと、これも英語の on のニュアンスと関係があります。
Turn on the light.
と書くことで「明かりをつけた状態」を表しますが、これって電気が直接電球にくっついているわけじゃないですよね。通電することで電球の明かりが光ったという間接的なことですが、on は直接的なものではなく間接的なものにも使える便利な単語なんです。
これを理解していると $( window ) というブラウザが確認できる物と読み込みというニュアンスがくっつくというのも理解できます。
英語もカタカナ言葉も聞き慣れない日本語も難しいですが、翻訳・画像検索しながら調べて行くことで未知だったものが少しニュアンスを掴めるところまではたどり着けます。
もちろん最初から分かる!とはならないかもしれませんが、それでもこれを繰り返すことで少しずつニュアンスの掴み方がわかってきますし、ニュアンスが掴めれば理解するためのプロセスとしては一歩前に進んでいます。
ただ時間はかかります。当然今までやったことのないことを学習しているわけですし、最初からなんでも理解できる人は少ないです。
諦めない・辞めない事が結局近道なので学習してみたけど全然理解できない糸口が掴め無いという方のヒントになれば幸いです。
]]>この島に住んでいる親族は90代がほとんどで、観光地を除けば幼少期に往訪していた頃と比べると営業しているお店が減っていますし、屋敷のような家も今では空き家になったせいで当時の見る影も無いほど朽ち果てたまま放置されていたりと、時代の移り変わりを肌で感じました。
今回の往訪自体が数年ぶりでこれから先いつ往訪できるかわからないので今のうちに島の様子、特に自分が幼少期に遊んだ近辺の写真を撮影してブログに残しておこうと考えこの記事を書いています。
本島から倉橋島には広島県呉市からかけられている音戸大橋を使って渡ります。
幼少期はこの橋が一つしか無くてこの時期は渋滞を起こしていましたが、現在は第二音戸大橋がかけられたことでかなり緩和されてスムーズに。
第二音戸大橋は近くに飲食ができる建物が一軒と駐車場があり、この場所から広大な瀬戸内海を眺めることができとても気持ち良くてオススメ。
最初に第二音戸大橋の近くにある休憩所から撮影
ひまねきテラスではしらす丼が提供されていますが、今回はお店が混んでいたので断念…
今回は音戸大橋の方も撮影がしたかったので一旦迂回してもう一方の橋へ。
音戸大橋の方は橋をかけるためにループ線が設けられており、頂上に休憩スペースがあります。本当はここに設置されている飲食店でご飯を食べたかったのですが、残念ながらお店は無くなっていました。
休憩所からみた音戸大橋。向こう側が倉橋島で、渡ればこちら側と同じくループ線で下に降りることになります。
この日は台風が去ったあとで空は非常に青くきれいな雲が特徴的でした。
この写真だと分かりづらいですが、こんなに晴れた日に虹が出てる!と思って撮影したんですが、実はこれ虹ではなく彩雲(さいうん)という事をX(twitter)で教えてもらいました
彩雲(さいうん、英語: iridescent clouds)は、太陽の近くを通りかかった雲に、緑や赤など多色の模様がまだらに見える現象[1][2]。
現れることは珍しくないが、昔から瑞相(ずいそう)の一つ、吉兆とされる[3][4]。瑞雲(ずいうん)、慶雲・景雲(けいうん)、紫雲(しうん)などの雅称がある[3][4]。
彩雲 – wikipedia
音戸大橋を渡り倉橋島に入ってから走ること30分強で目的地となる室尾に到着。
途中に桂浜というキャンプ場や温泉施設がある観光地を通ったのですが、ここは以前より開拓されており、カフェがオープンしていたり牧場が開発されていたりと観光客が賑わっていました。
砂浜もきれいで瀬戸内海は海が静かで泳ぎやすいので、遊びに来る方にはオススメの場所。
今回ここには立ち寄っていないので気になる方は観光サイトなどで確認してみてください。
参考:倉橋・桂浜、白い砂浜と松原の歴史感じる施設:Tabetainjya
室尾についてから早速付近を撮影しましたが、日中暑くて汗だく。1時間ぐらいが限界でしたね…
中央に見えているのは造船所
小学校はすでに廃校となっており、来島者のために無料の駐車場として開放
小学校からで室尾を散策
幼少期よく来た商店
宮の付近では毎年夏祭りが行われていましたが、青年団の持続ができなくなるためお祭りは今年で最後らしい
新しく居酒屋ができていた
行ったこと無いですが喫茶店浜荘
撮影しながら歩いていると沢蟹を発見
幼少期訪れたお店はだいたい見る影がなく、別の建物になっていたり空き地になっていました。
しかし、新たに移住してきたかたであろう新居が数軒建っていたり改築工事をしていたりと新しい活気を感じることもでき、無くなっていくだけじゃないと感じられたのは喜ばしいです。
帰路の途中海軍の船を撮影したかったので少し寄り道
海軍カレーを提供している喫茶店ですが、残念ながら訪れた時間はまだ営業していませんでした。
今回もう一箇所訪れたかった広島城。
戦時に天守閣・各城門・櫓および城内の軍事施設が壊滅しましたが後に復元。台風の影響で破損しながらも修復を行い現在は綺麗な外観が維持されています
周辺の町並みもついでに
今回は荷物を少なくするためレンズは標準ズーム一本。基本的に快晴だったこともあり ISO 感度100−200でシャッタースピードを1600−2000あたりで撮影しています。
ただ影に入るとこのシャッタースピードでは暗くなりすぎるので、適宜800あたりに抑えて撮影していました。
]]>そういった人たちにもコンテンツを楽しんでもらえるようルビ(よみがな)を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。
例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に
これを担保するために必要なソースコードは下記
<ruby>親譲<rt>おやゆず</rt></ruby>りの
<ruby>無鉄砲<rt>むてっぽう</rt></ruby>で
<ruby>子供<rt>こども</rt></ruby>の
<ruby>時<rt>とき</rt></ruby>から
<ruby>損<rt>そん</rt></ruby>ばかりしている。
もしも書籍一冊分のルビを振る必要があれなら非常に労力の高いものになりますが、タグの構造としてはそれほど難しくなく、現状は下記2つだけ。
一昔まえだと(おそらくこの記事を書いた8年ぐらい前?)モダンブラウザも対応していないものがあったので、ルビの代替え用に rp タグも入れる必要があり、今より一手間掛かりました。
各ブラウザで閲覧すると下記のようになります
Chrome デモ
Firefox デモ
Safari デモ
Edge デモ
読み仮名だけでなく日本語に対して英語をルビとして振る、あるいはその逆を記述することも可能です
This is a ball.
<p lang="en">
<ruby>This<rt>これ</rt></ruby> <ruby>is<rt>〜です</rt></ruby> <ruby>a<rt>(ひとつの)</rt></ruby> <ruby>ball<rt>ボール</rt></ruby>.
</p>
これは ボールです
<p>
<ruby>これ<rt lang="en">This</rt></ruby>は<ruby>ボール<rt lang="en">ball</rt></ruby>です
</p>
この場合ドキュメントに指定している言語と異なる言語を指定するので、lang 属性を指定しています。
問題は CSS での制御が難しい点があり、個人的にはデフォルトのままで使うので充分だと感じています。
というのも、各ブラウザが CSS の制御に対応していなくて、Firefox がまだ対応しているかなという状況
margin, padding, position を使って違いを比べてみましたが、かなり違いがでました。
Chrome スタイリングデモ
Firefox スタイリングデモ
Safari スタイリングデモ
Edge スタイリングデモ
これだと余白で合わせることがまだ難しく、position に至ってはかなり異なってしまいます
見た目の調整をどうしても合わせるのであれば data 属性を使って制御する方法があります
<p>
<ruby data-ruby="きのう">昨日
<rt>きのう</rt>
</ruby>も
<ruby data-ruby="きょう">今日
<rt>きょう</rt>
</ruby>も
<ruby data-ruby="あした">明日
<rt>あした</rt>
</ruby>も
</p>
ruby[data-ruby] { position:relative; }
ruby[data-ruby]::before {
content: attr(data-ruby);
position:absolute;
left:0;
top: -1.5em;
right:0;
margin: auto;
text-align:center;
font-size:.6em;
}
rt { display: none; }
Chrome デモ
Firefox デモ
Safari デモ
Edge デモ
見た目に優しいルビですが音声で読み上げると本文とルビ両方を読み上げられてしまうので、これは聞きづらいと感じました。
主要なキーワードだけならそこまでストレスにはなりませんが、長文すべてにルビを振ると音声で聞くにはかなりストレスなのでアクセシビリティには課題がありますね。
これについては他のメディアなどでも言及されています。
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡
ただ僕は OS に標準で搭載されているものでしか聴いていないので、「外部ツールが対応しているよ」などご意見あれば教えていただけると嬉しいです。
]]>デザインする際に自分の端末にフォントをダウンロードしてしまうので、実装時に読み込みを確認するとその後の運用ではフォントをアンインストールしない限り、実装方法が変わった場合に気づかないんですよね。
なんせ自分の端末にはフォントがはいっているわけだから、サイトの表示で正しくフォントが表示されてしまうわけです。
今回気づいたのはサイトのリニューアルをお願いしている方と画面共有している時に「フォントが違いますね?」と言われたことが発端でした。
実際に自分の手元の Windows で確認したら(普段は Mac を使っている)想定しているフォントで表示されていなかったわけです。
上記のように利用したいフォントを複数選択すれば、一括で読み込むコードが Use on the web の項目に表示されます。
WordPress で利用する場合、wp_enqueue_style() でこのコードを読み込みます
wp_enqueue_style( 'googlefonts', "https://fonts.googleapis.com/css2?family=Meie+Script&family=Vollkorn:ital,wght@0,400;0,600;1,400;1,500&display=swap", array(), null );
ここでポイントになるのが、バージョン指定をいれる引数に null を指定すること。
ここは省略することも可能で、その場合は WordPress のバージョンが設定されます。元々自分が記述していたコードもここは省略していたのですが、その場合に不具合が生じて HTML に吐き出されるコードから指定していたウェブフォントがコードから何故か削除されていたんですよね。
何故そのような仕様になるのかは不明なんですが、何気なく null を指定するとうまく行ったので備忘録として記事にしておきました
wp_enqueue_style(): https://developer.wordpress.org/reference/functions/wp_enqueue_style/
ついでに Vite で Web フォントを使うプラグインがあったので合わせて紹介しておきます
]]>最近 Laravel を触ってまして、Docker で環境構築して使うことが増えてきたので備忘録として書いておこうと思うので、これから触ってみたいという方の参考になれば嬉しいです
今回実行した環境は以下のとおりです
下記環境を構築します
まずは Docker が入ってない人は Docker をインストールしましょう
Docker はわかりやすく概要を説明すると、コンテナに必要なアプリケーションをイメージという単位で構築し、それぞれに上記で記載している Web サーバーや PHP, Database といったアプリケーションやミドルウェアなど自分に必要な構成で自分の端末に構築できる仕組みです。
自分の端末に直接 Web サーバーや Laravel をインストールして動かすこともできますが、案件によって Web サーバーを変更したり PHP のバージョンを変更するのは手間がかかります。
Docker なら必要なときに必要な構成を docker-compose.yml というファイルに定義しておくことでいつでも立ち上げたりシャットダウンしたり、削除することができるので、切り替えが容易に行えて楽です。
また設定ファイルを共有すれば、他の人にもすぐに同じ環境を用意してもらえるので、共同開発するのも便利。
かなり端的に概要を書いているので、もっと詳しく知りたい方はサーバー会社のさくらインターネットさんが公開している「さくらのナレッジ」の記事を読んでみましょう
Docker入門(第一回)~Dockerとは何か、何が良いのか~:さくらのナレッジ
docker-compose.yml
version: "3"
services:
web:
image: nginx:latest
ports:
- 8000:80
volumes:
- ./docker/web/default.conf:/etc/nginx/conf.d/default.conf
- .:/var/www/html
depends_on:
- php-fpm
php-fpm:
build: ./docker/php
volumes:
- .:/var/www/html
depends_on:
- db
db:
image: mariadb:latest
ports:
- 33306:3306
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_USER: root
MYSQL_PASSWORD: root
MYSQL_DATABASE: sampledb
volumes:
- ./db-data:/var/lib/mysql
今回開発するフォルダを作成し、上記ファイルを保存しましょう。
作成するフォルダを sample とし、ユーザーディレクトリに作成した場合下記構成になります。
~/sample/docker-compose.yml
~/ はユーザーディレクトリを指します
このファイルを書く場合インデントに注意してください。インデントが崩れているとエラーになります。
NginX の設定ファイルが必要なので、default.conf というファイルを用意します
default.conf
server {
listen 80;
root /var/www/html;
index index.php index.html index.htm;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location ~ \.php$ {
root /var/www/html/sample/public;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass php-fpm:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
}
root の位置は自分の作成したフォルダが sample
なので、/var/www/html/sample/public
になります。docker-compose.yml
で名前を変更した場合は、このディレクトリ構造の sample
を自分が docker-compose.yml
で指定した値に合わせてください
同様に fastcgi_pass
には docker-compose.yml
に記載している php-fpm
を指定し、ポートはデフォルトの9000番を割り当てています。
このファイルは下記のように配置します
~/sample/docker/web/
│ └──default.conf
└──docker-compose.yml
ここで docker を起動しましょう
ターミナルなどで下記コマンドを実行します。場所は ~/sample に移動してから実行。(%は入力不要です)
% docker-compose up -d
docker-compose.yml に MariaDB
への接続情報を記載しています
上記記載の docker-compose.yml から抜粋
db:
image: mariadb:latest
ports:
- 33306:3306 //← 外部から接続する時のポート番号:内部接続時のポート番号
environment:
MYSQL_ROOT_PASSWORD: root //← Root のパスワード
MYSQL_USER: root //← ユーザー名
MYSQL_PASSWORD: root //← パスワード
MYSQL_DATABASE: sampledb //← 作成するデータベース名
volumes:
- ./db-data:/var/lib/mysql
まずはデータベースが起動しているか確認してみましょう
下記コマンドをターミナルで入力してデータベースのコンテナに接続します
% docker-compose exec db sh
docker-compose exec ○○ sh で起動している○○( docker-compose.yml で定義している services: 内部に記載している web, php-fpm, db のどれか )に接続するという意味です。接続すればターミナルの操作が自分の端末ではなく、コンテナ上での操作に変わります。
#
環境によって異なりますが、% から # のようにターミナルの開始記号が変わっていれば、コンテナに接続できています。
コンテナから抜けたい場合は exit コマンドで。
# exit
%
このように切り替わったことを確認しながら今自分の端末を操作しているのか、コンテナを操作しているのか判断できるようになりましょう。
説明どおりに進めているとコンテナから抜けているので、改めてコンテナに接続します。
% docker-compose exec db sh
次にコンテナ内のデータベースに接続します
# mysql -u root -proot sampledb
mysql コマンドの -u はユーザーをしてするオプション、-p はそのまま続けてパスワードを入力するオプションで、最後に接続するデータベース名を記載します。
これらコマンドを使う時は下記に気をつけてください
ハイフンが付いているものはオプションです。-p については続けて入力するパスワードを省くと、コマンド実行後にパスワードを確認してきます。
どちらの方法でも下記のようなメッセージが表示されれば接続できています
今回利用するバージョンは 9.52.7 になります
Laravel は PHP のフレームワークになるので、PHP の必要なパッケージやモジュールをインストールするために Docker ファイルを作成します
作成場所は先に記載している docker-compose.yml
に記載している php-fpm の build 部分にしている場所になります
上記記載の docker-compose.yml から抜粋
php-fpm:
build: ./docker/php
ファイル構成で示すと下記の構成になります
~/sample/docker/php/
│ │ └──Dockerfile
│ └─/web/
│ └──default.conf
└──docker-compose.yml
Dokerfile
FROM php:8.0.5-fpm-alpine
RUN apk --update add \
&& apk add build-base curl git zip tar unzip vim oniguruma-dev
RUN cd /usr/bin && curl -sS https://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer
RUN apk add libxml2-dev curl-dev $PHPIZE_DEPS
RUN pecl install xdebug-3.1.5
RUN docker-php-ext-install pdo_mysql
RUN docker-php-ext-install mbstring
RUN docker-php-ext-install xml
RUN docker-php-ext-install curl
RUN docker-php-ext-install session
RUN docker-php-ext-install tokenizer
RUN docker-php-ext-enable pdo_mysql mbstring xml curl session tokenizer xdebug
WORKDIR /var/www/html
RUN docker-php-ext-install のように重複している箇所ははまとめて記述することもできます
RUN docker-php-ext-install pdo_mysql mbstring xml curl session tokenizer
ただこの場合どれかのパッケージインストール時にエラーが有る場合、原因が特定しづらいので分けておけばどのパッケージでエラーが出たかわかりやすくなります。
RUN
以降を Docker のコンテナ起動時に実行$PHPIZE_DEPS
の指定は phpize
に必要なパッケージのインストール。PHP拡張モジュールを動的にビルドするのに必要なもので、この指定がないと PHP 本体をビルドし直すことになります。pecl install xdebug
は PHP のデバッグツールですが僕が今回インストールした際にバージョン指定なしでインストールするとエラーが発生したので 3.1.5 を指定しています。docker-php-ext-install
PHP の拡張インストールで、docker-php-ext-enable
を使って有効化しています。PHP の設定ファイルを追加したので docker-compose
を再度実行し、コンテナを再構築します
% docker-compose up -d
構築が終わったら Laravel をインストールするため php-fmp のコンテナに接続し、インストールコマンドを実行します
% docker-compose exec php-fpm sh
接続するとターミナルの開始記号が下記のようになるはずなので
/var/www/html #
この状態でインストールコマンドを実行します。
/var/www/html # composer create-project --prefer-dist laravel/laravel sample
最後の sample はアプリケーションの名前になり、作成したディレクトリにこの名前のフォルダが作成されます。
~/sample/db-data/
│ /docker/php/
│ │ └──Dockerfile
│ └─/web/
│ └──default.conf
│ /sample/
└──docker-compose.yml
この sample
フォルダの中身が Laravel
プロジェクトになります
上記で作成している default.conf
にドキュメントルートの指定が入っています
default.conf より抜粋
root /var/www/html/sample/public;
この中の index.php
ファイルが Laravel プロジェクトをブラウザで表示する際のトップページになります。
そして、Laravel から データベースに接続する設定を .env というファイルに書き込まないとエラーになるので、.env を編集し MySQL の記述を下記に変更します。
Laravel プロジェクトフォルダ(今回だと sample )の直下に .env というファイルがありますが、見えない場合は不可視ファイルを表示するように設定が必要です
cmmand + shift + .
.env の DB_ で始まる箇所を編集し、docker-compose.yml にある同一の項目と値を合わせます
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=sampledb
DB_USERNAME=root
DB_PASSWORD=root
docker-compose.yml
で指定しているサービス名になるので今回は db
docker-compose.yml
で指定した ports
の右側の値(33306:3306)docker-compose.yml
に指定した名前をそのまま利用しますこれで php-fpm のコンテナに接続し、データベースのコンテナへ接続できるので、php-fpm に接続した状態でデータベースのテーブル定義を Laravel のコマンドを利用して設定します。
コンテナに接続していない場合はまずは接続
% docker-compose exec php-fpm sh
接続したらドキュメントルートから始まるので、Laravel プロジェクトに移動
/var/www/html cd sample
/var/www/html は表示されているはずなので、コピーする際にコピーしないように気をつけてください
cd
というコマンドがディレクトリを移動するコマンドを意味し、今いる階層に存在する sample ディレクトリに移動するという意味になります。
移動したら Laravel の migrate コマンドを実行
/var/www/html/sample php artisan migrate
こんな感じで表示されれば成功。
これは Laravel プロジェクトに artisan ファイルが存在するからこのコマンドが利用できるので、エラーが出た場合は正しいディレクトリ位置にいるか確認してください。また今いる sample ディレクトリの中身を確認して artisan ファイルが存在するかも確認してみましょう。
ディレクトリ内のファイルを確認するには下記コマンドを実行
/var/www/html/sample ls -la
下記のように存在するファイル一覧を表示できます
また、自分の端末のユーザーディレクトリに sample ディレクトリを作成して開発しているので、ユーザーディレクトリの中身を Finder や エクスプローラで確認すれば同様に内部のファイル一覧が確認できます。
コンテナに接続して確認するのも、端末側から確認するのも同じファイルが確認できます。これは同じファイルを扱っている事になりますが下記の違いがあります
/var/www/html/photom/public
)Docker の Web サーバーコンテナを利用しているので、これは仮想的なサーバーを端末の中に用意して利用している。こんなイメージを想像してもらえればわかりやすいと思います。
ここまでで準備は整いました。実際にブラウザに表示してみましょう。
/var/www/html/sample php artisan serve
php artisan serve
このコマンドで Web サーバーが起動します。
Web サーバーが起動すると ip アドレスが表示されるので、この ip アドレスをコピーしてブラウザに貼り付けてみます。
様子がおかしいですね。
コンテナ内部から起動するとこのように表示できないエラーが返ってきます。
これはコンテナ内部からの通信設定で起動しているからで、ブラウザを経由するような外部通信だと設定を変えないといけないんですよね。(これに気づくのに時間がかかりました)
ですので、まずは一度起動を停めます
Press Ctrl+C to stop the server
と記載があるので、キーボードを Ctrl + C
入力して停めます。そしてコンテナの接続から抜けて自分の端末接続に切り替えます
/var/www/html/sample exit
次に .env のファイルを書き換えます
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=33306
DB_DATABASE=photom
DB_USERNAME=root
DB_PASSWORD=root
変わるのは DB_HOST と DB_PORT ですね。内部通信・外部通信というのがいまいち理解しづらいですが、ターミナルでコンテナに接続してそこから別のコンテナに接続通信を行う場合は内部通信。ブラウザなどを使って外側から通信する場合が外部通信といった感じです。
内部通信の場合は DB_HOST の名前を docker-compose.yml
で指定しているサービス名を指定していましたが、外部通信に変更する場合は
docker-compise.yml
ファイルの内部と外部で設定した左側の内容に( 33306:3306 )Laravel を触っていてブラウザに表示した際に接続エラーが出た場合は、この設定値に誤りがあるケースが多いので確認してみましょう。
ちなみになぜわざわざ外部と内部のポートを変えているかというと、自分の環境にほかの開発用アプリケーションがインストールしてあって、それらが既存の 80番や3306番を利用しているかで、ここがバッティングするとエラーになって使えないからです。
コンテナー同士の内部通信であればそれらの影響を受けないのでデフォルトの値で利用できますが、開発端末の方はそういうわけに行かないので、外部通信のポートをあえて変更して設定しています。
では改めて端末側からサーバーを起動してみましょう。必ず Laravel プロジェクトにいることを確認してください
% php artisan serve
先ほどと同じ用に ip アドレスが表示されるのでブラウザの画面を更新します
この画面が表示されれば成功です。
今回記事執筆に参考させていただきました
]]>WordPress のお仕事だとエックスサーバーやさくらインターネットを使うことが多いのですが、この場合は転送に FTP を利用します。
まず設定するのは、リポジトリにある Settings の secrets に FTP 情報などを登録します。
ここで登録する内容は外部から見えないので安心して利用可能。
テスト環境と本番環境など転送先サーバーが複数存在する場合はそれぞれの値を一つ一つ入力して保存していきます。
最初は何も項目がないので、 New repository secret のボタンをクリックし
を入力して保存していきます。
GitHub で入力するのは以上です。
次にデプロイに必要なファイルをプロジェクトに追加します。
/.git
/.github/workflows/deploy.yml
上記になるようディレクトリ .github/workflows/ を作成し、workflow の中に ***.yml として(ファイル名は自由)yamlファイルを作成します。
on:
push:
branches:
- main
pull_request:
branches:
- main
name: Deploy
jobs:
test:
name: Upload Staging
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Upload Staging
uses: SamKirkland/FTP-Deploy-Action@2.0.0
env:
FTP_SERVER: ${{ secrets.TEST_FTP_SERVER }}
FTP_USERNAME: ${{ secrets.TEST_FTP_USERNAME }}
FTP_PASSWORD: ${{ secrets.TEST_FTP_PASSWORD }}
LOCAL_DIR: ./
REMOTE_DIR: /public_html/
production:
name: Upload Production
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Upload Production
uses: SamKirkland/FTP-Deploy-Action@2.0.0
env:
FTP_SERVER: ${{ secrets.FTP_SERVER }}
FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
LOCAL_DIR: ./
REMOTE_DIR: /public_html/
on: 以下に必要なコードを記述していきますが、このサンプルでは main ブランチに push もしくは pull_request でデプロイを実行するようにしています。
最初は main ブランチに push すれば実行されます。
レンタルサーバーで SSH を使う場合も同じです。ただしパスフレーズが使えないので、レンタルサーバーで鍵を登録する場合はパスフレーズを入力せずに登録してください。
on:
push:
branches:
- main
pull_request:
branches:
- main
name: Deploy
jobs:
production:
name: Upload Production
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: install SSH key
uses: shimataro/ssh-key-action@v2
with:
key: ${{ secrets.SSH_PRIVATE_KEY }}
name: ida_rsa
known_hosts: ${{ secrets.KNOWN_HOSTS }}
- name: Deploy
run: rsync -rlOcv --omit-dir-times --exclude ".git/" --exclude ".github/" -e "ssh -i ~/.ssh/ida_rsa -p ${{ secrets.SSH_PORT }}" ./ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:/public_html/
SSH の場合デプロイに rsync を利用します。
FTP の設定と異なるのは
secret に サーバーとの接続で利用している SSH キーを登録します。
secret に登録します。手順は
ssh-keyscan -H ホストのアドレス >> ~/.ssh/known_hosts
を実行rsync のオプションに -rlOcv
をつけています。色々と調べていると -ahvz
をつけているものが多かったんですが、これだと転送はされるものの転送時に sync: failed to set times on "/***/***/.": Operation not permitted (1)
というエラーが出力されていたので、権限周りでエラーが発生したため、転送時の権限に影響がないように変更してこの形にしました。
権限についてはドキュメントを読むか、rsyncオプション を参考してみてください。
あとは main に push すればデプロイされます。
pull_request でデプロイしたい場合は、FTP のサンプルに合わせてコードを編集してください。
]]>案件で SNS アカウントを用意するのでデザインに入れておいてくださいと言われた後、アカウントを共有してもらうまで時間がかかることがあります。
また、構想段階では SNS 運用をしようと思っていたが公開後はバタバタしていてしばらく SNS はできそうもないというケースなどもあり、その場合デザイン上掲載していた SNS アイコンをページ上から一旦非公開してほしいというケースもたまにあります。
その際にわざわざ調整依頼をいただくのも面倒でしょうし、実装側も最初から登録あったものだけフロント側に表示するよう実装しておけば楽ですよね。
毎回テーマに SNS のアカウント情報をいれるのも案件ごとにやるよりはプラグイン化しておいたほうが後々楽なので今回リリースしました。
管理画面で
のアカウントが管理できます。
フロント側で呼び出したい場合は
ssam_account();
を利用することで連想配列による各 SNS の アカウント情報の取得
ssam_view();
を利用することで連想配列による各 SNS の URL の取得が行なえます。
echo していないので取得後はご自身で使いたいように加工しましょう
プラグインは公式ディレクトリからダウンロードできます。
ソースファイルはGithubにあげています。
Github:Simple SNS Account Management
良いね!って思ったら Rating にレビューもらえると嬉しいです。
またバグ報告やソースレビューなどあれば GitHub にお願いします
]]>この際に Node のバージョンを現在(2021年8月26日)の推奨版である 14.17.5 に切り替えたかったんですが Node の管理をしている Nodenv では 13.2.0 までしかインストールできません。
nodenv でインストールできるバージョンを確認するには下記コマンドを
nodenv install --list
どうするか調べたところ node-build を利用すればインストールするバージョンを追加できるのでそちらを導入したので以下メモ書きです
nodenv の導入がまだの場合はまずここからやりましょう
git clone git://github.com/nodenv/nodenv.git ~/.nodenv
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(nodenv init -)"' >> ~/.zshrc
上記の .bash_profile の部分は自分の環境似合わせる必要があります。~/.bash_profile とか
exec $SHELL -l
とコマンドを実行するかアプリケーションを再起動するか
ここまでで nodenv が利用できるようになっているはず。確認してみましょう
nodenv -v
上記コマンドはアプリケーションのバージョンを確認するコマンドです。-v というのがバージョンを確認するためのオプションで、アプリケーション名とバージョンが表記されれば無事インストールができています。
ここからが本題。node-build のインストールに Homebrew を使います
brew install node-build
mkdir -p "$(nodenv root)"/plugins
git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build
インストルできたらインストールできるバージョンを確認しましょう
node-build --definitions
今回は推奨版の14.17.5をインストールするので
node-build 14.17.5 ~/.anyenv/envs/nodenv/versions/14.17.5
14.17.5 の部分を自分がインストールしたいバージョン番号に変更して使ってください
インストール完了。*(アスタリスク)がついているものが現在指定しているバージョンなのでこれを切り替えます。ローカルプロジェクトの方を切り替えたいので
nodenv local 14.17.5
切り替わったか確認します
node -v
これでバッチリ切り替わりました!
]]>