サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
衆院選
myscreate.com
こんにちは、ma-ya’s CREATE[まーやずくりえいと]です。 日曜の深夜、寝れません。 このままだと月曜の勤務が地獄ですがブログでも書こうと思います。 近年流行りのCI/CD技術ですが、このサイトもその流れに少しでも乗りたいな、と思い色々と試しておりました。 先日作ったアプリ「俺のホッピー居酒屋管理帳」なんかはFirebaseにホスティングしていたので、GitHub Actionsによる自動デプロイも簡単でした。※GitHub→Firebaseへの自動デプロイ方法はこちらの記事で紹介しています。 しかしAmazon Lightsailにのせているこのサイトには苦戦を強いられ、ググりまくって半日以上費やしても一部の不具合に悩まされ続けた結果(具体的にはデプロイ用のPHPファイルが実行できない)、まったく別のアプローチを試したら「アッ!」という間に自動デプロイできたのでご紹介します。
こんにちは、ma-ya’s CREATE[まーやずくりえいと]です。 たまーに実装するクリッカブルマップ。 もう枯れた技術になりつつあるのか、レスポンシブ対応するとなるとプラグイン選びが意外と悩まかったりします。 定番の「jQuery RWD Image Maps」が正直微妙 長く定番だった「jQuery RWD Image Maps」ですが、時代は脱jQuery。 案件によってはパフォーマンスなどの観点から、jQuery非依存でレスポンシブなクリッカブルマップを実装したいんじゃ! というシーンも少なからずあるんじゃないかと思います。 ただこのプラグインにはそれ以外にも(個人的に)致命的に使いづらい点があります。 jQueryのバージョンに依存する 「jQuery RWD Image Maps」は古いプラグインのため、jQueryのバージョンが新しいと動作しないケースがあります。 ※jQu
モーダルウインドウを背景固定にしてスクロールバー分のガタつき問題を解決しつつ、iOS Safariにも対応してしかもjQuery非依存にしたいワガママなアナタへ捧ぐ愛のコード JavaScript こんにちは、ma-ya’s CREATE[まーやずくりえいと]です。 もはやモーダルウインドウの実装なんて当たり前の要件となってきた昨今、 サクッとプラグインを使えば、世の中の優秀なフロントエンド開発者が実装した機能を簡単に使うことができますね。 ただそれでも、JSに対する興味や情熱から、自前のコードで実装したいなんてこともあるかもしれません(無い?)。 今日はそんなお話。 追加機能が増えると意外と悩ましいモーダルウインドウの実装 モーダルウインドウは単に表示するだけならかなりシンプルに実装が可能です。 過去当サイトでは以下の通りjQuery版・jQuery非依存版で超シンプルなモーダルウインド
こんにちは、ma-ya’s CREATE[まーやずくりえいと]です。 こまのんVue(※こま(けぇこたぁいいんだよ)のん(びり)Vue(.js超入門))第3回。 第1回、2回ではちっとも楽しさを感じられなかったVue.js。 今回、もしかするとそんなあなた(そしてぼく)のアンテナがピクリと反応するかもしれません。 ディレクティブによるデータバインディングとメソッド 後述しますがディレクティブというのはHTML中に出てくるv-○○の部分のこと。 vueでアレコレするためにHTML側から出すサインのようなものです。 イメージの湧きにくい横文字かもしれませんがただそれだけのことなんで、まずはソースを見ていきましょう。 Resultもいじって見て下さい。 やっていること ボタンクリックでイベントを発生させる そのイベントでテキストを「ごちそうさまでした」に変更 そのイベントでボタンテキストを「済」
CSS transform / opacity / transition 周りの意図しない挙動・不具合・バグフィックスまとめ [ 随時更新 ] CSS こんにちは、ma-ya’s CREATE[まーやずくりえいと]です。 要素をアニメーションさせる時に毎度お世話になるCSSのtransformやopacity。描画とロジックをCSSとJSに分離するためにも、なくてはならない存在だと思ってます。 しかし多用した場合、他のソース部分と干渉して意図しない挙動になることもしばしば。毎度毎度調べるのも面倒なので記事で簡潔にまとめていくことにしました。 あくまで自分用メモなので解説は少な目かつ順不同です(苦笑)。 意識しておいた方が良い前提 transformやopacity指定をした要素はスタックコンテキストを生成する スタックコンテキストとは何ぞや?というのはMDNさんにでもお任せするとして… 重
こんにちは、ma-ya’s CREATE[まーやずくりえいと]です。 個人的にテキストアニメーションが好きです。 このサイトでも「Textillate.js」というプラグインを使用してますが、もっとさりげないエフェクトのものが欲しいな〜と思っていました。 Textillateもいいんですけど、ちょっと動きが大げさなんですよね。 というわけで。 エフェクトも実装もシンプル!軽量テキストアニメーションjQueryプラグインを作ってみた 多機能ではないですがちょっとしたJSとCSSの記述で使用できます。 名付けて「Textyle.js」(テキスタイル)。 シンプル機能なので当たり前ですがサイズも1KB以下と軽量です。 詳細は後述しますが、上下左右(斜め含む)からの移動とフェードが可能。エフェクト後に発生させるコールバックの指定も可能です。動きは↓こんな感じ。 特徴 指定要素内テキストをプラグイン
コピペで実装!脱jQueryでも簡単モーダルウィンドウ[HTML / CSS / Javascript] CSS こんにちは、ma-ya’s CREATE[まーやずくりえいと]です。 以前書いた↓の記事。おかげさまでこのサイトトップクラスでアクセスの多いエントリーとなっていますmm コピペで実装!モーダルウィンドウのサンプル[HTML / CSS / jQuery] 非jQuery依存のモーダルウィンドウサンプル 脱jQueryが叫ばれて久しいですが、今回は非jQuery依存のモーダルウィンドウサンプルとしてコードを書き換えてみました。 機能的には以前と同様。 最低限のスタイリング&領域外クリックでモーダルクローズ機能を備えています。 見た目は好きにカスタマイズしてもらえれば宜しいかと。 よくわからない方も安心して下さい。コピペで使えますよ(ニッコリ)。 [注意(iOSデバイスでデモを確認
こんにちわ、ma-ya’s CREATE[まーやずくりえいと]です。 依頼されているサイト制作中です。 制作中にふと、カスタムフィールドを設定してトップページのループ外の場所でフィールドの値を取得したくなりました。 ので、メモも兼ねてここに記しておきます。 ちなみにカスタムフィールドの生成はAdvanced Custom Fieldsで行っていることが前提です。 トップページからカスタムフィールド値を呼び出す(ループ外) ケースとしては、トップページにyoutubeの埋め込み動画を表示させるのをテンプレート直書きではなく、設定箇所を設けて表示させたかったのです。 その方がクライアントもわかりやすいし、テンプレートを直接触らせるリスクも回避できるし一石二鳥なわけです。 大まかな流れとしては下記のような感じで対応しました。 設定専用の固定ページを作成 カスタムフィールドを新規作成 フロントペー
こんにちわ、ma-ya’s CREATE[まーやずくりえいと]です。 様々な条件で要素を指定できる疑似クラス。便利です。 大体が感覚的に使えてわかりやすいんですが、一部気を付けるべきものもあります。 何となくどういう挙動をするかはわかっていても、実際使ってみると???となることもしばしば。 というわけで今日はnth-of-type疑似クラスのちょっとした注意点です。 nth-of-type指定が意図する挙動と違う!その仕様とは 考え方・前提として、名前の通りこの疑似クラスは指定した要素のタイプに深く関係します。 んで、これがわかっていないと下記のような使い方をした場合に混乱してしまいます。 See the Pen nth-of-typeがうまく効かない?? by mycreatesite (@mycreatesite) on CodePen. 上記ではtargetという名前を付けたクラス名
2019/1/11 記事内容を大幅に加筆・修正しました。 こんにちわ、ma-ya’s CREATE[まーやずくりえいと]です。 youtubeの埋め込み動画をサイトに設置したいときありますよね。 そんな時は簡単です。見たい動画のページから埋め込みコードを取得してソースに張り付けるだけ。 簡単ですね、ではさようなら。 と、そうは問屋が卸しません。 youtubeの埋め込みはたとえ一つでもサイトに大きな悪影響を及ぼすことがある? そうなんです。ざっくりと箇条書きにすると 埋め込みyoutubeの読込中はサイトの動きが止まるor瞬断される サイトのレイアウトが一瞬狂うことがある そもそも読込処理が重い たまにコンソールでエラーが出る サイト評価がすんごい下がる ※上記はいずれもブラウザ未キャッシュ時の挙動、そして可能性の話です。あしからず。 ブログなどの投稿ページだったらもうどんどん貼っちゃって
こんにちわ、ma-ya’s CREATE[まーやずくりえいと]です。 モーダルウィンドウ(ポップアップウィンドウ)の実装はついついプラグインに頼りがちですが、そういったものに頼らずに実装するケースもあります。 その度に一からコーディングするのも少し手間なので自分用も兼ねてプレーンなモーダルウィンドウのサンプルコードを残しておきます。 プレーンなモーダルウィンドウサンプル モーダルにも色々な仕様があるので実際は仕様に合わせたカスタマイズが必要になると思いますが、本当にプレーンなもので良ければ↓のコードそのままでもいいかと。 必要に応じて各指定を要カスタマイズです。 最低限ですが、領域外クリックでモーダルを閉じる機能のみ付けています。 See the Pen pure modal by mycreatesite (@mycreatesite) on CodePen. ↑をカスタマイズしたものが
introduction 東京を拠点とするWEBデザイナー、ma-ya’s CREATE[まーやずくりえいと]といいます。都内の事業会社でWEBデザイナーとして勤務しつつ、休日はWEBで遊ぶかお酒(ホッピー)を呷って過ごします。WEB制作は半分趣味。WEBから印刷系デザインまで、やれそうなことなら何でもやりたい派。シンプルでスマートな中にほんのりとポップさを感じるデザインを基本に置きつつ、ダイナミックな表現や異なるテイストを出せるように奮闘する、気づけばアラフォーのいいオッサンです。 gallery
このページを最初にブックマークしてみませんか?
『ma-ya's CREATE / WEB DESIGN』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く