カテゴリー
開発関連

久しぶりにwordpress案件

wordpressでふつーにサイト作った

最近ずっとReact案件だったのでその時のメッも

スクロールトランジション系

gsapのプラグインが増えてた。便利。 【2020年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する – to-R Media https://www.to-r.net/media/scrolltrigger/ フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう – ICS MEDIA https://ics.media/entry/200805/ 夢の膨らむ公式demo ScrollTrigger Demos https://greensock.com/st-demos/ classの管理もお手の物。 Fixed header animation at top of page https://codepen.io/GreenSock/pen/mdVyPvK

cssそろそろいろいろと使いたい

clip-path – CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/clip-path 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー | WEBDESIGNDAY
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー
前の案件ではie11使えへんやんけ!とキレたcss変数もそろそろ使おうかな (XDの吐き出す大量のソースは混乱するから今回は使っていない) あと調べると以外にまだjQuery使って 解説記事投稿してる人多くてべっくりした。別にいいやんな。って思った。

ええかげんthreeとか触っとくかな(需要が一部だけだけど

前にpixiで紙吹雪振らせてから特にそれ系はやってないな。 選出のgsapのプラグインと組み合わせると面白いのん作れそう WebGL入門 – サンプルで理解する3D表現の迫力 – ICS MEDIA https://ics.media/entry/2328/ Time Remap Demo – ICS https://ics-creative.github.io/150810_threejs_mosaic/DemoCubes.html

操作方法

使うツールが多様化するとショートカットをすぐ忘れます。 Illustratorで複雑な図形の作り方(パスファインダー) | DTPサポートサービス
Illustratorで複雑な図形の作り方(パスファインダー)
xdの距離はoption を押しながら選択 Adobe XDをもっと使いこなすヒント! 第2回 オブジェクトからの距離を計測 | Adobe Blog https://blogs.adobe.com/japan/web-xd-protips-2-measure-distance/ SVGの記述方法 – Qiita https://qiita.com/takeshisakuma/items/777e3cb0a54ea7b1dbe7 マスクを作るのに。パラメータすぐ忘れる。 video制御 (Javascript)Video要素をJavascriptで制御する – フロントサイドエンジニアという選択肢 動画ファイルサイズも聞かれるたびに調べる。 今回支給は80MBあったので流石に・・・と思ったけど。5MBか〜。 自社のWebサイトトップに動画を埋め込むときのサイズなどの注意事項 | Sokoage Magazine
自社のWebサイトトップに動画を埋め込むときのサイズなどの注意事項
カテゴリー
開発関連

(テスト投稿)観念してブロックエディタをつかってみる

そろそろええかなって

testしてみるてすてすtestしてみるてすてすtestしてみるてすてす

もはやなにがなにやらよーわからん
おおお

それならば、この郷士は暇な時 (もっとも、ほとんど一年中暇なのでしたが)、騎士道の本を熱心に読みふけって、狩猟はおろか、財産の管理さえもほとんど完全に忘れるほどだったことを彼らは知っていたに違いありません。さらに彼の情熱は何エーカーもの耕作地を売って読みたい騎士道の本を買い求めるほどで、手に入る限りの本を持ち帰ったのでした。

キャプションも入るよ

しかし、それら多くの中でも有名なフェリシアーノ・デ・シルバの作品ほど彼が好んだものはありませんでした。その文章の明晰さと錯綜した論理は、彼の目には珠玉のように思われたからです。特に、文中で恋文や決闘状に出くわしたときには「道理なき道理の前に我が道理の力も弱まり、君が美しさをつぶやくこともまた道理なり」、あるいは「高い天は、君をその偉大さに値する砂漠にふさわしく映す」というような一節をしばしば見つけたからです。

ブロックパターンはいってるし

gutenbergになってから機能がたくさん増えたので対応するためには有料テーマ必須っていわれてた(らしい)けど、そのあとWordpress案件やってなかって、こなれて来てから戻ってきた実感としては、パターンとか登録できるのならそれだけ対応すればいいし、ますますテーマ買う必要ないのでは・・・
 
あ、でもサイト全体(通常テンプレに固定で書いちゃうところ)も全部管理画面からいじりたいなら有料テーマ便利やろうな・・・
 
なので使い方が
  • バリバリにWP案件する人(一度有料テーマになれるとそれで量産できる)
  • htmlとかcssとか触らない人(管理画面からよーワカランでもレイアウトを適用できる)
  •  
ってなかんじなんやろな。  

とりあえず使用感の違いにげんなりしつつ

  • マークダウンのてすと
  • マークダウンのてすと
  • マークダウンのてすと
  • マークダウンのてすと

わっほ〜い
わっほ〜い
カテゴリー
開発関連

Docker関連

前メモったっけ?

Dockerとはどういったものなのか、めちゃくちゃ丁寧に説明してみる – Qiita
https://qiita.com/SatoshiSobue/items/a612ebbb3a9242c09db5

《滅びの呪文》Docker Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド – Qiita
https://qiita.com/suin/items/19d65e191b96a0079417

docker-composeとdockerコマンドまとめ – Qiita
https://qiita.com/tomo62/items/d966908cbc79a4c52dc7

いろいろ調べるのめんどくて再構築するのに
滅びの呪文ガンガン唱えてたら[そこまでせんでも…]みたいな反応帰ってきて恥ずかしかった。

えへへ。

カテゴリー
開発関連

え、iPad iframe埋め込みだけでインライン音無しYoutube自動再生するん・・・

検証しててびっくりした

前から?いつから??あいぱっどぅるOS出来てから?

・・・そんだけ。

びっくりして久々に調べたけどよーわからんかった。まぁそういうことなんやろ。
実機検証ダイジネ〜!

その他

【iOS/Android/PC対応】ページを開くと動画を自動再生させる方法を調べてみた | 大石制作ブログ
https://blog.s0014.com/posts/2017-12-05-autoplay/#hl4

スマホ(iOS)でも動画を自動再生させよう!(iFrame Player API、videoタグ対応) | 株式会社 エヴォワークス -EVOWORX-
https://www.evoworx.co.jp/blog/video-autoplay/

javascript — iframesとReact.js-YouTubeビデオをアプリに埋め込む方法
https://www.it-swarm-ja.tech/ja/javascript/iframes%E3%81%A8reactjsyoutube%E3%83%93%E3%83%87%E3%82%AA%E3%82%92%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95/833557315/

React.js チュートリアル[超入門] #06から#14(最終章)|山口 夏生|note
https://note.com/natsukingdom/n/n86f89b43b69d

Reactのコンポーネント内でスクロール位置を取得する · PengNote – 勉強した事や行った場所の感想を書くブログ
https://blog.daisukekonishi.com/post/react-listen-scroll/

カテゴリー
React ソフト全般(開発用) 開発関連

【gatsby-image】ワレwebP生成してくれるやんけワレェ!!【見直したわ】

実装のはざまで時間が出来たので、gatsbyで作ったお知り合いのサイトを地道に改善していくべくlighthouseで点数とか見てた。
WebP対応しろってか。変換めんどいのう、、と思ってなにげに調べたら

gatsby-image使ってたらwebP指定したら自動生成してくれるやんけワレェ!!!

https://www.gatsbyjs.com/docs/gatsby-image/#image-query-fragments

カテゴリー
私生活ログ

なぜかクリーニングについてここに書いちゃう

調べていたタブを 移動するためにいったんメモ

ちょっとくすんできた一張羅の白いスカートをクリーニングに出したくて
信頼できるところ無いかな〜と調べていた。

カテゴリー
開発関連

google document からの素材抜き出し

各社いろんな素材のやり取りの方法がありますが
初めての依頼方法だったのでメモ

画像DL

Googleドキュメントから写真や画像をダウンロードする方法 | WEBマスターの手帳

Googleドキュメントから写真や画像をダウンロードする方法

形式を指定してダウンロード→ウェブページ→zip解凍、画像のはいったimageディレクトリを確認し、必要な大きさの(サイト掲載に耐えうる最低限の大きさ以上の)画像が入っているかチェック

いろんなやりかたがあるなぁ〜

おまけ docsからmdへ

こんなのもあったしけっこうこういう依頼方法も多いのかしら・・・
Googleドキュメントから効率的にMarkdown作成【Docs to Markdown】 – Qiita
https://qiita.com/lilacs/items/450a4c14b978ddee4a88

おまけ 編集中のドキュメントの文章変更の提案を一括承認する

Google ドキュメントで編集を提案する – パソコン – ドキュメント エディタ ヘルプ
https://support.google.com/docs/answer/6033474?co=GENIE.Platform%3DDesktop&hl=ja

カテゴリー
開発関連

Netlify関連

お昼休みが終わる前にガンガン投稿しておく。タブがいっぱい開いていて重い・・・メモメモ

静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想 – suzu6
https://www.suzu6.net/posts/55-hosting-service/

Netlify概要

Netlifyの使い方入門 無料料金枠や独自ドメイン設定方法について | Simple IT Life
https://simple-it-life.com/2020/08/30/netlify/#%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A

徹底比較!Firebase vs Netlify (2018年版) – KAYAC engineers’ blog

ドメイン設定

github + Netlify + ムームードメイン(独自ドメイン)でホスティングする – Qiita
https://qiita.com/cislv/items/9678758ffe9ae74c7326

【Netlify】カスタムドメインを設定する – Qiita
https://qiita.com/NaokiIshimura/items/64e060ccc244e38d0c15

ブログの独自ドメイン化。ムームードメインの設定方法 | うしじのブログ
https://www.ushiji.online/netlify-muumuu-domain#netlify%E3%81%AE%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%AE%E8%A8%AD%E5%AE%9A

お引越し

Netlify移行記:GitHub Pagesから独自ドメイン+Netlifyの引っ越しでやったこと|おちゃカメラ。
https://photo-tea.com/p/17/netlify-github-pages-hexo/#www%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E7%84%A1%E3%81%97%E3%81%AB%E3%81%97%E3%81%9F

レンタルサーバーを乗り換えよう!トラブルなく移転するためのポイントをご紹介|レンタルサーバーナレッジ
https://knowledge.cpi.ad.jp/basic-knowledge/276/

カテゴリー
css

font-familyの旅2020

特定端末でメイリオや游ゴシックがジャギるんだよね〜って相談の流れで
デザイナーさんにもらったURLが良心と技術の玉手箱、ICSさんだった。

以前巷に溢れてた感じから結構変わってるからメモ。用法用量は案件のプライオリティに合わせて。
このあたりも毎年見直したほうがいいのかもしれない(やること増え続けるね〜

2020年に最適なfont-familyの書き方 – ICS MEDIA
https://ics.media/entry/200317/

カテゴリー
開発関連

それって本当に必要?Gatsby-imageとか。

という、githubのquestionsタグのついたissueを見て、とてもおもしろかったのだが・・・
urlどっかに消えた〜
しゅーん
内容としては、スレ主はCGデザイナーで、3Gでの表示速度の最適化や表示のときのブラーエフェクトよりも、
どうしてもKVの画像だけはいち早くDLしてほしいのに全体のloadが終わるのを待つから、Gatsby-imageは使い所えらばなきゃだよね
っていう内容。

とりあえず他のをめも

入門者でもわかるGatsbyでの画像の設定方法 | アールエフェクト
https://reffect.co.jp/react/gatsby-image-understand-for-beginner

gatsby-image browser support · Issue #4021 · gatsbyjs/gatsby
https://github.com/gatsbyjs/gatsby/issues/4021