プログラミング未経験者の備忘録

ノンプログラマーが社内SEになったのでイチからプログラミングを勉強し始めました!

なにはともあれデキる人は仕事が早くて丁寧で対人スキルも高い

f:id:su3se:20190712211837j:plain

先日WordPress重い!遅い!って話を書いたんですが、その記事を書くきっかけになった方にそっと教えてあげたんですけどまだ1日しか経ってないのにもう修正しててさすがプロだなって思いました。 

どんな分野でもそうだと思うんだけど、仕事で何が重要かっていうと正確さも当然のことながら仕事を処理するスピードの方が良い印象を持たれることが多いなって思います。

プログラミングとかなんかはスピードが速い人はもちろん優秀な方も多いんだけど、瀬角に打たないとそもそも動かないとかもあるので必ずしも「正確さ」<「スピード」って話でもないとは思うんだけど、処理するスピードが速ければそれだけで修正出来る時間が伸びるってのもあって、仕事の優先順位と仕事を処理するスピードが速ければ早いほど周り(上司)からの評価は高くなる傾向があるなって感じます。

上司に言われた仕事を毎回のようにササッと処理してミスなくポイッって渡せれば「コイツ仕事早いな!デキルな」って評価になる。その反面ミスが多ければ「ちゃんと見直せよ」ってことにもなりかねないんだけど、じっくり完ぺきかつ正確にやろうとするあまり遅すぎるという状況よりは多少、アラがあっても早く対応できる方が上司の印象は良いかなって思う。

matome.naver.jp

これだな。

「丁寧かつ早い」失敗→軌道修正、PDCAサイクル、色々言い方は有るけどつまるところコレの応用力なんだろう。

そんなことをとある女性の対応を見て、その対応力の高さから改めて学ばせていただきました。有難うございました。

対応力の高さ、情報の処理能力、スキル、コミュニケーション能力、俺も身に着けて行きたい。

 

2019年WEBブラウザ一括オフィシャルリンクまとめ:25個

f:id:su3se:20190712065229j:plain

WEBサイトを閲覧するときにブラウザは何を使っていますか?

今回はWEBブラウザのオフィシャルサイトをまとめました。(自分用w)

定番系の有名ブラウザ

シェア率は低いけど割と人気のブラウザ

  • sleipnir(スレイプニール)
  • Maxthon(マクストン)
  • Kinza(キンザ)
  • Blisk(ブリスク)※WEB制作者向け
  • Torchbrowser(トーチブラウザ)※ゲーム、動画重視系
  • Tor Browser(トーアブラウザ)※匿名通信用ブラウザ

中国系

インドネシア

その他マニアック系

※中国とインドネシアは通信関係が特殊みたいなので別にわけておきました。

特に中国へ仕事で行く方などはネット環境が全く違うので色々と対応が必要です。

ブラウザだけじゃなくVPNやその他、色々と対応が必要。

あとがき

現在ネットサーフィンでのメインは「Vivaldi」ですがこっちで手の届かないところは「Google chrome」を使う感じで二刀流です。その前は「sleipnir」と「Mozilla Firefox」という組み合わせでしたが、数年前くらいから「sleipnir」と「Mozilla Firefox」の二つが良くエラーで落ちてたりして乗り換えた感じです。あと乗り換えた要因になったのが「iMacros」との関係性もあったんですが、現在は「iMacrosBrowser」も使ってるので厳密には三刀流です。

f:id:su3se:20190712065928j:plain

今使っている「Vivaldi」でも、物足りないところは割とあってtranslation(翻訳)が機能しないサイトがあったり、時々見たいサイトが上手く動かない時とかにChromeを使っています。使った感じ思ったのは最近(2019年現在)のシェア率をみるとChromeが断トツでシェア率が良いというのも解るように、なんだかんだで総合的に見るとChrome最強説は間違いないと思うんですが動作スピードで言うとMicrosoft Edgeも負けてなくて結構サクサク動くように思います。

