vue.jsとreact.jsをお触りしているのですが?。

2020.02.13

Logging

vue.jsとreact.jsをお触りしてみて、どちらが難しいかといえばreact.jsかなと思いますが、すごく難しいわけでもない。vue.jsはjqueryがサクサク使えていて概念も大体把握していて、オリジナルプラグインも作れるよという方にはそれほど難しいとは感じないと思います。vue.jsの概念さえ理解できればあとは、vue.jsの仕様やドキュメントみれば、慣れれば使いこなす事は簡単だと思います。

The All-New MICROSOFT EDGE Browser – Is It Any Good?

react.jsは、JSXの事をちゃんと理解すれば使いこなす事はまぁ可能かなと思います。いま、web業界ではreact.jsとかゴニョゴニョ使える人が重宝されるみたいですよ。というか、もうjqueryとかオワコンと都会では業界人が言ってそうですね。ただ、そんな古いコードが田舎では動いてますし田舎の零細企業では、未だにIEの事をいう人がいる。そろそろIEの呪いから解き放たれたいですね…。マイクロソフトはいまの社長さんになってかなりマイクロソフト変わったのでWEB業界では、有り難い存在だと自分は勝手に思ってます。

マイクロソフト コーポレーション CEO サティア ナデラ Tech Summit 基調講演 | 日本マイクロソフト

タグ

IE, jquery, JS, JSX, react, vue, web, あと, いま, オリジナル, オワコン, かな, コード, ゴニョゴニョ, ドキュメント, どちら, プラグイン, マイクロソフト, わけ, , , 仕様, 企業, 可能, 呪い, 大体, 把握, , 業界, 業界人, 概念, 理解, 田舎, 社長, 簡単, 都会, 重宝, 零細,

webpに対応しましたプラグインでカバーしました。 Safariめ!!

2020.01.25

Logging

WebP Express(ウェッピーエクスプレス)というWordPressのプラグインがあるので、そちらでコンバート(変換)すれば良いのですが、大量に画像があるサイトはそれで変換できないので下記の対応方法で対応をお願いします。

1. WebP Express使用してコンバートする際に webpが生成されます。webpの生成場所を確認する。現在は下記の配下にwebp画像が作られています。

/wp-content/webp-express/webp-images/doc-root/wp-content/uploads

2.1の配下にwebpの画像を生成するために下記のコマンドを実行します。自分の場合、アップロードしている画像をリスト化して一括処理するプログラミングを実行しました。尚、cwebpがインストールされていない場合、インストールする必要があります。さくらレンタルサーバーには入っているみたいです。

cwebp -q 90 元画像名(階層を含む).png -o 変換後のファイル名.webp (変換先の階層を含む)

こうすることで画像は全てwebpに変換することが可能ですが、これだけでは表示が切り替わらないので下記の画像を参照しプラグインの設定を変更してください。

ちなみにこのwebp(ウェッピー)はグーグルさんが開発したものらしいです、大体のブラウザが、こちらの webpに対応しているのですがSafariとIEは非推奨みたいなんですよね。何れwebpに対応すると思います…思いたい。

タグ

, 2.1, cwebp, doc-root, Express, Safari, uploads, webp, webp-express, webp-images, WordPress, wp-content, アップロード, インストール, ウェッピーエクスプレス, お願い, カバー, コマンド, コンバート, サーバー, サイト, さくら, そちら, それ, ため, プラグイン, プログラミング, リスト, レンタル, 一括, 下記, 使用, 処理, 場合, 場所, 変換, 大量, 実行, 対応, 必要, 方法, 現在, 生成, 画像, 確認, 自分, 配下, ,

WordPressのメディアライブラリについて愚痴る。

2020.01.08

Logging

過去のデータベースを引き継いでいればメディアライブラリのデータは
壊れないが、途中でXMLなどデータをインポートすると
メディアライブラリでは管理出来なくなってしまう。

これを呼び戻すには Add From Server やmedia from ftpなどのプラグインを
使用して呼び戻すしか無いようだと思っていたが、唯これをしてしまうと
いささか問題があるので使えない。
このプラグインは基本的に新規で構築する際に
画像をFTPで一先ず一括アップロードして使用する場合などに対しての
プラグインである物なのでいささか違う。

なので今回、自分で自作しようと思っていたが、、、
特に過去の画像を編集するつもりもないので辞めた。
ちなみにメディアライブラリの画像はwp_postsとwp_postmetaに
保存されている。

下記のURLを見て昔、これでトラブルになった事を思い出した。
WordPressで画像はどのようにデータベースに記録されているか

上記のようなことから、データベースの画像の欠損を復元するのは
正直なところ面倒。投稿データには大体、データは残っているのだが
メタデータが欠損していてメディアライブラリに表示されないということが
殆どだと思うが、このメタデータを復元するのは至難、なぜなら
投稿データって使っているIDとメタデータのIDのリンクを上手く結びつける
事ができないからとてもエンジニア泣かせである。

