移行後しばらくは 接続しずらかったり、何らかの不具合が発生すると思われますが ご了承ください。

あまりに不具合が酷い場合は 1度ブログを休止する可能性もあります。

2020/08/19追記

サーバー情報コピー→新サーバーに移行という流れなのですが サーバー情報コピーのが 申請してから1日経っても始まりませんｗ

終わるのに何日かかるんだろうか

2020/08/20追記

2日経ったけど まだ始まらないので サーバー側に問い合わせてみました。

2020年8月21日追記

申請から3日経って やっと新サーバーへの移行が完了しました。

申請が多くて順番待ちだったみたいですｗ

移行は完了しましたが24時間くらいはサーバー安定しないと思うので しばらくお待ちください。

先日ブログで作成で使用しているwordpressのバージョンアップと 使ってるテーマのメジャーアップデートが 同時期に行われたのですが

ブログ記事エディターの使い勝手が悪い意味で一気に変わり混乱してます

さらに テーマの方は メジャーアップデートというわけで 何らかの不具合が起こる事が想定されています。

これらの状況から 現状ブログを安定して運営出来るとは思えない状況になりましたので

しばらくの間 更新は休止して 何らかの対策を練りたいと思います。

茶熊までは復活したい所存であります(ところで茶熊は何時からなのだろうｗ)ので お待ち願いたい思います

┏○ﾍﾟｺ

白あんappについて

白あんappとは?

PWAという技術を使って ホームページをアプリ化しています

テスト設置について

これまでも何度か テストはしていたのですが 大分仕様が固まってきました

仕様変更時には再度 記事にする予定ですが しばらくは このままの形でやる予定です

インストール方法

Androidの場合

①Chromeで 白あんを開きます

②ページ下部のバナー、Chromeのメニューから ホーム画面に追加、記事下スペースのインストールボタンをタップします

プログラム上 ページ下部のバナーと記事下スペースのインストールボタンは同時には出現しません。また、ページ下部のバナーは　×ボタンを押すことで出現しなくなります

③ホーム画面に追加のポップアップが出るので 追加を押すと インストールが始まります

IOS(iPhoneやiPad)の場合

①Safariで 白あんを開きます

②Safariのメニューから ホーム画面に追加を選びます

③追加を選択します

アンインストール方法

各々のOSに合わせた アプリ削除方法でアンインストールできます

という 新年の抱負でいきます…♪*ﾟ

本年もよろしくお願いします

【白猫】所持チェッカーテスト

白猫プロジェクトに登場するキャラの　所持チェッカーテストです

white-cat-project.an-channel.com

テストページはこちらになります

今週中には完成するはず‼

多機能にするより シンプルで軽い方向性に作ることにしました。

ねむすぎ日記

主にWeb関連ですがそうでない時もあります。簡易版のねむすぎノートもあります。

nemusg.com

こちらのサイトのを参考に 作ってますw

本当はブログに埋め込む形で作りたかったのだけど JSが バッティングしてるのかなんかで 上手く動作せず 結局別に作ることにしました

おかげて HTMLもCSSも1から手打ちする事にw
予定より時間かかる

wordpressの各種便利ツールには お世話になってるんだなぁーと 改めて思いましたw

概要

シェア用にURLとタイトルを 1タップでコピー出来る『URLとタイトルのコピーボタン』という物を設置していたのですが テンプレートでほぼ同じ物が実装されたので そちらを採用して 撤去しました。

今後別の機会に同じようなボタンを設置するかも知れないので メモ書きしておこうと思います。

ちなみに こんなボタンの事です

さようなら ドスエハン
(*￣▽￣)ﾉ~~ ﾏﾀﾈｰ♪

JS

<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copy_btn');
    clipboard.on('success', function(e) {
    jQuery(".copy_btn").addClass('copied');
    jQuery(".copy_btn span").text('コピーしました');
    jQuery(".copy_text").slideDown('slow');
});
    clipboard.on('error', function(e) {
    jQuery(".copy_btn").addClass('copied not-copied');
    jQuery(".copy_btn span").text('コピーできませんでした');
    jQuery(".copy_text").slideDown('slow');
});
</script>
<script>
jQuery('#copy_textbox').on('click', function(e) {
  e.target.setSelectionRange(0, e.target.value.length);
});
</script>

functions.phpに記入

//タイトルとURL取得のショートコード
function myshortcode_copy_btn() {
$title = wp_get_document_title();
$url = get_permalink();

return '
<div class="copy_main">
<div class="copy_btn" data-clipboard-text="'.$title.' '.$url.'">
<i class="fa"></i><span>この記事のURLとタイトルをコピーする</span>
</div>
<div class="copy_text">
<div>お使いの端末ではこの機能に対応していません。<br />下のテキストボックスからコピーしてください。
</div>
<form><input type="text" id="copy_textbox" value="'.$title.' '.$url.'" /></form>
</div>
</div>
';
}
add_shortcode('copy_btn', 'myshortcode_copy_btn');

HTML①

<div class="copy_main">
<div class="copy_btn" data-clipboard-text="<?php echo wp_get_document_title(); ?><?php echo get_permalink(); ?>">
<i class="fa"></i><span>この記事のURLとタイトルをコピーする</span>
</div>
<div class="copy_text">
<div>お使いの端末ではこの機能に対応していません。<br />下のテキストボックスからコピーしてください。
</div>
<form><input type="text" id="copy_textbox" value="<?php echo wp_get_document_title(); ?><?php echo get_permalink(); ?>">
</form>
</div>
</div>

CSS

/******
タイトルとURLをコピーする
**********************************/

.copy_main {
margin: 0 0 1em;
text-align: center;
}