Microsoft Edgeでタブをまとめたり拡張性がもう少しあったらChromeは使わないかもしれないけど日本語以外の情報を掘るなら翻訳機能は絶対欲しいところでGoogleは自社で翻訳を提供してるだけにChromeは使いやすい。(安置Googleなので本心は全部使いたくないんだけど嫌いな人とも上手に付き合っていくのが大人ですよねw)となるとEdgeも悪くないんだけど出番はほぼ無い。ChromeだとTampermonkeyが使いやすいってこともメインになってる要因の一つだ。あとは、使ったことは無いけど気になってるのがBliskとTorchbrowserは後で試してみたい。

以上。

高機能オープンソースCMS Drupalが気になる

f:id:su3se:20190711193816j:plain

CMS(コンテンツ・マネジメント・システム)と言えば定着しているのはWordPressで間違いないでしょう。そんなCMSも色々あって、色々あるCMSの中で最近は「Drupal」(ドルーパル)というCMSが気になっています。

f:id:su3se:20190711194208p:plain

大量のコンテンツを効率的に一元化管理

Drupalの利点は、他のCMSやプラットフォームと比べて「サイト内のデータを効率的に再利用できる点」です。一つのコンテンツを様々な表示方法やデータ形式で公開する機能が充実しています。そして、それらのコンテンツをカテゴリ毎に分類し、ユーザーや組織と紐づけながら管理する機能を実装しています。また、ユーザーや組織に対して、非常に詳細な権限設定を行う事も可能です。Drupalの持つこれらの機能を活用する事で、組織内の大量のコンテンツを効率的に一元化管理する事ができます。

 

WordPressとの比較

これが良く書かれていた。

この記事の目次

関連記事

インストール

Drupalのインストールはこちらから

オフィシャルサイトhttps://www.drupal.org

 

 

PS.

もしや大規模サイト向きのCMSってことはSuuupeに調度良いんじゃないか!?

後でいじってみよう・・・

アンテナサイト構築パッケージに出来そう

昨日更新した内容でサイトの更新情報を表示させたんですけど、それについての記事はこちらに詳細があります。

ここで使ったのがこちら

このコードだけでフィードを表示できるのでToolsのダッシュボードにSuuupePortal(情報サイト)のフィードを表示させました。

f:id:su3se:20190711072415p:plain

https://suuupe.com/tools/dashboard/s-portal.php

 

なんか見覚えがあるなと思ったらモロにアンテナサイトの原型ですよね。

別枠でデザインも成形してアンテナサイト構築用にパッケージ化出来るな・・・

最近はアンテナサイトってSEO的にも結構キツい部分があると思うのでそんなに需要はないかなって思うけど一つのアイデアの種ということで残しておこう。

以上

 

WordPressは奥が深い!機能てんこ盛りで表示速度が遅すぎる

f:id:su3se:20190711051250j:plain

最近では、自分のブログ作ろうって人はとりあえず入れてるのがWordPressですよね。今回たまたまWordPressの定番プラグインで「Hello Dolly」について調べようとしたときにたどり着いた記事を開いたときに画面が10秒以上開かなかったんです。

表示速度10秒以上は完全アウト!

今回は相手の方がいる事なのでその方にとっては少々、批判的な内容になるため参照サイトは掲載しませんが、以下の画像はフロント系エンジニア(HTMLコーダー)の方が作ってるWordPressサイトの内部状況です。

f:id:su3se:20190711010728p:plain

右中段下くらいに位置している「Load〇〇」が12秒をマーク

f:id:su3se:20190711010924p:plain

エラーも返ってきていますが、最大の原因はページ内に関連リンクソーシャルメディアがこれでもかってくらい大量に設置してあってひたすらロードしているような状況です。

Googleの評価は9

f:id:su3se:20190711013857p:plain

表示速度2秒ほどでまあ我慢できる感じ

ちなみに、以下に掲載している画像がWordPressで構築してるSuuupePortalの読み込み速度です。

f:id:su3se:20190711011108p:plain

鯖はショボいのを使ってますが、一応2秒以下で表示します。