要するにメタデータIDの方が以前使っていたIDを別の要素のIDが
使っていたりして…。
これを整理しながら元に戻すのは非常に至難だと言うこと。

なので、結論を言えばちゃんとデータベースのバックアップ取りましょう?

タグ

Add, from, FTP, media', postmeta, posts, SERVER, url, WordPress, wp, xml, アップロード, インポート, これ, つもり, データ, データベース, トラブル, プラグイン, メディア, ライブラリ, 一括, 下記, , 今回, 使用, 保存, 問題, 場合, 新規, , 構築, , 画像, 管理, 編集, 自作, 自分, 記録, 途中, 過去, ,

ワードプレス電光掲示板プラグインを作りました。

2019.12.05

Logging

電光掲示板(お知らせ)のプラグイン取扱に関して記載します。

プラグインに関してはワードプレス5.2以降を推奨としテーマファイル(外観)のheader.phpのbody直下に下記の記述が存在しない場合は追加記述を
お願いいたします。

<?php wp_body_open();?>

尚、プラグインのソースコードはご自由に変更頂き二次配布も構いませんが
ひとつ注意事項があります。参照した記事にリンクを貼ってください、
なお、事前の連絡等入りません。

電光掲示板(お知らせ)のソースコードは下記になります。
現在、テキストはHTMLタグを許していますので、いろいろと自由に
変更することが可能かと思います。

ちなみにこういった電光掲示板みたいな流れる仕様のコードは
インターネットの初期のころは多く見られましたが
このごろは全然、見なくなりましたね。。。

CSSの記述に関してはとくめいさんの記述を使用させて頂きました。
https://creatorclip.info/2014/06/css3-electric-bulletin-board/

とくめいさんも同じようなことを記事に記載しておりますが
自分もそのように感じました。

とくめいさんへ断りもなく使用してすみません、
Twitterで連絡しようかなと思ったのですが、それもなんだかと思い
勝手ながらこのような手段を取りました。

お知らせ(電光掲示板)のダウンロードは下記になります。
下記のファイルを解凍しワードプレスのプラグイン領域にフォルダごと
アップロードしプラグインを有効にするとご使用頂けます。

https://zip358.com/plugin/Z-Electric-bulletin-board.zip

<?php
/*
Plugin Name: Z-Electric-bulletin-board
Plugin URI: https://zip358.com/plugin/Z-Electric-bulletin-board.zip
Description: お知らせ
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp_head', function() {
    $color = get_option('ZEBB_color')?get_option('ZEBB_color'):"ffffff";
    $cssdata ="
    <style>
        /* =====================
            電光掲示板
        ======================= */
        .ledText {
            overflow: hidden;
            position: relative;
            padding:5px 0;
            color: #$color;
            font-size: 60px;
            font-weight: bold;
            background: #333333;
        }
        /* CSS3グラデーションでドット感を出す */
        .ledText:after {
            content: ' ';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
            background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
            background-size: 2px 2px;
            z-index: 10;
        }
        /* CSS3アニメーションでスクロール */
        .ledText span {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            -webkit-animation-name: marquee;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 15s;
            -moz-animation-name: marquee;
            -moz-animation-timing-function: linear;
            -moz-animation-iteration-count: infinite;
            -moz-animation-duration: 15s;
            animation-name: marquee;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 15s;
        }
        @-webkit-keyframes marquee {
        from   { -webkit-transform: translate(0%);}
        99%,to { -webkit-transform: translate(-100%);}
        }
        @-moz-keyframes marquee {
        from   { -moz-transform: translate(0%);}
        99%,to { -moz-transform: translate(-100%);}
        }
        @keyframes marquee {
        from   { transform: translate(0%);}
        99%,to { transform: translate(-100%);}
        }
    </style>
    ";
    print $cssdata;
 });
add_action("wp_body_open",function(){
    $text = get_option('ZEBB_text')?get_option('ZEBB_text'):"";
    if($text)print '<p class="ledText"><span>'.$text.'</span></p>';
});
add_action('admin_menu','Z_Electric_bulletin_board_set');
function Z_Electric_bulletin_board_set(){
	add_options_page(
		'zip358.com:プラグイン',
		'電光掲示板設定',
		'administrator',
		'Z_Electric_bulletin_board',
		function(){
            if(isset($_POST["ZEBB_color"]) or isset($_POST["ZEBB_text"])){
                $color = preg_match("/[a-zA-Z0-9]*/",$_POST["ZEBB_color"])?$_POST["ZEBB_color"]:"ffffff";
                update_option('ZEBB_color', wp_unslash($color));
                $text = $_POST["ZEBB_text"];
                update_option('ZEBB_text', wp_unslash($text));
            }
            ?>
            <form method="post" action="">
                <h2>電光掲示板設定</h2>
                color code #<input type="text" style="width:350px" name="ZEBB_color" value="<?=get_option('ZEBB_color')?get_option('ZEBB_color'):""?>" placeholder="f7f7f7"><br>
                text <input type="text" style="width:350px" name="ZEBB_text" value="<?=get_option('ZEBB_text')?get_option('ZEBB_text'):""?>" placeholder="文字を記入してください"><br>
                テキスト文字を未入力にすると電光掲示板が表示されません
                <?php submit_button(); ?>
            </form>
            <?php
        }
	);
}

