Gatsbyでbuildしたあとのページを確認するとcssが適用されていない問題
まさに表題のとおりだが、gatsby build したあと、 gatsby serve で本番と同様の環境でアクセスすると、cssが適用されていない問題があった。しかもcssが適用されていないページは一部だけという内容。
一瞬頭を悩ませたが、単純にそのページでcssファイルのimportを行っていないだけだった。
問題としてはとても初歩的でとるに足らないものだが、このページ、gatsby developした時点ではcssは読み込まれた状態となって表示されていたので、それが頭を悩ませる要因だった。
以上、ちょっとした備忘録となります。
と、ここで終わるのも良かったが、一応こういう問題はGatsby界隈では他のケースでも起こっているようで、私のような初歩的なミスではないパターンも存在する。
もしそのような問題でこのページにたどり着いた方がいたら申し訳ないので、もっとしっかりと原因(?)でproduction build後にcssが適用されないケースについて紹介する。といっても下記のissueを貼るだけだが。
上のissueの概要はこんな感じだ。
現在、gatsby build & gatsby serveを実行して、ページを表示させると一部のスタイルが最初に読み込まれません。しかし、アプリ内の他のページに移動すると、すべてのスタイルは正しく読み込まれます。どのスタイルが読み込まれないのかを特定しようとしていますが、現時点ではコンソールエラーやネットワークエラーは発生していません。 jsxstyleを使用しています。開発用のビルドを実行しても問題はありません。
たぶんこういう問題に当たる人は多そうな気がする。
もし似たような問題にぶつかっている人がいたら、ぜひ上のissueを参照してみてほしい。
Gatsbyはpluginなどを駆使して簡単にいい感じの機能を持ち合わせたサイトを作成できるツールだが、いざしっかりとサイト構築を行おうとすると、細かい問題にぶつかる可能性はそれなりに高い印象がある。
そういえば以前 gatsby-plugin-offline に関する記事を投稿したりもしていた。
サイト構築の利便性のために抽象化した弊害もあると思うし、そこは付き合っていく上では仕方のない部分だ。
私自身はGatsbyはとても良いツールだと思っているし、実際便利なので、今後もうまく付き合っていきたいと思っている。
何故か最後自分の気持ちを表明する、という謎の展開を見せてしまったが、とりあえず以上である。
昔、おかあさんといっしょで流れていた懐かしの童謡『きいろい木馬』について
空飛ぶ木馬が落っこちて足を折ってしまう歌のタイトルは『きいろい木馬』だった
今日、妻と会話をしていたときに、昔よく聴いていた『きいろい木馬』が唐突に頭の中に流れ出してきた。
その歌は物哀しい曲調で、歌詞の方も、空飛ぶ木馬が落っこちて足を折ってしまい、しかも折れた足が燃えて空に昇り、雲になってしまうという、かなり悲しい歌だった。
その悲しさは当時から印象に残っており、私の心に強い印象を与えた。
そして私はその歌をとても好きだった。
たぶん、教育テレビのおかあさんといっしょで流れていたのではないだろうか。
私はまだ幼かったが、その物哀しい曲調にマッチした少し寂しげな映像をずっと見ていたような気がする。
(そう、たしか紙芝居っぽい映像が歌にはついていたのだが、それがまた悲しい感じだったのだ)
思い出すと、その時の歌を聞きたくなるのが人間の性だが、あいにく私は曲のタイトルを覚えていなかった。
歌詞の内容から最初タイトルを 空飛ぶ木馬 だと思っていたが、それで検索しても探している曲は見つからなかった。
それでも辛抱強く探し続けると、私の探している曲は『きいろい木馬』だったことが判明した。
映像はなかったものYouTubeにも当時の音源が上がっていた。それがこちらである。
私と同年代の人であれば、この曲を聞いて懐かしいと感じる人も多いのではないだろうか？
歌詞をよくよく聴いてみると、木馬の失われた足は心優しい木こりに直してもらい、ハッピーエンドを迎えていた。
そうか、悲しい歌ではなかったか、と私は安堵した。
きいろい木馬の歌詞の好きなところ
この きいろい木馬の歌詞だが、当時から印象に残っている箇所がある。
その箇所を引用する。
きいろいけむりが空をとび
やがて雲に なりました
それはきれいな雲でした
ここは木馬の足が折れて燃えてしまい、その煙が雲になるところを描いている。
木馬にとっては絶望的な状況なのに、木馬にとって絶望の象徴である雲がきれい、とはどういうことだろうか？
それはひどく残酷で、美しい表現だなと当時の私は思った。
(もちろん幼い私にはそういう繊細な感性など持ち合わせていない。だが、なんとなくそれはきれいな雲でした という表現は印象に残っていて忘れられなかったのだ)
きいろい木馬の作詞家、渋谷 重夫さんについて
こんな素晴らしい歌を作り上げた人々のことが気になったので調べてみた。
まず作詞をしたのは昭和期の児童文学作家であり、詩人である、渋谷 重夫さんである。
私は彼の作品を殆ど知らないのだが、下記のような作品を残しているようだ。
- 空とぶ大どろぼう
- 事件だ!それいけ忍者部隊
詩集には下記のようなものがある。
- ねむりのけんきゅう
- きいろい木馬
- 海からのおくりもの
きいろい木馬の作曲者である渋谷毅さんについて
作曲をしたのは 渋谷毅さんである。
渋谷さんの作品も私は知らないのだが、Wikipediaを見ると、日本のジャズピアニストであり、作曲家、編曲家とある。
どうやら、嫌われ松子の一生の音楽も渋谷さんが担当していたらしい
(正確にはイタリアの作曲家、編曲家である、ガブリエル・ロベルトさんと共に担当しているようだ)
歌っているのはうたのおねえさんである、森みゆきさん
ちなみにこの曲を歌っているのは、森みゆきさん、おかあさんといっしょのうたのおねえさんとして活躍されていた方だ。
この歌声を聴いてすごく懐かしい気持ちになったので、おそらく当時聴いていたときも森みゆきさんが歌われていたのだろう。
(きいろい木馬の音源に複数のバージョンがあるかはわからないが、おそらく上のYouTubeの音源が当時聴いていたものかと思われる)
というわけで、きいろい木馬について少し調べてみた。
今聴いてもずっと聴き続けていられる名曲だと思う。優しさと悲しさが入り混じった、複雑な心情風景を見事に描き出していると私は思う。
JavaScriptのfocusメソッドを使ったときにiPhoneのSafari上でソフトウェアキーボードが出てこないようにしたい
先日のポストにも書いた下記のサイト。
(Slackのリマインダーの日時指定や時間指定方法をいつも忘れるので、用途ごとにすぐにコピペして利用できるサイトです)
こちらのサイトではコピーボタンが実装されており、コピーを押すことでクリップボードにスラックのリマインダーコマンドをコピーできるようにしています。
さて、このコピーボタンですが、実はリリース直後に一つ問題が発生していました。
というのも、iPhoneのSafari上ではこのボタンを押した際にソフトウェアキーボードが表示されるようになってしまっていたのです。
問題の原因としては、クリップボードにコピーを行う処理をJavaScriptで記述していたのですが、その処理の中で利用されている input要素に対する focusメソッドを使用した際にソフトウェアキーボードが表示されてしまっているようでした。
ソフトウェアキーボードをSafariで出さないようにするためにはreadonly属性を付与すること
ソフトウェアキーボードを表示させないようにするための対応策は、思いの外シンプルでした。
使用している input タグに対して readonly 属性を付与することで、ソフトウェアキーボードは出ないようになります。
今後も同じ問題にぶつかる可能性がある気がしたので、こちらに備忘録として書いておくことにしました。
Slackのリマインダーの日時指定や時間指定方法をいつも忘れるので、用途ごとにすぐにコピペできるサイトを作った
以前も書いたSlackのリマインダー機能についての話
Slackのリマインダー機能自体はとても便利で、かつ作業中のちょっとしたリマインドなどにも使える気軽さが魅力的な機能なのだが、利用するためのコマンドが分かりにくい。
そこで最近Habanero Beeを用いて、Slackのリマインダー機能で利用できるテンプレートが多数用意されたサイトを作成した。
コピーボタンも設置しているので、コピーボタンを押してSlackにコピペし、適宜値を書き換えながら利用する形となる。
このサイトでは、スラックのリマインダーを指定するときに、
- Slackで時間指定のリマインドを送る場合
- Slackで日時指定のリマインドを送る場合
- 1時間後にリマインドを送る場合
- 隔週の月曜日にリマインドを送る場合
などなど、いくつかのシーンで使えるリマインドの記述がページに記載されている。
どちらかというと自分がササッと使えるようにするために作った側面が大きいのだが、Slackのリマインダーについては結構困っている人も多いと思われるため、こういう形でサイトとして公開することにした。
もちろんHabanero Beeのドッグフーディングも兼ねている。
なお、こちらのサイトではAMPサイト上でコピーボタンの実装を行っている。
(よくある、ボタンを押すとクリップボードにコピーしてくれるやつ)
これは現在Habanero Beeには実装されていないのだが、使いたい機能だったためHabanero Beeをcloneして、一部内部実装をカスタマイズした上で利用している。
この機能自体はうまく汎用化できれば、Habanero Beeにも将来的には組み込んでいきたいと思っている。
ちなみにこちらのサイトのロゴは私の方で作ったものだが、配色をSlackのロゴのカラーに合わせていたりして、密かにお気に入りのデザインである。
Habanero Beeを用いていることでAMPにも対応しているし、スマフォからもサクサク動くようになっていると思うので、Slackのリマインドを利用したいけどコマンド探すの面倒くさい、と考えている方はチェックしてみてください。
【育児日記】子供の鼻水対策に電動鼻水吸引器のメルシーポットが活躍している
たまには育児関連のことでも書いてみようと思う。
というのも、ここ最近、娘の鼻水が止まらず、いつもズカズカしている。
子供の鼻水は放置していてはだめ？
結論から書くと、放置はだめらしい。
大人であれば、少しぐらい放置していても、ちょっと不快なぐらいだが、子供の場合は別。
子どもの鼻の中は狭く、鼻と耳をつなぐ耳管が太く水平のため、ウイルスが入りやすい構造になっているそうで、鼻水が詰まると中耳炎になってしまうこともあるよう。 これは鼻と耳が管でつながっているため、ウィルスや細菌を含んだ鼻水が耳の方へ流れ込んでしまうことで、中耳炎を引き起こすというプロセスのようだ。
また、鼻が詰まることでうまくミルクが飲めなくなったりもする。
これはミルクを飲みながら鼻呼吸をしているからだ。
たしかに鼻水が詰まっているときに何かを飲もうとすると、ひどく苦しそうにしている。
他にも鼻がつまると鼻涙管という管が塞がれ、涙が逆流してしまい、目やまぶたが腫れることがあったりするなど、他の病気を誘発したり、様々な影響があるらしい。
というわけで、鼻水の放置はだめなのである。
参照したサイト
一応子供の体に関することなので、参照したサイトの情報も下に載せています。
より詳しく知りたい方は下記のサイトを見てみてください。
子供の鼻水対策に電動鼻水吸引器のメルシーポットが大活躍
以上のように鼻水放置は厳禁なのだが、大人のようにまだティッシュでうまくかむこともできない。
そこで子供の鼻水を吸うための道具を利用することになる。
我が家で利用しているのはこちらの Baby Smile 電動鼻水吸引器 メルシーポット というやつである。
忙しいママたちの時短グッズとして定着しているメルシーポット。高い満足度を実感していただいています。
耳鼻科レベルの吸引力で鼻水すっきり。ワンタッチで電源を入れるだけで吸引スタート。
耳鼻科レベルの吸引力で鼻水すっきり。ワンタッチで電源を入れるだけで吸引スタート。
これは価格は1万超えと、安くはないが、価格以上の活躍を我が家では見せている。
この機器の概要を簡単に説明すると、自動鼻吸い機である。
耳鼻科に行ったことがある方は分かると思うが、このノズルを鼻に挿して鼻水を吸い取るのである。
そしてこの機械、鼻水がよく取れる！
鼻水が溜まっているときは実に気持ち良いくらい、ずぞぞぞぞーと鼻水が取れてしまう。
子供はこの機械で鼻水を吸われるのはたいへん嫌がるのでいつも泣きわめくのだが、吸い取ったあとは晴れやかな顔をしている。
鼻も通るから快適そうだ。
我が家では鼻水が出ているときは定期的に吸っている。
鼻水を頻繁に吸うと、鼻風邪の治りも早い気がする。やはり上にも書いたように、放置せずに細かく吸っていたほうが良いのだろう。
ちなみにこのメルシーポッド、鼻に挿入するノズルが子供サイズにしてはちと太いので、鼻の入口付近しか吸えない。
そこで我が家ではノズルを細くするための拡張ノズル的なものを別に購入して、こちらをつけた状態で鼻を吸っている。
電動鼻水吸引器のメルシーポット、ベビースマイルどちらにも使える仕様。
透明タイプなので、鼻水の状態を観察しながら吸引することができるので、お母さんも安心。
先端が細くなっているので、鼻水をピンポイントですっきり
こちらは手頃な価格で買えるので、もしメルシーポットを利用されている方で、鼻水があんまり取れないと思っている方は、こちらを利用してみると良いです。
私の主観ですが、このノズルを利用することで鼻水が以前よりも、より取れるようになりました。
電動鼻水吸引器のメルシーポットは大ヒットアイテムだった
ちなみにこちらのメルシーポット。この投稿を行うために改めて調べてみたところ、育児における大ヒットアイテムだったようだ。
Amazonの 鼻吸い機 というカテゴリーでも堂々の1位となっている。
(それにしても実にニッチなカテゴリーである)
というわけで、鼻吸い機、というスーパーなマシンについて割と長々と書いた。
子供の鼻が早く完治してくれることを願いながら、今日もこれから子供の鼻水を吸ってくる。
【サガフロリマスター】ヒューズ編の最強ボスに挑む方法
これは先に書いておくと、自分のための備忘録として書いている。
またネタバレも含まれるので、そういうのを避けたい人は見るのはここでストップしておいたほうが良い。
・
・
・
・
・
本文がうっかり目に入ってしまわないようにスペース開けています。
・
・
・
・
・
目次
今回書いた内容の目次はこちら
サガフロリマスターについて
サガフロンティア・リマスターでヒューズ編の最強ボスに挑む方法を記載しておく。
というのも私自身はまだサガフロリマスターを購入できていない。
ちょうど体調を崩してしまい、すぐに手を出すエネルギーを完全にかけてしまっていた。
が、たぶんそのうちやると思うので、最強ボスの出現方法だけ先にこちらにメモっておこうと思った次第である。
ちなみに、サガフロリマスターについてはYouTubeのプレイ動画などで大方の概要を既に把握してしまった。
(既にプレイしているゲームだし、ネタバレとかは特に気にしなかった。むしろプレイ欲が更に湧いている)
倍速機能や戦闘からの退却、リージョン移動時などのスキップなどなど、かゆいところに手が届く機能が盛りだくさんで、すごく良さそうな印象。
また、話題になっているヒューズ編の追加や、オリジナル版未実装のイベントなどなど、楽しめそうな要素も盛りだくさんで、オリジナル版では語りきれなかったストーリーについても補完されている。
そういえばサガフロの解体新書は持っているけど、裏解体新書は持っていなかった。
どうやらここにもヒューズ編で今回描かれるような内容は記載されているらしく、かなりファン向けの内容であるようだった。
もう手に入らないよな〜と思いつつ、Amazonを開くとプレミアが付いており、メルカリでもご覧のような形となっていた。
気を取り直して、ヒューズ編の最強ボスに挑む方法を記載していく。
追記：サガフロの解体新書と裏解体新書が電子書籍化された！！
なんと解体新書や裏解体新書読みたい〜と感じている私のような人間の要望に答えて解体新書と裏解体新書が電子化されたようだ！
下記はAmazonのリンクとなる。
ちなみに私は解体新書は既に当時手に入れているので、裏解体新書のみ電子版で購入。
Amazon内の商品ページにも記載がある通り、紙の書籍を直接スキャンして作成されているので拡大すると粗さや紙の質感も感じるが個人的にはそこまで気にならなかった。
そして裏解体新書の感想だが、相当マニアックな内容で当時から遊んできた人間としては読み物としてかなり面白い感じとなっている。
電子版なら正規の値段で購入できるし、ポチッとクリックしてすぐに読み始められるので、当時からのファンで未読の方はこの機会に一冊購入されてみるのもよいのではないだろうか？
〜追記終わり〜
サガフロリマスターでヒューズ編の最強ボスに挑む方法
主人公どれか一人でラスボスを倒すと、ヒューズ編が選択できるようになる。
ヒューズ編では一度クリアした主人公の物語をヒューズ視点で遊べるようになっており、ストーリーもヒューズ編ではやや異なったものになっている。
基本的には各主人公でそれぞれクリアしていき、その後はヒューズ編で各々の主人公の物語を今度はヒューズ視点で再体験していくという流れになるかと思う。
(いや、一人クリアしてからヒューズで都度都度再体験していく、という楽しみ方のほうが、一気にストーリーに入り込めせそうで良いかも。ここはどっちでプレイしていこうか今から迷う。楽しみ)
ヒューズ編を始める際に選んだ主人公が、ヒューズ編の実質ラスボスとなるが、ラスボスに挑む前にパーティに他の主人公キャラを入れておくと、それぞれの主人公のラスボスにもすぐに挑めるようになる。
そしてこの状態で、選んだ主人公のラスボス前に、他の主人公のラスボスをすべて倒した上で、ラスボスに挑むと、そのラスボスが最強の状態になって出現する。
これは条件を満たしておくとプレイ画面にもその旨が記載されるので、条件を満たしているかどうかは事前にちゃんと分かる。
そしてこのボスというのが、いわゆる最強ボスとなる。
プレイを眺めていた感じ、文字通り最強ラスボスといった感じで、なかなか手強そうだ。
そんなボスが7体もいるというのは、かなりのやりこみ要素という感じがする。
(サガフロリマスターを見ていて思ったのは、このやりこみ要素がかなり充実しているということだ。でも同時に初めて遊ぶ人に対しても、オリジナル版よりも遊びやすくなっているし、全体的に見てこのリマスターはかなり良さそうだと思った)
私はオリジナル版は当時そこまでやり込んでいたわけではないが、これはちょっと面白そうだなと思っている。
ちなみにヒューズ編をクリアした状態でいける、リマスター版の開発室には、チート級の強さを誇る忍者がいる。
どうやって倒せるのか私には検討もつかないが、気になる人はプレイ動画をチェックしてみると良いかも。
なにげにエミリアの婚約者であり、ヒューズの後輩でもあるレンも今回仲間になる。実力やいかに？
追記: パープルシャドウの攻略メモを書きました
上に少し書いたチート級の強さを誇る忍者こと、パープルシャドウの攻略メモを書いた。
なお、このパープルシャドウと戦うには、最強状態のラスボスを一体以上倒していることが条件となる。
あくまで個人的メモとして書き残したものだが、何らかの参考になれば幸いです。
Beaglesの9枚目のフルアルバム mashi mashi がリリースされたのでご報告
Beaglesの9枚目のフルアルバム mashi mashi
各配信サービスより配信開始されたのでご報告。
Apple Music や Spotify、YouTube Music などなど、ご利用中の音楽ストリーミングサービスよりお聴きいただけたら幸いです。
下記のサイトにて、配信中の各サービスへのリンクが貼られているので、ご利用中のサービスでぜひお聴きください。
9枚目を出して
Beaglesも気がつけば9枚目のアルバムとなりました。
人前に出て何かをやることは殆どない音楽グループですが、こうやって活動を続けていると、色々とあったなと思ったりすることもあります。
今回でアルバムは9枚目となりますが、今の環境ならではの音が作れたなという気持ちはあります。
私はどちらかというと隣の芝生は青く見えてしまうタイプの人間なので(それを本人が望んでいなくとも)、どうしても友人・知人の活躍などを耳に入れると悔しいとか焦りみたいな気持ちが湧いてきてしまうことがあります。
Beaglesの認知度はたかが知れているし、別に世間的に評価されているというわけでもありません。
本当はBeaglesだってもっと評価されたい...みたいな制作者であれば誰もが感じる気持ちになるのも日常茶飯事です。
ただ、不思議なことにBeaglesとして作り終えた音源を聴き返すと、そのような感情はどこかに行ってしまいます。
私自身はBeaglesの音楽がとても大好きなので、たぶん音楽を聴き返すことで、そういう焦燥の念を音楽がクールダウンしてくれているのでしょう。
私の尊敬するミュージシャンの中には、自分の作ったものは二度と聞き返さない、というタイプの人もいますが、どうやら私は真逆の性格のようです。
(そういえばBeaglesを始めた理由の一つに、自分が聴きたい音楽の数をもっと増やしたい、というのがあります。元々、自分が聴きたい音楽を作りたい、という気持ちは最初から持っていたようです)
さて、9枚目のフルアルバムを最初から聴きながら、今この文章を書いていますが、改めて実に良い音楽だと思います。
最初の頃とは音や雰囲気は変わってきているけど、そこにはある種のBeaglesらしさのようなものが、まだ地下を流れる水脈のようにしっかりと息づいているのが分かります。
(もちろん、それは制作者本人故に感じ取れる部分もあるかとは思います。)
残念ながらBeaglesの認知度はまだまだ低いので、私はその問題を解決するために音楽制作とは別の面で努力が必要です。
まだ頭を悩ます場面は多いですが、それでもこれらの音楽を聴いている時、つかの間の安らぎを覚えます。
この文章を目にした方がこの音楽を聴いていただき、私と同じような気持ちになってもらえれば音楽家冥利に尽きるのですが、果たしてどうでしょう？