feed走らせてるのと使用Themeが若干重いのかなとは思うのですが遅くても2秒弱で表示が完了します。

f:id:su3se:20190711011145p:plain

Googleの評価は91 かろうじて青のラインに行ってます。

f:id:su3se:20190711013926p:plain

はてなブログも大概にして重いし遅い

はてなブログはというと、ブログによっても違いますが、無料版でフロントが3記事表示にしている場合でこれです。

f:id:su3se:20190711052220p:plain

今回スクショしたのは5秒切りましたが場合によっては7秒とかになりますし、トップページの表示数が増えて画像やSNSれ動画等のシェアが増えるとさらに重くなります。

f:id:su3se:20190711052356p:plain

自分のこのブログでGoogleの評価は32です。


表示速度が遅いと見てもくれません!

以下のデータは2017年のGooleが発表した表示速度と離脱率の関係性を現したグラフで3秒以内に表示させても32%が離脱する10秒なら123%、6秒で100%超えているので3秒以内に表示させないとほぼ見てもらえないということです。

3秒以内でも10人に3人はアクセスしてそのまま閉じてしまう

f:id:su3se:20190711014200p:plain

  • 表示速度が1秒から3秒に落ちると、直帰率は32%上昇
  • 表示速度が1秒から5秒に落ちると、直帰率は90%上昇
  • 表示速度が1秒から6秒に落ちると、直帰率は106%上昇
  • 表示速度が1秒から7秒に落ちると、直帰率は113%上昇
  • 表示速度が1秒から10秒に落ちると、直帰率は123%上昇
  • ページの要素(テキストやタイトル、画像など)の数が400個から600個に増えると、コンバージョン率は95%下がる

出典:

せっかくしっかりとコンテンツを作っても誰も見てくれないなんて悲しすぎます。

ド初心者にWordPressは向いていない

最近のレンタルサーバーはWordPressの「簡単インストール」が実装されていることが殆どなのでやろうとすれば誰でもWordPressを導入することが可能です。しかしWordPressオープンソースソフトウェアですので、すべての管理を自分で行わないといけません。

WordPressの導入は簡単でも入れた後で本体やテーマ、そしてプラグインのバージョン管理が必須です。これを怠ると脆弱性を突かれてクラックされたりもしますしPHPやデータベース、その他WordPressに関係しているすべてで、どこかをバージョンアップしたら互換性や相性が悪くなって表示が崩れたり真っ白になって壊れたりします。

その他にもダッシュボードにログインできなかったり、原因を特定する術を知らないと消すことになる事態に陥ることもあります。

またWordPressプラグインで色々なツールや便利な機能を簡単に入れ込むことが可能です。しかし、その反面でプラグインを入れれば入れるほどサイトの表示速度が遅くなったりもします。テーマとプラグインの相性もあるし日本語の情報で有名なプラグインだからと言って自分の環境下でそれが実際ベストとも限らないんです。

自分でいじれないのならWordPressほど面倒なツールはない!

メンテナンスできないならブログサービスの有料版がベスト

総合的に考えて行くと、自分で色々な対処が出来てメンテナンスが出来る人以外がWordPressを導入すると余計な手間ばかりが増えることになってしまったり機能性を十分に発揮できなくなってしまったりするので、それならいっそ「はてなブログPRO」なんかを使った方がブログ記事を書くことだけに専念できてブログを書くことで得られる恩恵を十分に得ることが出来るようになるんじゃないでしょうか。

と言う訳で、WordPressが誰にとってもベストな選択肢じゃない

というまとめで今回の記事を終わります。

色々更新して思ったこと

Suuupeを作り始めて2か月くらい経っただろうか、開発したツール関係をシェアするのにSuuupeToolsを作って、そこのダッシュボードを更新しました。

これを参考に自サイトの更新情報を別ブログで書いて新着で掲載するってことを組み込んだんですけど、ついでにβ版として作ったサービスのリンクも足して一覧を作ってみました。

f:id:su3se:20190710050451p:plain