.copy_btn {display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #fff;
border: double 4px #333;
border-radius: 3px;
transition: .4s;
text-align: center;
line-height: 1em;
cursor: pointer;
font-size: 0.8em;
}

#sidebar-menu-content .copy_btn copied{
margin-bottom: 20px;
}

.copy_btn i:before {
display: inline-block;
margin-right: 8px;
content: '\f0c5';
font-size: 1.3em;
}

.copy_btn:hover {
opacity: .7;
}

.copy_btn.copied {
border: double 4px transparent;
background: #0095d9;
color: #fff;
pointer-events: none;
}

.copy_btn.copied {
cursor: auto
}

.copy_btn.copied i:before {
content: '\f00c';
}

.copy_btn.not-copied {
background: #d90028;
}

.copy_btn.not-copied i:before {
content: '\f06a';
}

.copy_text {
display: none;
overflow: hidden;
}

.copy_text div {
margin: 15px 8px 0;
font-size: 13px;
line-height: 1.2em;
}

.copied+.copy_text div {
display: none;
}

.not-copied+.copy_text div {
display: block;
}

#copy_textbox {
margin-top: 10px;
width: 100%;
border: 1px solid #333;
border-radius: 3px;
font-size: 16px;
}

今回は 直面した AMPページの画像問題についての日記

ご挨拶

お久しぶりです。
管理人のアンさんだよ(￣▽￣)

ここ１週間 やっとブロクを書き始めました

多数のアクセスありがとうございます。
予想より多くのアクセスをいただいて 驚いてます
白猫もまだまだ行けるね
.｡ﾟ+.(･∀･)ﾟ+.ﾟ

というわけで
まだ 試行錯誤しながらなので 書きたいことは 全然消化出来てませんが 本格的に運営開始です

最近の白あん

ここ2週間(記事だけではなく デザインなども含めて)怒涛のペースで更新しましたw

(デザイン面の)更新は 自分用メモも含めて 運営日誌に 書く予定だったんですけど
白猫のイベントペースが 想定の1.5倍くらい濃密で 書く暇なんてありませんでしたw

今後はちょくちょく書けたらな とは思っております

今回抱えた問題

当ブログは アクセスして頂いたユーザー様が より快適にご利用頂けるよう ＰＣ スマートフォン タブレットで各々表示方法を変えています
(これについては いつか書こうと思う)

さらに ＡＭＰも 採用しているのですが 今回はこれが問題に

ＡＭＰって なんぞや？

良く聞かれます(笑)

Accelerated Mobile Pages 略してＡＭＰ

簡単に言うと 通常のホームページと比べて 使える機能は落としてるけど その分爆速表示を可能にする プログラムの事です。

基本的に スマホからのアクセスを想定して作られてます

爆速な分色々制限やルールが あるのが問題です。

このマークがあれば それはＡＭＰ

GoogleやYahoo検索で このマークが 付いてるのが ＡＭＰページです

今はTwitterからのアクセスも ＡＭＰページが用意してあれば ＡＭＰページに飛ぶようになってますね

ＡＭＰのコンセプトと 実情

しかし このＡＭＰのコンセプトは 低回線である 3G環境への適応です

4GやWiFiが 世界トップクラスに発展してる日本では あまり需要ない気がしますw

実際 白猫のゲーム攻略サイトだと ファミ通やゲームwithやアップメディア(敬称略)も 一時期ＡＭＰページ作ってましたが 速攻辞めてましたねw

ＡＭＰの画像表示に 問題が

今回の悩みの種になってる部分を解説しますw

タブレット(ＰＣ)表示

見やすい‼

スマホ(通常ページ)表示

端末の横幅に合わせて 星たぬき画像が縮小されて 全体は見やすい

そして ＡＭＰ表示

・・・・・・

星たぬきの画像大きすぎ問題‼

通常ページのようには 画像が 縮小されませんでした

それにより 右側の文字が 狭い範囲で表示され見づらいですよね これw

その後 試行錯誤して 良い感じにおさまる方法模索しました

結論:ＡＭＰにするページと しないページを 作る

前述の通り 日本では そこまでメリットのないＡＭＰページなので

• デザイン的に見づらくなるページ
• ＡＭＰページにする事で むしろ表示が遅くなるページ

などは ＡＭＰページ作らない方向に決まりました

1画像ずつ 細かく設定していけば ＡＭＰでも 見やすい表示は可能なのですが 作業効率が 悪すぎるので こういう結論になりました

補足宣言

ユーザー様が 出来るだけ快適に利用して頂けるよう
爆速表示や通信量の削減というメリットも あるＡＭＰページを 今後も出来る限り採用していくつもりです

でも ちゃんと下準備はしてますw
目標は 茶熊までには 営業開始するぞなのです。

こんな感じで 運営に使えそうな画像も たんまり仕込んでますw

今回から 運営日誌を開始します。

運営日誌カテゴリーについて

このカテゴリーでは ブログの方針 ブログに手を加えた部分 ブログに備わってる機能の説明などなど ブログ運営に関わってるものを 書いていきます
(〃・д・) -д-))ﾍﾟｺﾘﾝ

現在のブログの状態は

2017年10月28日現在
殆ど全てのブログに関する物事が 中途半端な状態です。
((((；ﾟДﾟ))))

個人で運営してるので 色々更新が進まず 書きたいこともなかなか書くまでいたらないのですが
なんとか効率化を行って 徐々に納得出来るレベルまで充実させる つもりです。
(年内には←)

今はその過程を楽しんで 頂けたらなと
(￣▽￣;)

今日やったこと＝カテゴリーの整理など

ひとまず今日は カテゴリー周りの最適化を行いましたよ‼

イベント毎に カテゴリー作ってるけど そのうち膨大な数になる予感もするので そこは悩ましいです
(まだ 内容ほとんどないけど)