カテゴリー別アーカイブ: html

SVGを使って画像や動画をマスクしたいけどclip pathはまだまだ使いづらい?

どうにもこうにもclip pathが使いづらい。
センターにどうやって置くの?かさえよくわからない。

知識が無いならば力技発動。

要は見た目がマスクならいいじゃない。
そこで考えたのが動画(画像)の上にカバーするように見えたい部分を抜きにした画像を重ねちゃう。

少しだけ頑張った?のが画像じゃなくてSVGでマスク。拡大されても大丈夫なように。

イメージはこんなかんじ。

20160222

 

で、後はVIDEOタグ等で動画を設置して、その後にdiv class=”mask”的な空要素を置く。

<video class="mask" autoplay loop >
<source src="mask.mp4">
</video>
<div id="mask"></div>

CSSは特に装飾とかをしないのであれば

#parent{
position:relative;
overflow:hidden;
}
video{
width:100%;
height:auto;
position:relative;
}
#mask{
position:absolute;
width:100%;
left:0;
top: 0;
height:100%;
background:url(mask.svg) no-repeat center center;
background-size:cover;
}

SVGを作るときに余白を考えながら書き出さないと上記サンプルの背景黒部分が表示されないので注意。

汎用性ゼロな対応・・・

contact form 7とさくらサーバーの相性がよろしくない?

WordPressの問い合わせフォームとしては良く利用するcontact form 7。

大抵使用します。特に問題も無いし。

で、初めて問題発生しました。

再現性をテストしきれていないので、なんとも言えないがさくらサーバーで取得していないドメインをさくらサーバーに割り当てた状態のWordpressサイトでコンタクトフォームの管理者宛のアドレスを以下のようにすると500 Internal Server Errorが返ってくる。

例)
サイトURL:http://hogehoge.com
問い合わせの内容が届く管理者アドレス:info@hogehoge.com

こんな風にしちゃうと500 Internal Server Error の嵐。

管理者アドレスをGmailとかに変更するとそのエラーは無くなるので原因はここであることは間違いない。

が、Google先生に聞いても皆困ったばかりで回答が見つからず。

とりあえずテスト段階だが、MW WP Formを利用すれば問題ないっぽいのでそちらを利用してみる。

wordpressの自動アップデートでエラーが発生!サイト閲覧も管理画面も入れない。

wordpressの自動アップデート機能。
基本的にはあまり意識していないんだが、初めてのエラー報告。

まずは急にサイトが見られなくなったということでHPを見に行ったら以下のようなエラー文言が。PHPの怖さですな。

ワードプレスインストール先フォルダ=サイトパスですね。http~~じゃなく。/homeとかのやつ。

Warning: require(ワードプレスインストール先フォルダ/wp-includes/class-wp-roles.php) [function.require]: failed to open stream: No such file or directory in ワードプレスインストール先フォルダ/wp-settings.php on line 125

Warning: require(ワードプレスインストール先フォルダ/wp-includes/class-wp-roles.php) [function.require]: failed to open stream: No such file or directory in ワードプレスインストール先フォルダ/wp-settings.php on line 125

Fatal error: require() [function.require]: Failed opening required ‘ワードプレスインストール先フォルダ/wp-includes/class-wp-roles.php’ (include_path=’.:/usr/local/php/5.3/lib/php’) in ワードプレスインストール先フォルダ/wp-settings.php on line 125

フロントエンジニアというオシャンティな言葉を利用させてもらいつつ、こういったエラーが出ると脇汗たっぷりな訳で。

クライアントはサーバーに入って何かをする訳が無いので、WPもしくはプラグインのアップデートされたからかなーとおおまかな予想をしつつgoogle先生に質問。

質問。

質問。

なかなか見つからない。
検索が下手なだけってこと。

ようやく見つけました。

ワードプレスをアップデートしたらログイン出来なくなった人へ


勝手にリンクさせていただいているので問題ありましたらご指摘ください。

wordpress4.4にアップデートしたけどファイル足らないよってオチらしくファイルを追加しなければならない。
が、該当ファイルだけでは動く訳もないので最新のWPを落としてきてサーバーにアップする必要があります。

注意するのはリンク先のサイトでもありましたが
wp-content
wp-config.php

この2つだけは手をつけない事。

あとは上書き(自分は怖かったので古いファイルを別名にして保存)

で、管理画面にアクセスするとDB更新すっか?と聞かれるので更新。
今までと同様にサイト表示、管理画面にアクセスすることができるようになりました!

index.phpに関してはwpのインストール先と分けている人は上書きだとパスがずれるので注意しないとです。

liやDivで並べた要素を表示のたびにランダムRandomで並び換えをしたいとき

都度調べては忘れるので備忘録として書いておく。

JQueryなどで特定の要素内の子要素を並び換えしたいときに簡単に実装可能。

var ar = $('#親要素').children();
ar.sort(function(){
return Math.random()-Math.random();
});
for(i=0; i < ar.length; i++) {
$('#親要素').html(ar)
}

これで並び換え完了。のはず。

SVGファイルを作る時に気をつけておきたいこと。Illustratorさん、これは気付きづらいよ!

とある案件で、PCでのチェックはOK、IphoneもOK、AndroidもOKとチェックも終わったなーと思ってたらAndroid4.0の機種でSVGの背景画像が表示されていないという現象が。

他のSVGは表示されている(過去に他の方が作成済み)ので対応していない訳ではない。だがファイル自体はちゃんとアップされている。
別にCSSに何か記述忘れがあるわけではない。

前担当の方に確認をしたらすぐに判明。

IllustratorでSVGを作成し、保存する際にウインドウが出るのだがオプションというトグルが存在していた。こんなところは普通触らない箇所なんだが、そこに大切な項目がありました。

upload

この「レスポンシブ」っていうところ。

これに基本的にはチェックが入っているが、これが入っているせいで作成した際のサイズを律儀に守ってしまうことがあるらしい。

ベクターデータだし、CSSでbackground-size指定すればいいんだから大きめて作っちゃえーとやってしまうとこの罠にはまる。

よりによって白いアイコン作っていたから背景と同じ色でろくに気付けず。

今後はリアルに使用するサイズ感で作成することを心がけねば。。

※これを外すことでどんな影響が出るのかまだテストしておりません。※

iphoneの画面サイズを機種ごとに知りたい

さすがは海外。
ちゃんと用意されているんですね。

以下、参考サイトです。
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

もうレスポンシブでやるとしてもこんがらがります。
デザイナーが1パターンのPSDしか作っていないと、幅が広がった時の想定が分からないので苦しいですね。

今さらながらSSI(Server Side Include)を体験

WPなどを使用しているとヘッダ、フッターと別ファイルなので意識しないが静的ファイルでサイトを作成するときはDWではテンプレを作成してファイルの共通部分を固定化しております。

ちょっと他の案件でファイル貰ったらssiを利用しておりました。
やってることはWPとかと同じだけど、静的なhtmlなのに同じようなincludeファイルができるんですね。

shtmlなどに拡張子を変える必要があるみたいなのだけども、htaccess内に「AddHandler server-parsed .html」を追記すればhtmlでも問題無くincludeしてくれる模様

ロリポップサーバー
X-serve
で確認ずみ。

ロリポップではサーバーのセキュリティ的に該当ファイルまでは「実行ファイルまでのパスを絶対パス(フルパス)で指定すると動作出来ません。」とのこと。

<!--#include virtual=/*****/????.html -->

的な。