Fatal error: Cannot redeclareの解決

自作のInstagramのフィード表示をショートコードで導入後、プレビュー画面から「編集」画面に進むと、「Fatal error:」が表示されて全く編集できなくなりました。重大なエラーって表示されて、めちゃくちゃ恐ろしい・・・。

とにかく、公開してしまっているメインのページだったので、編集できなくて困るということで、一旦無理やりデータベース上から怪しい記載を削除しました。レンタルサーバー上の、管理ツール(phpMyAdmin)から直接データを編集しました。投稿記事のID（post=●●● の数字）はエラーになっている記事ページのURLから確認できます。

問題箇所を特定する

デフォルトでは「重大なエラーがありました」としか表示されないので、WordPressのデバックモードをONにします。wp-configのdefine( ‘WP_DEBUG’, fales );という記載があるので、trueに変更するだけです。

参考：「サイトに重大なエラーがありました」の回避方法

表示されているエラー（Cannot redeclare 自作の関数名と表示されていた）からすると、ショートコードで呼び出したphp（showfeed.php）の中の自作関数が、重複して定義されているとのこと。一回しか定義してないのになんでや・・・と悩みまくりましたが、なんらかの加減で、showfeed.phpのコードが複数回呼び出されている様子。

参考：【PHP】Fatal error: Cannot redeclare f() エラーの原因と対処（複数）

対策する

今回、ショートコードで呼び出したphp（showfeed.php）から、さらにincludeで別のphp（get-json.php）を呼び出す構成にしていたため、includeをinclude_onceにして、１度しか読まないように変更。include_onceするphpファイルの中身には、関数のみの記載に変更しました。変数の定義と関数の実行は、showfeed.phpに移動しました。

なんとか通常通り表示できるようになりました！修正後、デバックモードをOFFにするのを忘れないようにしましょう。

…で長文を省略するCSS

Instagramのフィードを表示するコードに使いたくて調べる。全ての投稿内容を記載するわけにいかないので、「…」で省略するしたいのだけど、JS使うと複雑だったり負荷がかかったりすると嫌なのでCSSで簡単に対応したい。

参考：IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する

モダンなWebブラウザならline-clamp、IE11はwrap-flowを使う。

See the Pen InstagramFeedList by yuming (@yuuuming) on CodePen. 