タグ

5.2, body, css, gt, header, html, lt, open, php, wp, いろいろ, インターネット, お知らせ, お願い, コード, こと, ころ, ごろ, ソース, タグ, テーマ, テキスト, トク, ひとつ, ファイル, プラグイン, プレス, メイ, リンク, ワード, 下記, 事前, 事項, , 仕様, 使用, 初期, 参照, 取扱, 可能, 場合, 変更, 外観, 存在, 推奨, 掲示, 注意, 現在, 直下, 自由, 記事, 記載, 記述, 追加, 連絡, 配布, 電光,

WordPressの404外部リダイレクトプラグインを作りました。

2019.11.16

Logging

WordPressの404外部リダイレクトプラグインを作りました。
ソースコードはこんな感じになってます、、、。
使用される方は下記のURLよりダウンロードを行ってください。
解凍してフォルダをワードプレスのpluginを置く場所へアップロードし
page404goプラグインを有効にしていただければ使用できます。
https://zip358.com/plugin/page404go.zip

<?php
/*
Plugin Name: page404GO!!
Plugin URI: https://zip358.com/plugin/page404go.zip
Description: 404ページを任意のURLへ変換し遷移させる
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp', function() {
    global $wp;
    $domain = get_option('domain404page')?get_option('domain404page'):"https://zip358.com/";
    if(is_404()){
        wp_redirect($domain.$wp->request);
        exit;
    }
 });
add_action('admin_menu','page404go_setting');
function page404go_setting(){
	add_options_page(
		'zip358.com:プラグイン',
		'404リダイレクト設定',
		'administrator',
		'page404go',
		function(){
            if(isset($_POST["domain404page"])){
                if(preg_match("/https?://.*/$/",$_POST["domain404page"])){
                    $url = $_POST["domain404page"];
                }elseif(preg_match("/https?://.*/",$_POST["domain404page"])){
                    $url = $_POST["domain404page"]."/";
                }else{
                    $url = "https://zip358.com/";
                }
                update_option('domain404page', wp_unslash($url));
            }
            ?>
            <form method="post" action="">
                <h2>リダイレクトドメイン指定</h2>
                <input type="text" style="width:350px" name="domain404page" value="<?=get_option('domain404page')?get_option('domain404page'):""?>" placeholder="https://zip358.com/">
                <?php submit_button(); ?>
            </form>
            <?php
        }
	);
}

タグ

1195254834632380416, 358, 404, Author, com, description, go, lt, name, page, php, plugin, status, taoka, toshiak, Twitter, URI, url, WordPress, zip, アップロード, コード, ソース, ダウンロード, フォルダ, プラグイン, プレス, リダイレクト, ワード, 下記, 任意, 使用, 場所, 変換, 外部, 感じ, , 有効, 解凍, 遷移,

TinyMCE 5.0でオリジナルプラグイン作成するはググれば何とかなるが?

2019.07.27

Logging

TinyMCE 5.0で独自のプラグインを開発するにあたって
ググれば4.0で作成する方法は山ほど例題があるのだけど5.0は
非常に少ないtinymce.windowManager.openを使用してのプラグインは
5.0でも案外簡単に見つかるのだけど、tinymce.windowManager.openUrlを
使用しての情報はググってもない。
唯一、公式サイトが記載しています。
しかし残念なことに全て英語で書かれています。

日本語で記載しろよという話だけど・・・・。
で!!tinymce.windowManager.openUrlで
何が出来るかと言えば外部ファイルを
読み込みが出来てそのレスポンスを受け取る事が出来るのです。
英語が嫌いでも原文で英語を読め!!ですよ・・・。
答えはそのページに書いているのですね。
※ちなみに会社でこの機能(e.windowManager.openUrl)を
使用し開発中です。
たぶん、自分みたいに困っている人もいると思うので
基本的な部分を記載しています、なお自作プラグインの作り方は
理解しているという前提で記載しています。
まず例としてPHPファイルを読み込みたいのなら
自作プラグインのPHPファイルに下記の記載を行います。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/tool/bootstrap/css/bootstrap.css">
        <script src="/tool/jquery/jquery-3.4.1.js"></script>
    </head>
    <body>
        <form method="post">
        <input type="text" name="L_japan" class="form-control">
        <input type="text" name="L_English" class="form-control">
        <input type="button" name="submitbtn" value="恩恵を受ける"class="btn btn-primary">
        </form>
        <script>
            var chageJson = function(data) {
            console.log(data);
            var JsonData = [];
            for (i = 0; i < data.length; i++) {
                JsonData[data[i].name] = data[i].value
            }
            //console.log(JSON.stringify(data));
            return JsonData;
            }
            $("[name=submitbtn]").on("click",function(){
                data = chageJson($("form").serializeArray());
                window.parent.postMessage({ mceAction: 'customAction',data:data});
                window.parent.postMessage({ mceAction: 'close' });
            });
        </script>
    </body>