こうやって並べてみると、2か月たってこれしか出来てないのか・・・

って感じました。

全振りでSuuupeの開発をしてるわけでは無いから出来る範囲ではやってるんだけど個人的には「これだけか」って感想です。

しかも色々と中途半端じゃんねw

もっとスピードアップせねば・・・とは思いつつも、このプロジェクト自体が勉強の一貫であって特に着地点が無いでスタートしてるからこのペースでも良いのかもしれないし、だからこのペースなのかもしれない。

最終系で想像してるのは目指せGoogleなんだけど天才集団のgoogleにド初心者の自分が一人で挑むってのも目標設定として大いに誤りがある。

もっと地道に小さな目標を設定してクリアしていかないといけないのかもしれない。

 

Suuupeに対しての目標・・・

ん~なんだろうか・・・

 

一番はじめにゴールを決めてないのがそもそもの間違いなんだろう。

PHPで外部サイトのRSSフィードを取得して表示させる

f:id:su3se:20190710040443j:plain

自サイトに別のブログから新着情報を表示させたかったので、PHPで外部ブログのRSSフィードを読み込んで表示させるプログラムを導入しました。

参考にさせていただいたサンプルコードがシンプルで分かりやすかったです。

サンプルコード

RSS取得

<?php
$rss = simplexml_load_file('https://on-ze.com/feed');
echo '<ul>';
foreach($rss->channel->item as $item){
$title = $item->title;
$date = date("Y年 n月 j日", strtotime($item->pubDate));
$link = $item->link;
$description = mb_strimwidth (strip_tags($item->description), 0 , 110, "…Read More", "utf-8");
?>

表示

<li><a href="<?php echo $link; ?>" target="_blank">
<span class="date"><?php echo $date; ?></span>
<span class="title"><?php echo $title; ?></span>
<span class="text"><?php echo $description; ?></span>
</a></li>
<?php } echo '</ul>'; ?>

 

参照サイト

on-ze.com

エンジニアに支給するパソコンがショボ過ぎる

f:id:su3se:20190709070610j:plain

うちはフロントもサーバーサイドも一人でやってるんですけど、引き継いだパソコンがDELLWIN8でcorei5メモリー4GBのノートPCを仕事用のメイン機として使っています。これがまた、起動が遅いのなんのって・・・

色々と高速化につながることはやってるんですけど、どうやらHDDがそろそろ限界に近いみたいなんですよね。

ディスク使用料が増えてくるとHDDからカリカリと少々異音がするんです。

贅沢言うならSSDにしてほしいし、HDDでもメモリー32GBくらい欲しい・・・

いや16GBでも良いよ・・・

Office起動するのに1分いかないくらいかかるとか、フロントエンドもやらないといけないんだからadobeだって使うんです。

adobeを使おうとすると大変で、メモリー不足かわからないですがデータを編集してると表示されてるツール関係のボックスが消えたりするんですけど、一度デスクトップ表示させて再表示させると戻ったりします。しかも使ってるのCS2だからねw

CC入れたいんだけど・・・

こんなパソコンを使ってるんだけど、ついに電源を入れてからの初期起動で立ち上がらない現象が起き始めて動き出せるまでに再起動を繰り返して20分くらいかかってようやく立ち上がるみたいな感じになって来たので良い加減新しいパソコンを買ってくれと伝えたら「何が調子悪いんだ?」というので現象と原因について説明したら返ってきた言葉はHDDを入れ替えて修理すれば良いと・・・