.InstagramFeed ul li span.caption {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}
.InstagramFeed ul li span::before, .InstagramFeed ul li span::after {/*IE用。疑似要素に除外設定*/
  content: '...';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
}
.InstagramFeed ul li span::after {
  background: currentColor;
  color: white;
  top: auto;
}
@supports (-webkit-line-clamp: 2) {/*モダンブラウザ用*/
  .InstagramFeed ul li span {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  .InstagramFeed ul li span::before, .InstagramFeed ul li span::after {
    content: normal;
  }
}

自作テンプレ作成時のデバッグメモ

WordPressの自作テンプレ作成時に、デバッグ方法を調べるのに手間取ったので、方法をまとめます。

ページ上に直表示

一番手っ取り早い方法。最後の「;」を忘れてエラーになりがちなのと、タグ閉じ忘れなどhtml構文ミスって表示おかしくなりがちなので気を付ける。

※「’」と「”」の違いはほぼないと思っているけど、たまにエラーになるので、またきちんと調べたい。

参考：https://www.php.net/manual/ja/function.var-dump.php

echo '<div>ページ上に直接表示される</div>';

変数をタグで囲って出力したいときなどは、echoを行で分けるのもわかりづらいので「.」（ピリオド）で文字列を連結して表示すると短く済んでわかりやすい。

$data = '連結する変数';
echo '<div>' . $data . '</div>'
$data = ['配列とか','Datetime型とかも','詳しく表示'];
var_dump($data);

コンソールでの出力

javaScriptのconsole_log()を使う方法。直接ページのレイアウトに影響を受けたくない場合に便利。

参考：https://www.php.net/manual/ja/debugger.php

//////コンソール出力//////
$myvar = '出力内容';
console_log( $myvar ); 

function console_log( $data ){
  echo '<script>';
  echo 'console.log('. json_encode( $data ) .')';
  echo '</script>';
}

アラート表示

実行されたタイミングでモーダルが表示される。わかりやすいけど、ちょっと鬱陶しい。下のコードの例は、wp_head アクションが実行されるタイミングでアラートが表示される。

//////アラート表示//////
add_action( 'wp_head', 'hook_javascript' );

function hook_javascript() {
	$output = "<script> alert('Page is loading...'); </script>";
	echo $output;
}

ログファイルとして出力

ファイルにログとして出力内容を残す場合の例。アクセストークンを使ったjsonファイルの取得のデバッグで、処理履歴的に内容を残したくて作った。エラーがあった場合の出力もこんな感じでいけそう。ただし、ファイルの書き込み処理は動作負荷が少し増えるので注意。

putlog("出力されるログ内容" . "\n");

function putlog($logdata){// 実行時刻と引数のデータを指定ファイルに追記する
	$putfile = dirname(__FILE__). '/_log.txt';//実行しているphpファイルのディレクトリにファイル保存場所を指定
	$current_datetime = new DateTime();
	$puttext = "\n".'//log: '.$current_datetime->format('Y-m-d H:i:s') .'//'."\n".$logdata;

	file_put_contents( $putfile, $puttext, FILE_APPEND);//内容を追記する（ファイルがなければ作成される）
}

日時の操作について調べる

現在から1ヶ月後の日付を表示するコードを記載してみる。

参考：日付間隔関数（DateInterval）を使って簡単且つ、正確に日付の足し算、引き算をする　https://notepad-blog.com/content/154/

参考：DateTime クラスのまとめメモ　https://qiita.com/re-24/items/c3ed814f2e1ee0f8e811

$interval = new DateInterval('P1M');//1ヶ月
$currentDate = new DateTime();//現在時刻

echo '<p>現在から1ヶ月後: ' .$currentDate->add($interval)->format('U = Y-m-d H:i:s') . "\n".'</p>';

DateTimeクラスについて、簡単に日付の足し算、引き算、比較的なことができて便利なんだけど初心者にはなかなかわかりづらくて、普通にechoで出力できないし、var_dumpで出力すると訳分からん配列が表示される。人がわかるように出力するときは、formatを絶対使う必要あり。

※「->」で処理を複数連続してできるのも便利だなぁ。（あんまりよくわかってないので、また詳しく調べたいと思う。）

固定期間の加算、減算であればmodifyの方がわかりやすいかも。違いはまた調べたい。

参考：https://php.programmer-reference.com/php-datetime-modify/

$currentDate = new DateTime();//現在時刻

echo '<p>現在の1ヶ月前: ' .$currentDate->modify('-1 month')->format('U = Y-m-d H:i:s') . "\n".'</p>';

codepenでjQueryを使いたい

コードの検証や公開共有などをするのにcodepenが便利で、当ブログでも使用しているのですが、jQueryの扱い方について困ったので記載しておきます。

codepenでのjQueryの使い方

「setting」のjavascriptの項目「Add External Scripts/Pens」で、「jQuery」を選択して追加すると、jQueryが簡単に使用できます。

ただ、jQueryを使用する場合に、おまじない「$(function() {}」で括るのですが、これを記載するとエラーが出ます。中身だけ書かないとダメみたいです。ここで少しハマりました。

See the Pen
jqTest- by yuming (@yuuuming)
on CodePen.

WEB制作でよく使う便利ツール・ページのメモ

私がWEB制作時に良く参考・使用しているWEBページをまとめます。

デザイン関連

WEB色見本 原色大辞典 – HTMLカラーコード

適当なカラーを選びたいときに重宝しています。

テキスト比較ツール difff《ﾃﾞｭﾌﾌ》

流し込み用のダミーテキストを作成できます。

wordmark.it

任意の文字列を、使用中のP Cにインストールされているフォントで一覧表示できます。

Placehold.jp

ダミー画像を簡単に作成できます。

コーディング関連

HTMLクイックリファレンス

よくお世話になっています。HTML、CSSであれなんだっけ？と思って検索すると、だいたい出てきます。

WordPressのカテゴリ表示に悩まされた話

WordPressのテンプレートカスタマイズの勉強中にハマりました・・・。

テンプレートのカスタマイズは初めてなんですが、ネットで見ると超簡単！などと方法がでていたので、「調べながらすぐできるでしょ」と安易な気持ちではじめたのですが、大ハマり。中々の時間をロスしてしまいました。

<li class="first">
　　<a href="<?php the_permalink(); ?>">
　　　　　　<figure>
　　　　　　　　　　<?php echo get_the_post_thumbnail( $page->ID, 'first-size' ); ?>
	<figcaption>
　　　　　　　　　　　　　　　　　　　　　<?php the_title(); ?><br>
	　　　　　<span class="date"><?php the_time('Y.n.j'); ?></span><span class="cat"><?php the_category(' '); ?></span>
	</figcaption>
　　　　　　</figure>
　　　</a>
</li>

最新記事のループがしたくて、上記のようなコードを書いていたのですが、なぜか、<a>タグの子孫要素全てに<a>タグが付与される（コピーされる）という挙動になって、悩みました。どうやら、<figcaption>内のthe_category(' ');が問題でした。リンクありのカテゴリ名が表示されてしまうんですね。（リファレンスをちゃんと読んでませんでした・・・。）リンク内にリンクを挿入することになるので、wp側で補正されてこうなったようです。

修正したものが以下です。無事解決しました。

<?php $cat = get_the_category(); ?>
<?php $cat = $cat[0]; ?>
<?php echo get_cat_name($cat->term_id); ?>

参考にしたサイト

Bracketsが急に重くなった

win/macどちらもOK、かつ無料で利用できる上に動作が軽いと評判でしたので、エディターはBracketsを使用しています。プラグイン（エクステンション）の追加で使いやすいようにカスタマイズできるし、快適に使用できていたのですが、先日突然動作が重くなってしまいました。カーソルをマウスで移動するのにも、３秒くらいタイムラグが出るので、流石に作業していられません。

以下のようなサイトを参考にして、色々試していたのですが、しばらく原因がわからず四苦八苦。

「Brackets」の挙動がおかしくなったときのとりあえずの対処法

Bracketsのアップデートをしたら挙動がおかしくなりフリーズするようになった話

考えられる原因

入れているエクステンションのせいで重くなっている

以前は普通に使えていたので、まずはエクステンションを疑いました。エクステンションが多いと重くなるという情報もあるので、とりあえず、全てのエクステンションを無効にしてみて、動作を確認してみました。

プラグインが影響してるか確認する方法

[メニューバー]の[デバッグ]から[拡張機能なしでリロード]で確認します。
もし、その状態で動いたならば何らかのプラグインが影響していると考えられるため、原因となるプラグイン自体を削除すれば解決します。

拡張機能をOFFにすると、多少ましになりました。使えるレベルですが、やはりまだ１秒ほどのタイムラグがあって、作業に影響します。ちなみに、「Highlight Multibyte Symbols」（全角英数字・記号をハイライト表示するエクステンション）を非表示にすると使える程度に改善されました。

コードが長すぎる

触っていたコードが結構長かったので、関係あるかな？と思ったのですが、他のファイルに切り替えても、プロジェクトを切り替えても、状況は変わらず。

プロジェクト内にファイルが多すぎる

プロジェクト内にファイルが多すぎると、Bracketsがフリーズするようです。

Bracketsのプロジェクトファイルが多すぎるとフリーズする

今回は上記リンク先のような表示がある訳ではなく、フリーズでもないので、関係ないとみました。

評判が良いエディタなのに、検索してもあまり情報が得られず…しばらく頭を抱えていました。

発覚した原因

原因がわからなかったので、Bracketsをダウングレード、再インストールしてみましたが、変わらず…

確認バージョン：1.13(win), 1.12(win)

環境設定をいじれば直るのか、テーマが問題なのか、なんなんだ…以前は軽かっただけに、なぜ急に重くなったか不明です。継続調査します。

 

 

妄想デザインプロジェクト

フリーランスとしてお仕事を受けるのに、まず一番大事なことは実績だと思います。でも、なかなか仕事として実績を積むのって難しいです。そんなコネ、なかなかありません。

じゃあ、実績なければ作ればいいじゃないか！とにかく手を動かして、まずはものを作ることが大事です。それっぽい内容でサンプルを作るだけでも、見せられるものがあるというのは効果的です。

実績作りのための作業計画

デザイン勉強

妄想プロジェクトの企画

ウェブサイトのデザインの実績を作るために、架空のサイト作成を企画します。まずは、わいわいデザイン（架空のデザイン会社）の実績として、サイトにのせるためのウェブイメージを作成しようと思います。ロゴ、サイトデザインは適当に作成します。

やること
  • 架空の依頼（サイトの企画）を作成する。サイトのコンテンツを整理する。
  • サイトのデザインをする。
    （とりあえず、気に入ったデザインはパクる！！でも良いと思います）
  • サイトの実装を行う。
  • ロゴのデザイン、サイト内容の改定などを行う。

最新WEBデザイン、レイアウト等の研究

最先端や流行りのデザイン、トップクラスのデザインは自分でまだ作れなくても知っておく必要があります。最新のデザインを実現するためのウェブ技術も、日々進歩しているので、随時勉強していきます。

OJT

多少安くても、実際に仕事としてデザインを請け負って見ることは、かなり大事な経験になります。身近に直接請負えるコネがあるのなら良いのですが、実績なしの状態ではなかなか難しいと思います。デザイン系なら「クラウドワークス」や「ランサーズ」で探してみるのが手っ取り早いかと思います。（酷い案件もあるので、過度な期待はできませんが）

オンライン（クラウドソーシング）で仕事を探す場合は、自分の中で仕事請負ルールを作っておくことも大事かと思います。

請負ルール例

  • 週1件請負目標とする
    • 月いくら稼ぎたいか、月にどれだけ作業できるか、のバランスが難しいですね。
  • 時給1000円で作業する。それ以上は時間をかけない！
    • 従業員として雇用されるのと違い、色々な雑務や経費も込みでの請負料ということを意識する必要あり。フリーランスを目指すにあたり、作業あたりにかかる時間の見積もりと管理はかなり大事です。
    • ただし、経験としてどうしてもやりたい案件であったり、実績に残すのに価値のある案件なら受けるべきだと思います。

ウェブ案件を受けるために

クラウドソーシングで案件を受託するためにも、結局実績が必要になります。依頼主の立場からすると、実績ありの方を採用したいですよね。実績としては以下くらいを目標にしたいと思います。実績は手っ取り早く作りたいので、興味のあるコンペを題材にデザインすれば良いと思います。

ウェブデザイン系の場合の例
  • LPワイヤーフレームデザイン（大まかなレイアウト）：１０件
  • LPデザイン（配色やテイストなど装飾）：１０件
  • バナー：１０件

ちなみに、クラウドソーシングで、小遣い稼ぎも目的とするならば、コンペ形式の案件は期待できません。実績としての数を作るのであれば良いですが、まず受注できません。勝ち取れたらラッキーくらいの感じで臨んだ方が良いと思います。

 

まずは実績づくり、励みましょう！

border-radiusによる外枠と背景の隙間対策

border-radiusを指定すると、外枠と背景に隙間が発生します。Macでは問題なく表示されるようで、バグなのかな？と思いますが、かなり悩まされました。この隙間について、対策方法をまとめます。

隙間ができる要因

 

普通にborder指定して、隣接要素（直接の子要素）にbackground-colorを指定すると隙間ができます。また、borderと一緒にbackgroundにグラデーションを指定しても同様に隙間ができてしまいます。これは結構困る現象です。

対策方法

擬似要素にborderを指定して、position:absoluteで重ねると、問題なく表示できました。

 

See the Pen border-radiusによる外枠と背景の隙間対策 by yuming (@yuuuming) on CodePen.