当社ではいつか募集することになるんです。
毎年募集しています。
その募集サイトをペライチから完全移植することになりました。
ヘッダとフッタは従来の会社HPのものと同じ
めんどくさい、ではなく、会社内でもデザインが統一感があると、安心も感じられるのではないかと思います
無駄に4K対応
4K画面で正しく最大化されてもきちんと閲覧できるように配慮
無駄なギガは使わない
画像の横解像度リストは、今回は以下の通りです
3840,2600,2160,1920,1680,1284,1100,992,810,768,750,576,512,428,414,412,375,312,288,256,214,207
もちろん、perl と b-shellでMakefileを作って生成するのですが
ペライチからダウンロードしたものが
Internet Explorer （これだけの為にまだ現役です）での、サイトダウンロード機能でダウンロードしてみたのですが
- JavaScript 637,684bytes
- CSS 371,794bytes
こんなにあってびっくりです。
こりゃ、ペライチは重いわ
そういえば画像もダウンロードしたのですが
これは担当君が悪いんです。
横300ぐらいで必要な画像が、横1200とか解像度あったりとか
まぁ、オリジナル画像はゲットできたものの、
これでWebサイト表示する側は重さで怒りが溜まらない
ペライチはwebpとかavifに対応してない
ということで、おなじみの画像変換をして
直接HTML書かせたくないから、こんな状態に
ペラのページは16セクションありました。
Wordpressのメニューに搭載すると、こんなに膨大に
完全にスタイルがCSSに依存するように、きれいなHTMLを書くためには、これしかなかったのです。
うちの会社の担当君なら、
タグをいっぱい連続させそうで。。。。
ペライチから出力されたHTMLは解析しずらい
まぁ、一応商用サービスですしね。
全く同一のものを全く別の記法で記述
でも、ホームページビルダーの自由配置モードよりは一応はマシ
Wordpressは、ただの特化型記事エディタになったわけです。
でも、それが本来あるべき姿なのかもしれません。
投稿も、固定ページも１つも書かず
唯一使ったのは、Contact Form 7
JavaScriptでAPIから状況が帰ってくるので、使いやすいです。
これだけでうまく動くかわかりませんが、↑のコードだけでも提示してみます。
script.js
/* 足りない関数は補完のこと */
var _footermenu = $(".footerFloatingMenu"),
popuparray=[],
popupflg=0,
popupopen=undefined,
func0, func1, func2, func3,
contactcook="test";
function popup(array) {
if(array !== undefined)
popuparray.push(array);
}
function popupview(mode) {
if(mode == "open") {
if(popuparray[popupflg] !== undefined) {
if(popupopen === undefined && popuparray[popupflg][1] > -1) {
/* フォント読み込まない
if(!popupflg) {
// ↓Google Web Fonts から Material Icons を読み込み
var iconcss = document.createElement('link');
iconcss.href = '//fonts.googleapis.com/icon?family=Material+Icons';
iconcss.setAttribute('rel', 'stylesheet');
document.head.appendChild(iconcss);
}
*/
var timer= popuparray[popupflg][1],
color= popuparray[popupflg][2],
str = popuparray[popupflg][3];
str='<p class="popupClose"><span></span><span></span></p>' + str;
func0= popuparray[popupflg][4],
func1= popuparray[popupflg][5],
func2= popuparray[popupflg][6],
func3= popuparray[popupflg][7],
_footermenu.css("background",color);
_footermenu.html(str);
_footermenu.addClass('open');
if(timer > 0) {
enableclose=1;
setTimeout(function() {
popupview("close");
}, timer);
} else
enableclose=0;
popuparray[popupflg][1]=-1;
popupopen= popuparray[popupflg][0]
popupflg++;
}
}
}
if(mode == "close") {
if(func0 !== undefined)
func0();
_footermenu.removeClass('open');
setTimeout(function() {
popupopen=undefined;
_footermenu.html("");
popupview("open");
if(setting_reload)
document.location.reload();
}, 500);
}
}
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
popup(mailsent(
resc('forminput'),
"rgba(127,127,0,0.8)"
));
popupview("open");
$('input[type="submit"]').each( function() {
var t=$(this);
setTimeout(function() {
t.prop('disabled', false);
t.val(resc('send'));
}, 300);
});
}, false );
wpcf7Elm.addEventListener( 'wpcf7spam', function( event ) {
popup(mailsent(
resc('formspam'),
"rgba(192,0,0,0.8)"
));
popupview("open");
$('input[type="submit"]').each( function() {
var t=$(this);
setTimeout(function() {
t.prop('disabled', false);
t.val(resc('send'));
}, 300);
});
}, false );
wpcf7Elm.addEventListener( 'wpcf7mailfailed', function( event ) {
popup(mailsent(
resc('formerror'),
"rgba(127,107,10,0.8)"
));
popupview("open");
$('input[type="submit"]').each( function() {
var t=$(this);
setTimeout(function() {
t.prop('disabled', false);
t.val(resc('send'));
}, 300);
});
}, false );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
popup(mailsent(
resc('formcomplete'),
"rgba(10,107,149,0.8)"
));
popupview("open");
$("textarea").trigger('autoheight');
$('input[type="submit"]').each( function() {
var t=$(this);
setTimeout(function() {
//t.prop('disabled', false);
t.val(resc('sent'));
}, 300);
});
}, false );
function mailsent(msg, color, flg) {
return [
"contact",
9999,
color,
flg === undefined ?
sprintf(
"<p>" + resc('formmsg') + "</p><p>%s</p>"
, msg
)
: sprintf("<p>%s</p>", msg)
];
}