中古で2万で買えるパソコンのHDDを修理して使うのか(; ・`д・´)????

 

そうじゃないって・・・って話をしたら段々と怒りのボルテージが上がりだす始末だ。

 

確かに探せば1万くらいで直せて安上がりだけど俺の生産性は限りなく下がってるんだけど・・・パソコンは俺たちの唯一の武器だから中古で5,6万もだせば16GBのノート買えるんだからそれくらいケチんじゃねー!って話。

最新鋭のマシンじゃなくても良いから今のインターネットの環境に対応できる最低限のスペックのマシンくらいよこせって話です。 むしろハードディスクの容量なんて別にそんなにいらないから、メモリー上げて欲しいんですよ・・・

動画編集はやらないからそこまでハイスペックじゃなくて良いけどさ

中古端末のHDD500GBメモリ32GBとかで良いっす。。。16GBでも良いっす

 

無駄な待機時間と無駄なクリック、無駄な動作が増えて思考も中断される・・・

待ってる間に寝落ちしそうなんですよwそれが無くなるだけで俺の作業効率は倍速になると思う。だって家で自分の端末で仕事してた方が倍以上進むんだもん・・・

 

さすがに俺もムカついて自分のノートPC持ち込んだらそれを見たからか一日の終わりころには新しい端末の購入の許可が出た。唯一の救いはコンプラが皆無だってことだけかw結果的に良い端末を買って良いことになったから、これもまた俺の思うように事が運んだ。ラッキーラッキーwww

 

普通にあり得ないことが多すぎるんだけど、エンジニアやデザイナーに支給するPCはそこそこ良いの与えないとそれが原因で見えない損失が出てるってことに気付いた方が良い。特にそっち系に疎い管理者や経営者は。。。

 

これからは何でもシェアリングエコノミーでしょう【コラム】

f:id:su3se:20190708024635j:plain

このところ色々と考えることが多くて、最近話題の話であれば「働き方改革」とかはホットな話題だけど、この働き方改革を後押しするのは最新技術の人工知能、AI技術だったりロボット工学だったりは影響が大きいと思うのね。先日は韓国に半導体の輸出規制強化(通常に戻しただけw)って話もあったけど、いろんな金の流れだったり政治的な戦略も兼ねてそうした手段を取ったのかなって思ったりもするんだけど、今回のコラムは政治的な話に持って行きたいわけじゃないのでコレについては深くは掘り下げないで行きますが、元号が令和に代わって色々と時代が動き出したなって思っていて、今までだったら技術や知識を持った人(企業)がそうでない人に向けてサービスを展開して対価を得るという資本主義の根本的な経済活動を私たちはしていて、今でもその流れでほとんどのことが来て入ると思うんだけど、知識も技術も底上げされて個人でも生活できるレベルで金を稼げる人も増えてきている昨今では、資本主義の在り方っていうのが通用しなくなってきてるんじゃないかって思うんですね。

ここ数年で加速度的に変わってきてるように感じます。

WEB関係で見ても例えばホームページ制作なんかは制作会社に依頼すれば安くても2,30万から請求が来るけどクラウドソーシングなら2,3万で済むし、ちょっと勉強すればWordPressで綺麗なホームページを素人でも作れるでしょう。WIXみたいなサービスを使えば無料で作れてしまうので企業に2,30万払うのがバカらしくなってくるよね。

もう今までのように単純なことで消費が生まれない、生まれにくい時代だと思います。

どこから金を生み出すのか、これまでのように単純に搾取するって時代はもう終わってきてるんだろうなって感じるので、プラスアルファの付加価値が重要な部分であるし、今までなら出来る人が出来ない人から搾取する構造だったから少しでも搾取しやすいよう、競争の中で少しでも上に、少しでも有利な立ち位置に行くために活動してマーケティングを行ったりブランディングを行ったりして権威性を出したり「生き残るための闘い」を日々繰り返してきたと思うんだけど、今って生き残るために戦う時代っていうよりも分け与えたり手を取り合ったりする時代だと思います。ズルをすればすぐにバレるし間違ったことをすればそれがスグに晒されてネット上に拡散され、権威性を出すために上から物を言ってもハリボテはスグにバレるから一昔前のオンライン上のビジネスなんたらみたいな人たちのやってることだってほとんどの人はアレを見て「こいつはクソだから近づくの辞めとこう」って感じてるし手法だってバレバレよなってきてる。

もう、そういう時代じゃないんだよね。

SNSとかでもフラットになってきてるし個人の人間性というのもすごく浮き彫りになってきていると思うのよ。

出来る人が出来ない人から搾取することで成り立ってたものからもっと複雑になっていて直線的な物から、より曲線的に利益を得て行く方法を取っていかないといけないと思うんです。

今の時代は手を伸ばせば何でも手に入るし何でもできる時代なんですから今までできなかったことが「出来て当たり前」の時代になってきてる中で単純に物を売れば買う人がいた時代から買わないでも手に入る、買う必要も無い時代になってきてるとすると自分が持ってる情報やスキルを全部無償で放出したって良いくらいだと思うんです。だって探せばどっかには落ちてるんですから、それでも動かない人、出来ない人、支援が必要な人というような人たちはまだまだたくさんいるから、そういうところで従来の搾取構造は成り立つのだろうけど根幹は需要と供給のバランスは減ってきてて放出した先の部分を考えて行かないといけないし、それを踏まえて動いてる人が利を得て行くんだろうなって思います。

ここまでで書いた内容は、もう何年も前から言われていたことではあるのだけど、例えばクリスアンダーソンの「FREE」という書籍では無料からお金を生み出す戦略について触れています。

f:id:su3se:20190708032133j:plain

これを読んだことがある方ならわかると思うんだけど、無料からお金を生み出すというのは特にWEB関係だとこうしたマーケティング戦略を今までも取って来たけど、個人的には「FREE」で触れている内容は旧世代の戦略であって、ここからもう一歩踏み越えて行かないといけないと感じています。

無料から有料化の流れの中で今の時代は一企業が有料サービスにしている部分を別の企業や別の手段を用いると代替えできることも多く、仕掛けて行く側はこの競合他社のことも考慮しなければいけないので考える項目は膨大に増えていると思います。

こうなってくると戦略的にはかなり複雑化しているよね。

これを考えていけて、なおかつ実行できる人が生き残っていくし、ロボットや人工知能では出来ないことなんだと思うし、大きな利を得て行くことにもつながっていくんだと思うんです。

この考え方はどんなビジネス本よりも、まずはこんな本を読んだ方が良いでしょう。

f:id:su3se:20190708033829j:plain

f:id:su3se:20190708034018j:plain

武士道はこれからの生き方として、ビジネスでもプライベートでも活きてくる考え方だと思います。

 

f:id:su3se:20190708035925j:plain

 

タイトルでも書いた「シェアリングエコノミー」について

シェアリングエコノミーとは

共有経済=ヒト・モノ・場所・乗り物・お金など、個人が所有する活用可能な資産を、インターネットを介して個人間で貸し借りや交換することで成り立つ経済の仕組みのことです。

参照:共有経済 - Wikipedia

一般的なシェアリングエコノミーは「個人間で貸し借りや交換」で対価が発生したりはしているけど、対価が発生するタイミングが従来よりも、もっと後に来るというのをイメージしています。回り回って結果的に利益が生まれる部分に繋がっていくというニュアンスで必ずしも直線的に利益につながっていくようなことだけじゃなく、全く別の利益につながっていくような、AというビジネスとBというビジネスがリンクしていくようなニュアンスでABだけじゃなく相乗効果的にビジネスモデルが複雑化して全体で世界に繋がっていくようなことがこれからもっと起こってくるんだと思います。

根本的な考え方を考査するのに古き良き日本人の精神性というのはこれからカギになってくるんじゃないかな・・・

 

 

PS.

もっと短くわかりやすく書けるようになりたいな・・・

太鼓の達人がネットで遊べるw「太鼓ウェブ」

f:id:su3se:20190707232006p:plain

太鼓の達人がウェブ版で登場したw

一応オープンソースで公開されてるけどライセンスの明記はない・・・

著作権関係がどうなってるのか、非正規なら恐ろしいことだ。

 とりあえず、高画質で音も良い。

動きも良い。

申し分ないが、このサイトはいつまで生きてるだろうかwww

 

taiko.bui.pm

 

公開されているソース

github.com

 

これ大丈夫なのか?

文字数チェックツールをToolsに組み込みました

f:id:su3se:20190707173213p:plain

以前、もじッくんを作ったときの文字数チェックツールをToolsに組み込みました。 

 

一応、今のところは両方生きてますがそのうち「もじッくん」整理するのに消しちゃうかもしれません。

 

WEB制作に便利なツールを片っ端から入れて行きますのでSooopeToolsをぜひブックマークしてください。

ご意見ご要望もお待ちしています。

HTML・CSS・JavaScriptが使える無料オンラインエディタ

前回、オンラインHTMLエディタを実装したという記事に「HTMLだけじゃなくてCSSjavaScriptも一緒に使えたらいいよね!」というコメントをいただいて、早速ですが別のエディタも作ってみました。

f:id:su3se:20190707114813p:plain

一応、HTMLとCSSはリアルタイムで反映されるようになったんですけど、javaScriptは動作テストしていなのでもしかしたらちゃんと動かないかもしれません。

 

ツールはこちらで試せます。

f:id:su3se:20190707115012p:plain

SuuuPeTools - Dashboard

 

関連記事

 

 

 

無料で使えるオンラインHTMLエディタ(リアルタイムプレビュー機能付き)

f:id:su3se:20190706221805p:plain

SuuupeToolsにオンラインHTMLエディターを実装しました。

類似サービスは色々ありますけど、こうしたWEB制作系のツールは一通り実装していくつもりです。

(理由としては自分専用で自分が使うために作ろうとしている部分が大きいです)

 

前回の記事で書いたダッシュボードに簡易的なリンクと共に実装してあります。

今後、そこの見栄えなども整えて行くつもりではいますのでよろしくお願いします。

 

SuuuPeTools - Online HTMLEditor

 

関連

 

PS.

どうでも良い事かもしれないんだけどね、「 エディタ」なのか「エディター」なのか、表現するうえでどちらがより適切なんだろうか・・・

HTMLテンプレートをPHPでincludeして成形する

f:id:su3se:20190706064835p:plain

Toolsダッシュボードを良い加減作ろうと思い、adminページを作れるHTMLテンプレートからPHPに直して枠組みを作りました。

使用したHTMLテンプレート

 上記のテンプレートを使ってダッシュボードを作って行こうと思います。

まずは、テンプレートのトップページ(index.html)を見てみるとこんな感じにズラっとHTMLが記載されています。

f:id:su3se:20190706065052p:plain

今後運用していくのに更新しやすいようにブロックに分けて行こうということでヘッダー、サイドバー、メインコンテンツ、フッターの4つに分割していきます。

今回使ったHTMLテンプレートのワイヤーは以下のような感じになっているのでそれぞれ名前を付けて分割していきます。

 

f:id:su3se:20190706070237p:plain

分割して行く為、以下の名前のPHPファイルにそれぞれindex.htmlのソースを分割してブッこんでいきます。

HTMLが読めればどこからどこまでかを調べてそれぞれindex.htmlからコピペして保存

大元になる分割した物は別のディレクトリ(include)に入れています。

f:id:su3se:20190706070922p:plain

次に大本のトップページになる部分を作って行くので「index.html」の代わりに「index.php」を作って行きます。

分割したデータをPHP上で呼び出して表示させたいので以下のサンプルコードを使いました。

 

include

<?php
include("呼び出すPHPファイル");
?>

 

成形したソースがこれ

f:id:su3se:20190706071534p:plain

途中パンくずリストを書いてる部分があったのでとりあえず今回はそこを飛ばしてincludeしました。

パンくずリストPHP化しちゃえばトップページのindex.phpは10行以下で終わるんでしょう。WordPressもこんな感じでやってますよね。

 

ダッシュボード(adminページ)DEMO

suuupe.com

 

追記

パンくずリスト()もincludeで呼び出すようにしたらindex.phpは7行になりました。

f:id:su3se:20190706103401p:plain

パンくずリストの自動生成化も出来るようなので後で実装してみます。

とりあえず、分割したファイルの整理は徐々にやっていきます。

 

参照