</html>

PHPファイルはこのような感じでjavascriptが大事ここで、
submitを行っています。
当然、JSON形式で返却しましょう。公式ページにも書かれいますが
mceActionで制御しましょう。
プラグイン側のJSは下記のようになります。

(function() {
    tinymce.create('tinymce.plugins.language_boon', {
        init : function( ed,  url) {
            console.log(ed);
            act =function(ed)
            {
                ed.windowManager.openUrl(
                    {
                    type: 'panel',
                    title: '恩恵を受ける',
                    url:url + "/language_boon.php",
                    onMessage:function(api, details){
                      console.log(api, details);
                      console.log('オレオレjapan', details.data.L_japan);
                      console.log('オレオレEnglish', details.data.L_English);
                   }
                });
            };
            // window.addEventListener('message', function (event) {
            //   console.log(event);
            //   var data = event.data;
            //   console.log(data.data);
            //   if(ed.settings.id == data.data.id_){
            //     console.log('オレオレjapan', data.data.L_japan);
            //     console.log('オレオレEnglish', data.data.L_English);
            //   }
            // });
              ed.ui.registry.addButton('language_boon',{
                title : '恩恵を受ける',
                text: '恩恵',
                onAction:function(){act(ed)}
            });
        },
    getInfo : function() {
        return {
            longname : 'tinymce.plugins.language_boon',
            author : 'taoka',
            authorurl : 'https://zip358.com',
            infourl : 'https://zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('language_boon', tinymce.plugins.language_boon);
})();

公式ページは下記のリンクより
https://www.tiny.cloud/docs/ui-components/urldialog/#urldialoginstanceapi
サンプルサイトはこちら
https://zip358.com/tool/editor/
 
 

タグ

4.0, 5.0, open, openUrl, TinyMCE, windowMan, windowManager, オリジナル, こと, サイト, ファイル, プラグイン, ページ, レスポンス, , 会社, , 作成, 使用, 例題, 全て, 公式, 原文, 唯一, 外部, 嫌い, 山ほど, 情報, 方法, 日本語, 機能, 残念, 答え, 簡単, 英語, 記載, , 開発,

ブロックエディタとクラッシックエディタ

2018.12.07

Logging

WordPress5.0になりそろそろブロックエディタに切り替える準備を
しているみたいだけど、各プラグインはまだ対応していないみたいだな…。
そもそもブロックエディタってどうなのか?
クラッシックエディタの方が良くない?
っていう意見が多いのはおそらく使い慣れたからとプラグインが
対応していないのが原因なのだけど、対応すれば
ブロックエディタでも良いかもなと思っています。
WordPress5.0・・・仕様もだんだん変わっていくのかな。
ついていくには触れるべしだけど、
自分は当分クラッシックエディタで良いです。
 

タグ

5.0, nbsp, WordPress, エディタ, クラッシック, プラグイン, ブロック, 仕様, 原因, 対応, 意見, , 準備, 自分,

いろいろエディタやIDEを試してみてこれが良いかなと。

2018.11.23

Logging

IDEとエディタの境目あたりで言えばATOMVisual Studio Codeですね。
IDEでPHPを使用するならばNetBeansかなと思います。
ATOMに関してはいろいろ試してみてこれだけのプラグインをインストールすれば
それなりに開発しやすいですよ。
auto-encoding
autocomplete
japanese-menu
linter-php
v-bootstrap4
これを入れてあとはPHPで開発するならばPHPのインストールも
お忘れなく。
ちなみにVisual Studio Codeの方が安定しています。
間違いなくシェアはこちらのほうが多いです。
会社でもVisual Studio Codeを使う人が多くなってきています。
サクサク動くので使用しやすいですね。
Visual Studio Codeでも上記と同じようなことがプラグインや
基本設定から可能です。
特に開発環境がUTF-8だけではない環境の方は
基本設定のここをONにしてあげると便利です。
“files.autoGuessEncoding”: true

タグ

4, 8, ATOM, auto-encoding, autocomplete, autoGuessEncoding, Code, files, IDE, japanese-menu, linter-php, NetBeans, ON, php, Studio, true, UTF-, v-bootstrap, Visual, あげる, あたり, あと, いろいろ, インストール, エディタ, , かな, ここ, こちら, こと, これ, これだけ, サクサク, , シェア, それなり, ちなみに, ない, プラグイン, やすい, 上記, , 会社, 使う, 使用, 便利, 入れ, 動く, 可能, 同じ, 基本, 境目, 多い, 多く, 安定, 忘れ, 思い, , 特に, 環境, 良い, 言え, 設定, 試し, 開発, 間違いなく, 関し,

「jetpack」と「Japanese AutoTag」の相性が悪くて公開及び更新出来なくなる不具合について2

2018.03.10

Logging


jetpackのプラグインが度々更新されその都度、過去記事の対応するのは面倒くさいので
根本的なJapanese AutoTagのプラグインを修正すればよいのではないかと思い
インフルエンザB型療養中にプログラムの修正を行いました。
ファイル名:japanese-autotag.phpの267行目?400行目ぐらいのアレやコレをキャスト(string)するように追加を行いました。
この事によってエラー500を出力されることもなくなりました。

Uncaught exception ‘Exception’ with message ‘Serialization of ‘SimpleXMLElement’ is not allowed’

タグ

267行目, 400行目, Exception’ with message, Japanese AutoTag, japanese-autotag.php, jetpack, Serialization of, SimpleXMLElement’ is not allowed’, Uncaught exception, アレ, インフルエンザB型療養中, エラー500, キャスト, コレ, ファイル名, プラグイン, プログラム, 修正, 追加, 都度,

datetimepicker-master::でぃーたたいむぴっかーマスター!!日本語化

2017.10.14

Logging


datetimepicker-masterが日本語化できない。時刻だけ表示したい、カレンダーだけ表示したいなどに
実は対応しているのだけど、バージョンがアップしてからそのやり方が変わっていて
ググってもそのやり方が出てこないので、じぶんが記載してみました。
ソースを読まないと見えてこないものが有るですが、ぶっちゃけ他人のソースを読むのは面倒くさいでもプラグインは使用したい方。
下記のコードで日本語化可能です。
カレンダー非表示可能です。
時刻非表示可能です。
ちなみにソースを見るとdefault_options(でふぇるとおぷしょん)のオブジェクトで
その他、操作も可能ですのでソースを読みたい人は読んでみてください。
ちなみにちなみにdatetimepicker-masterプラグインはこちらからダウンロード可能です。
https://github.com/xdan/datetimepicker
サンプルプログラムはこちらです。
https://zip358.com/tool/datetimepicker

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>zip358.com:datetimepicker日本語</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
  <link rel="stylesheet" href="./datetimepicker-master/jquery.datetimepicker.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="./datetimepicker-master/build/jquery.datetimepicker.full.js"></script>
  <script>
      $(function(){
          $.datetimepicker.setLocale("ja");//にほんご
          $("#dtp").datetimepicker({
              format:"Y/m/d H:i",
              formatTime:"H"//時間だけ(分:非表示)
          });
          $("#dtp2").datetimepicker({
              format:"Y/m/d",
              timepicker:false//時刻非表示
          });
          $("#dtp3").datetimepicker({
              format:"H:i",
              datepicker:false//カレンダー非表示
          });
      });
  </script>
</head>
<body>
    <input id="dtp" type="text">
    <input id="dtp2" type="text">
    <input id="dtp3" type="text">
    <div id="ana">
    </div>
</body>
</html>

タグ

com, datetimepicker, datetimepicker-master, default, github, https, options, xdan, アップ, オブジェクト, カー, カレンダー, コード, こち, こちら, サンプル, じぶん, ソース, その他, タイム, ダウンロード, バージョン, ふぇると, プラグイン, プログラム, マスター, もの, やり方, 下記, , 他人, 使用, 可能, 対応, 操作, , 日本語化, 時刻, 表示, 記載,

AMP (Accelerated Mobile Pages)HTMLしなさいと勧められる。

2017.07.12

Logging

AMP (Accelerated Mobile Pages)HTMLしなさいと勧められるので
WordPressのAMPを導入しました。
さて、「AMPってなんでですかー?」って事だけど
簡単に言えばグーグルが進めているモバイル(スマホ)の表示速度を
改善させるあらたなHTMLなどの記述を指すみたい。
ちなみにアクセルレイテッド モバイル ページと読むそうですよ。
アクセルレイテッドとは加速を意味するものだとか、、。
ほぼHTMLとCSSだけしか許さないので
当たり前のごとく表示速度は速いですが、javascriptの記述に
制限があるので、殆どのWordPressのプラグインjsは動かないと
言っても良いです。
※ちなみにAMPに広告を表示させたい場合などは
プラグインを若干、編集しないといけない場合があります、
また、そのままJSをコピペで貼っても表示されないので
AMP用の記述などが必要になりますが、恐らくAMPじわじわ浸透していく
だろうなぁと感じます。最終的にJSなどがサーバサイドで動かすように
なるじゃないのかなぁと思っています(今はクライアント側で動いているけど)。

Intro to AMP (Accelerated Mobile Pages)

タグ

Accelerated, amp, css, html, javascript, JS, mobile, Pages, WordPress, アクセル, カー, グーグル, コピペ, じわ, スマホ, テッド, プラグイン, ページ, もの, モバイル, レイ, , 制限, 加速, 場合, 導入, 広告, 当たり前, 必要, 意味, 改善, 殆ど, , 簡単, 編集, 若干, 表示, 記述, 速度,

PHPで自前の関数をガッと放り込むとjquery…!!

2017.02.16

Logging


デモサイトはこちらから。
https://zip358.com/tool/kansuu.php
実際、関数を引数に放り込む機会はあまりないかなと思いますが
こういう使い方もできると言う事を覚えておくと便利かなと思います。
この頃jQueryを使うことが多くなってきているのですが
使っているうちにライブラリの作り方がなんとなく理解してきましたので
オリジナルライブラリ(プラグイン)を作ってみようかなと思います。
ちなみにプラグインの作り方を紹介しているサイトがググると
結構あります。たとえば、こちらガッツリと解説しているので
こちらを参考に皆さんもオリジナルプラグインを提供してみてはどうでしょうか?
http://qiita.com/k4zzk/items/11e5dbd53cb93edb8b4d
jqueryは結構好きですが全然というほど書き方やメソッドをしらないですね。
一度、どこかでメソッドに関してはリファレンスなどに目を通しておかないと
いけないなと思う今日このごろです。
リファレンスはこちらから。
http://semooh.jp/jquery/

<?php
function kansuu(){
    return "un!<br>";
}
function ui($f){
  echo $f;
  echo $f;
}
echo 'ui(kansuu());<br>';
ui(kansuu());
class un{
    function kansuu(){
        return "un!<br>";
    }
    function ui($f){
        echo $f;
        echo $f;
    }
    function d($f){
        echo $f->kansuu();
    }
}
$un = new un();
echo '$un->ui($un->kansuu());<br>';
$un->ui($un->kansuu());
echo '$un->d($un);<br>';
$un->d($un);

タグ

AM, br&gt, class un, echo, function d, function kansuu, function ui, jquery, new un, return, UI, un, オリジナルプラグイン, オリジナルライブラリ, プラグイン, メソッド, リファレンス, 今日このごろ, 作り方, 関数,

WordPressのhttps対応化しました。ページのデザインが崩れる。

2015.08.07

Logging


 
Wordpressのhttps対応化しました。ページのデザインが崩れるため、今までhttpで表示させていましたが対応策がネットに掲載されていたので速攻ためして見たところページの崩れもなく表示されています。サイトのSSL化はこれで一応、完結とします、一部、プラグインがHTTPを参照しているのを除き、殆どのURLはSSLを参照しているので、おそらく大丈夫ではないかと思います。なお、SSL化するに当たってURLはDBを一括置換し、httpsに変換することをお忘れなく。
参照にさせて頂いたサイトのURLです。
※ちなみにFirefoxの警告表示にはまだ、未対応です。
追記:下記の方法で対応、Wordpressフォーラムより引用

functions.phpに下記の内容を記載したらできました。
ありがとうございます。
function override_server_https_env(){
$_SERVER[‘HTTPS’] = ‘on’;
}
add_action(‘after_setup_theme’, ‘override_server_https_env’);

http://coneta.jp/11936.html

タグ

'after_setup_theme', 'override_server_https_env', db, Firefox, function override_server_https, functions.php, https対応化, ON, override, SSL化, url, WordPress, Wordpressフォーラム, サイト, デザイン, ところページ, ネット, プラグイン, ページ, 一括, 一部, 下記, 参照, 完結, 対応策, 崩れ, 殆ど, 警告表示, 速攻,

WordPress:仕事の現場でサッと使える!デザイン教科書。

2015.08.07

Logging


【Wordpress:仕事の現場でサッと使える!デザイン教科書】をぱらっと捲ってみて、どんな人向けなのか、すこし記載します。まず、この本、デザイン教科書と書いているわりにはザックリいえば、プログラマーよりの本です。どうすればWordpressでデザインを変更できるかを結構、がっつと焦点当てて書いてます。これまでWordpressの参考書は、どちらかと言えばプラグインで「何とかしましょうよ。」と言う解説本が多かったと思いますが、この本は違います。なので、HTMLやCSSは当然のごとく理解していて尚且つjavascriptのこともある程度、自分で作れるデザイナーさんにお勧めです。ちなみにプログラムが全然わからないという方はこの本を読むとWordpressがどのような仕組みで動いているのかとか、こういう事はできるけど、これは出来ないとかWEBプログラマーさんに発注するときに役立つ本だともいえます。
 
余談:この頃、ロゴなどのデザインできれば良いのになと感じます。デザイナーさんがいれば教わる機会や技を盗める機会があると思うのですが今のところ、そう言う機会がないのです・・。なので、本を購入して読んでいるのですけどPhotoshopに比べてillustratorのクラウド版はお高いので購入しようか悩んでいます。illustratorだけ入れるよりは、少し割高ですが、全部いれて月々4800円?支払うか方がお得なんですね。ただ、一年ぐらい前に全インストールしてた事があるのですが、使ったのはPhotoshopのみだったと言う自分です。いまはPhotoshopのみの支払いです。
 

タグ

illustrator, javascript, Photoshop, WEBプログラマー, WordPress, いまいち, がっつ, クラウド版, すこし, デザイナー, デザイン教科書, どちらか, プラグイン, プログラム, 仕組み, 余談, 参考書, 月々4800円, 機会, 焦点, 現場,

wordpressのhttps化は基本的に不可能だという事。{現時点では}改め{対応}

2015.08.02

Logging


wordpressのhttps化は基本的に不可能だという事がわかった。httpsに変更することはできるができるのは、トップページのみ、それ以外はwordpressの仕様なのかwp_head部分がhttpを指すことがわかったので恐らく現時点ではhttps化は無理だという事が判明。もし、どうしてもhttps化したい場合は他のCMSを使用することをお勧めします。基本的にNET業界はhttpsを推進しているので、そう遠くない時期にWordpressもhttps化を行うだろうと思っています。
※SSL化を試みる方法をぐぐると記載していますが恐らく難しいのではないだろうかと思います。今回、SSL化にあたりDBを一括置換して置き換えてみてたりしたのですが、全然、うまく行きませんでした。おそらくwp_head関連のファイルを変更すれば可能だと思いますが、そこまでしてまでSSL化するほど・・体力がありませんので自分は辞退します。
今回、さくらサーバが提携したラビットSSLを使用してSSL化を試みたわけですが、若干、損をした気分はありますがDLファイル時にSSLのURLでダウンロード出来るようになったので、そこだけは、よかったです。
 
※ちなみに初期の状態でSSLを使っていたら、おそらく問題なく使用できると思います。
 
header.phpに書かれているwp_head()が実行されたタイミングでブラグインのjs・cssパスが出力されるので、その内容を書き換えてしまいます。
下記の方法で対応可能になります。

 

   // HTTPS通信時、プラグインがcss・jsパスをhttp://?で出力するのを対策する。
   ob_start();
   wp_head();
   $wp_head_contents = ob_get_clean();
   $wp_head_contents = str_replace('http://', '//',$wp_head_contents);
   echo($wp_head_contents);

上のソースコードは、wp_head()が吐き出す内容をob_start関数で出力バッファリングします。バッファリングした内容を変数に格納して、変数内の文字列にhttp://?で始まるパスがあれば、//?に置換した上でブラウザに出力しています。
こうすることで、http・httpsのどちらにも対応できるようになります。
引用:http://coneta.jp/11936.html

タグ

$wp_head_contents, CMS, css・jsパス, DLファイル時, header.php, head部分, https化, js・cssパス, NET業界, ob_start関数, SSL化, str_replace, WordPress, wp_head, wp_head部分, wp_head関連, wp_https化, さくらサーバ, ソースコード, トップページ, ブラウザ, プラグイン, ラビットSSL, 一括, 仕様, 体力, 内容, 初期, 判明, 変数, , 文字列, 時期, 現時点, 若干,

自作テンプレートを作ってみて。

2015.07.11

Logging


自作テンプレートを作ってみて、イマイチ感というよりはLightBox2のプラグインが上手く動作しなかったので元のテンプレートに戻しました。恐らく一部のプラグインが動作しなかったのはBootstrapかjqueryの競合が問題かと思われます。自分で作ってみてもっとWordPressのメソッドを知っていればもっと楽々と作れた事は間違いないですが、自分が思っていた以上にWordPressは難しいという感じではないです。cakePHPなどの方がやはり難しい。それに比べれば幾分、考え方は緩いかなと感じます。

タグ

Bootstrap, cakePHP, jquery, LightBox2, WordPress, イマイチ感, プラグイン, メソッド, 一部, , 問題, 幾分, 感じ, 楽々, 競合, 考え方, 自作テンプレート,

朝早起きしてWPを削除してWP4.2を入れ直してた。

2015.04.28

Logging


朝早起きしてWPを削除してWP4.2を入れ直してた。WP4.1とかからアップデートするとおそらくプラグインが影響して記事の新規投稿や編集が出来なくなるというバグがあるみたいです。WordPressJPの対応を待つより、バッアップを取ってDBを削除して再度、新規にWPを入れ直した方が良いと判断して、早起きしてゴニョゴニョと作業してました。がっしかしpingリストのバッアップを取っていなかった事が発覚!!
また同じようなことをしそうなのでリストUPしときます。

http://blog.goo.ne.jp/XMLRPC
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://ping.bloggers.jp/rpc/
http://ping.exblog.jp/xmlrpc
http://ping.fc2.com/
http://api.my.yahoo.com/RPC2

 

タグ

db, pingリスト, WordPressJP, WP4.1, WP4.2, アップ, ゴニョゴニョ, バグ, プラグイン, 再度, 新規投稿, , 発覚, 編集, 記事,

WordPressのプラグインを作るのって結構面倒くさいかも(´Д`)

2015.01.18

Logging


WordPressのプラグイン作成って結構面倒くさいです。自分はWordPressの仕様が
あまり分っていないので、いま勉強中なのですけどCMSって提供先が海外っていう
パターンが多いので情報も英語で書かれていることが多く。英語の分からない自分に
とってはめちゃ苦労するですね。わかる単語を継ぎ接ぎして読み取って「あぁ?」
こんな感じだろうと人様には言えないレベルで要訳して勉強してます。
なんでCMSって結構、理解するまで苦労します。ちなみにWordPressの参考書は
いろいろと出ているのですけど、ほぼ開発には役に立たないものが多い中、
この二冊があるとWordPressの開発が楽になる本を紹介します。
一つ目はWordPressプラグイン開発のバイブルです、タイトル通りこれまさに
手放せないバイブルです!!持っていて損がない本かなと思います。
二つ目はWordPress関数リファレンスガイドです。こちらもタイトル通り
リファレンスガイドです。日本語WordPressの公式サイトにもリファレンスは
掲載しています。この本も持っていないよりある方が何かと役に立ちます。
余談、このサイトの日の訪問者数が200人を突破しましたのでちょっと自慢しときます。
でも200人ってブログで飯を食っている人から言えば微々たる数字なんですけど
自分としてはこの短期間に三桁台に突入した事だけでも案外すごいじゃねと
思っていますトイウコトデ、今後もzip358.comをよろしくお願いします。
※密かに目指せ1万人を目指しています。
※本日8時投稿される記事ですが、めちゃ何かを頑張りました・・・・(誤字脱字がアリそうです)。

タグ

, CMS, WordPress, WordPressプラグイン開発, WordPress関数リファレンス, zip358.com, タイトル通りこれまさ, トイウコトデ, バイブル, パターン, プラグイン, プラグイン作成, リファレンス, 一つ目, 二つ目, 人様, 参考書, 日本語WordPress, 短期間, 英語, 誤字脱字,

おすすめ度の高いフリーのエディタです{Notepad++}。

2014.08.22

Logging

おすすめ度の高いフリーのエディタです、エディタ名がNotepad++(DL日本語対応)という奴なんですけど(δ´ω`)カユイところに手が届く優れものです。昔は秀丸サクラエディタを使用してたんですけど、このNotepad++に出会ってからずっとNotepad++を使用しています。何がそんなに良いのかといえば、動作が軽いこと、そしてバイナリもみえちゃうし、プラグインも充実してます。なんで、このNotepad++がおすすめです{言語自動補完機能あり、文字コード変換あり等など}。サクラエディタのようにgrep機能(ファイル内検索)もあります、あと正規表現の検索や置き換えなどもありますので自分としてはおすすめ度高いです。昔、務めていた会社では何故か、MIFES(マイフェス)とかいうテキストエディタを使用してました。
ちなみにファイルの差分を見たい場合は、WinMerge 日本語版など、バイナリを見たい場合は、StirlingBZが有名ドコロです。
追記:
IDEで良い物を見つけました。
NetBaseです、これは職場でも使っています。言語自動補完機能ありますが若干遅いのが難ですね。
有料でよければ、PhpStormが良い感じですね。2万円とちょっとします。他にもatomやマイクロソフト
提供のVisual Studio Codeなどがあります。
https://netbeans.org/features/ide/
https://www.jetbrains.com/phpstorm/
https://atom.io/
https://www.visualstudio.com/ja-jp/products/code-vs.aspx

追記2 :今では古い話なのでVisual Studio Codeを推奨します(2021年に追記)!!

タグ

BZ, DL, grep, MIFES, Notepad, Stirling, WinMerge, エディタ, おすすめ, カユイ, コード, こと, さくら, テキスト, ところ, バイナリ, ファイル, フェス, プラグイン, フリー, マイ, 会社, , 使用, 充実, 動作, 場合, 変換, , 対応, 差分, , 文字, 日本語, 日本語版, , 有名, 検索, 機能, 正規, 秀丸, 自分, 自動, 表現, 補完, 言語,