クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

php の検索結果:

【HTML】テンプレートエンジンEJSでFizzBuzzる!(Pugとの比較あり)

…ードを書く。なんだかPHPに似ている書式! ※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと こちらの記事にEJSの基本的な書式が網羅されていた! ※参考:テンプレートエンジンEJSで使える便利な構文まとめ - Qiita 上記のFizzBuzzコードをEJSで書いてみるとこうなる。 <% var title = 'EJSでフィズバズる'; %> <% var count = 30; %> <section> <h1 class="red"><%…

【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)

JS

…ーティングについてはPHPのフレームワークLaravelに出てきた概念。「○○.html」という静的なファイルを物理的に用意せず、動的にページを生成する。 ※参考:【Laravel】ルーティングファイル(routesディレクトリのweb.php)にページを直書きしてみる - クモのようにコツコツと Nuxt.jsのメリット 次にNuxt.jeのメリット。上記のVue.jsの弱点を拡張するプログラムがいくつか出ているが、それらを一つ一つインストールするのは手間が多いため、全部そ…

【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く

JS

p5.jsの続きです。前回まではドットインストールのコードを紐解きました。今回からは「Generative Design with p5.js」のコードを見ていきたく。最初は「色」編です。それではいきましょう!

【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)

JS

…ンクルードタグ <?php get_header(); ?> これを貼った場所にヘッダー(header.php)がインクルードされて表示される。 ※参考:ざっくりWordPress:PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと header.phpにはhead要素の閉じタグに下記のコードを書く。 <!--header.php--> <?php wp_head(); ?> </head> ※参考:ざっくりWordPress:PHP書式とテンプレートタグの…

AWSを理解するために調べたこと(Webサイトホスティング編)

…ySQL (DB)、PHP(サーバサイド言語)の略。 ※参考:Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス) - クモのようにコツコツと サーバレスとはFirebaseとか。今回のスライドでは扱っていないがAWSにも「Lambda(ラムダ)」というのがあるようだ。サーバが無い(レス)ということではなくサーバの管理が不要というニュアンス。 ※参考:サーバーレスとは? 簡単な事例をまじえてわかりやすく解説! – キュービストブログ インフラ要素(p11)…

WordPressのCSSやJSをテーマのphpファイルをいじらずにダッシュボードだけでカスタマイズする方法

…スタマイズ、テーマのphpファイルをいじらずにダッシュボードだけで完結できました。自作テーマどころか子テーマを作るのも面倒だ!という方は是非こちらの方法をお試しください。 【目次】 Twenty Nineteenはクセが強い! これまでのカスタマイズ(自作テーマ、子テーマ) 自作テーマ 子テーマ 外観>カスタマイズの「追加CSS」でCSSをカスタマイズ 外観>ウィジェットの「カスタムHTML」でJSをカスタマイズ 保存ができない場合の推奨プラグイン「Simple Custom…

webpackを理解するために調べたこと(Webデザイナー→フロントエンドエンジニアへの脱皮)

…ップのように中心に位置しているとは言い切れないことも知ったので、これから一つ一つの機能や位置付けを実際に手を動かして実感しながら理解していきたく思います。 ※参考:Web開発環境の記事まとめ qiita.com *1:さらにサーバサイドまで視野を広げるとCMS、ECサイト、会員サイトなどを作るためのサーバサイド言語(PHP、Rubyなど)、フレームワーク(Laravel、Ruby on Railsなど)、DB(SQL)、ローカル環境(Dockerなど)の知識が必要になってくる

ラテラルシンキングとロジカルシンキングを使って右脳も左脳もフル稼動しよう!

右脳を使う「ラテラルシンキング 」と左脳を使う「ロジカルシンキング」が対な関係で面白い!右脳型の方も左脳型の方も二つの思考法を車の両輪のように活用して、脳をフル稼動させましょう♪(ちなみに私は典型的な左脳型人間ですw)。なお、今回は二つの思考法を知る手がかりとなるキーワードをとにかく拾いまくりました。深掘りにご活用ください。それではいきましょう!

【Laravel】MVCのコントローラ(C)ことはじめ(3年B組金八先生を表示する!)

PHP

…ィレクトリのweb.php)にページを直書きしてみる - クモのようにコツコツと MVCとは何か MVCとは何か。Mはモデル(Model)、Vはビュー(View)、C(Controller)はコントローラ。習得中の書籍「Laravel入門」によれば… モデル(Model):データ処理全般を担当。DBにアクセスする処理全般 ビュー(View):画面表示を担当。表示に使うテンプレートに相当 コントローラ(Controller):全体の制御。必要に応じてMでデータを取得したりVで画…

【Laravel】ルーティングファイル(routesディレクトリのweb.php)にページを直書きしてみる

PHP

…ィレクトリのweb.php)にページ情報を直書きして、いくつかの動的なページを作ってみました〜。完成品はHerokuにデプロイしてます。それではいきましょう! 【目次】 ルーティングファイル(Routesディレクトリのweb.php)からページを読み込む web.phpにページを直書きしてみる web.php内でヒアドキュメントを読み込む ルートパラメータを読み込んでページ上に表示する 任意パラメータを設定(ワードを入れなくても任意のワードが読み込まれる) 複数のパラメータを…

LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと

PHP

…ーン MAMP環境でPHPファイル作成 MAMP→Sourcetreeにコミット Sourcetree→GitHubにプッシュ GitHub→Herokuにデプロイ このときはいかに黒い画面(コマンド)を使わずにGUIのみでいけるかを追求していた。この方法をとれば、サーバサイド版のCodePenをHerokuでやっていけると思っていた。ところが、同じ手順でLaravelコンテンツをHerokuにデプロイしてみても、画面が表示されない(汗) MAMP環境では表示されているLar…

Laravelの/publicをルートに変更しHello worldする

PHP

…の中身 index.phpを開く RouteServiceProvider.phpを開く routes/web.phpを開く /resources/views/welcome.blade.php`を開く 白い画面にHello worldする 下層ページを作ってHello woldする /subpageを表示(Not found) routes/web.phpに下層ページの設定を追記 /resources/views/subpage.blade.php`を作る 最後に ※参考:…

Laravel元年!インストールしてMAMP環境で白い画面出す!!

PHP

… LaravelとはPHPフレームワーク。Webアプリ(ブラウザで動くアプリケーション)を作ることができます。WordPressなどのCMSを構築するまでの規模じゃないがPHPやDBを動かすコンテンツを作りたい、という場面が増えてきたため、ぜひ習得したいと思っています。2019年度のマイテーマの一つです。 PHPとPHPフレームワークについてはこちらで書きましたが、この時点ではPHPフレームワーク=CakePHPのイメージしかありませんでした。 ※参考:サーバサイドの中でのW…

【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編)

JS

…18年の11月だったのでちょっと間が空きました。まだこの段階では生JSやjQueryでもできるようなことを再現しているだけなので、リアクティブなどのSPAらしい恩恵を体験していません。 今年はJSフレームワーク(まずはVue.js)とPHPフレームワーク(まずはLaravel)をマイテーマにしてるので、また更新ペースをあげていきたく思います。それではまた!! ※参考:Vue.jsの習得のためにやったことまとめ qiita.com *1:口髭という意味らしいです。横回転した口髭

【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!

PHP

…functions.phpに追記しないと有効にならない機能ですがTwenty nineteenでは最初から有効です! まあ今回はページ遷移がないのでこのまま未設定でいきます。 テーマカスタマイズ 次にテーマをカスタマイズしてみましょう。「外観」の「カスタマイズ」を開きます。 サイドバー付きのプレビュー画面になります。要素の所々に鉛筆アイコンが。 クリックするとカスタムできる項目が表示されます。 ロゴ、サイトタイトル、キャッチフレーズを変更。 プレビュー画面に反映されました! …

【indeed】Web業界(フロントエンド〜サーバサイド)技術キーワード別の求人件数(2019年4月)

…でしょうか。2位の「php」はサーバサイド。3位の「JavaScript」はフロントエンド。表記のゆれがあり最後の「js」と足すと実はphpとほぼ同じです。 続く「python」「ruby」はサーバサイドで拮抗してます。pythonは機械学習で人気が上がっています。フロントの3番目「css」は意外と少なかったですね。あとCGIでかつてメジャーだった「perl」は今も件数としては多いです。 プログラミング言語 求人件数 html 17,610 php 15,625 javasc…

【indeed】職種別スキル集計:Webデザイナー、Webディレクター、UI/UXデザイナー、フロントエンドエンジニア、サーバサイドエンジニア(2019年3月)

… 4 テクノロジー PHP 4 ビジネス コミュニケーション 4 テクノロジー Sass 3 テクノロジー Angular 2 テクノロジー C 2 テクノロジー Git 2 アプリ illustorator 2 テクノロジー JSフレームワーク 2 テクノロジー OSS 2 アプリ Photoshop 2 テクノロジー Python 2 テクノロジー React 2 テクノロジー Redux 2 テクノロジー SQL 2 テクノロジー システム開発 2 テクノロジー 高速化…

Webデザイナーに必要なスキルと代表的な7つのキャリアパス

…やバックエンド言語(PHP、Rubyなど)の知識も身につけると役に立ちます。 ※参考:【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと 未経験からWebデザイナーを目指すには、まずは3スキルの一つ目「アクセス解析」「コーディング」「モックアップ」から入るのがいいでしょう。 他職種からのキャリアチェンジ 未経験からWebデザイナーを目指す以外に、Webデザイナーと関わりの深い他職種からキャリアチェ…

【WordPress】All-in-One WP Migration(全移行)とDeMomentSomTres Export(一部移行)の違い

PHP

…wp-config.php内のDB情報を書き換える 移行前サーバのPhpMyAdminでDBのsqlファイルをエクスポート 移行後サーバにWordPressファイル一式をFTPソフトでアップロード 移行後サーバのPhpMyAdminでDBのsqlファイルをインポート Search Replace DBでDB内のURLを新しいURLに置換する あちこち開いていじるため作業が複雑だし、DBやURLに影響するのでなかなか緊張する作業でした。 All-in-One WP Migrat…

【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

…。 ※参考:フォームPHPはじめの一歩($_GETと$_POSTの違い) - クモのようにコツコツと 送信ボタンをよりボタンとわかりやすくしたいのでCSSを当ててます。 .yomu { margin: 0 auto; width: 50%; height: 2em; margin: 0 auto; display: block; color: #fff; border: none; background: #666; border-radius: 5px; font-size…

フォームPHPはじめの一歩($_GETと$_POSTの違い)

…データ送信には外部のPHPフォームプログラムを利用していました。今回は、フォームPHPの$_GETと$_POSTを自分で書いて、動きの違いについて検証しました。 【目次】 フォームからサーバにデータを送信 HTMLフォームの基本 htmlファイルのphpファイル化 PHPコードを追記 $GETと$POSTのフォームを送信してみる method="get"のフォームはクエリパラメータに値を渡す $_GETはクエリパラメータを格納する $_GETはあとから打ち替えられる $_PO…

ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!)

…) ローカルサーバでPHPファイルを作成 ローカル→Sourcetreeにコミット(更新)→GitHubにプッシュ(反映) GitHub→Herokuにデプロイ(本番環境を作る) 最後に Herokuに至る道 前々回、Laravelなどで作るWebサービスの公開方法を検討し、下記の2つに絞り込みました。 共用サーバの仕様をSSH接続できるプランにあげる PaaSのHerokuの無料枠を使う ※参考:Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス) - …

ブログに埋め込めるオンラインIDE比較(サーバサイド版のCodePenを探して)

…n サンプルコード(PHP) ideone repl.it Paiza.io 最後に:その他のオンラインIDE フロントエンド言語御用達のCodePen CodePenはこのブログでいつも使っているオンラインIDEです。 ※参考:https://codepen.io/ ブログに埋め込めます。 See the Pen dot_e_18 by イイダリョウ (@i_ryo) on CodePen. 上のタブのところで言語(HTML、CSS、JS)と実行結果を切り替えることができま…

Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス)

…刺激を受けて、自分もPHPのフレームワークlaravelで何かを作ってみようと思いましたが、なんと自分が契約しているレンタルサーバの仕様だとlaravelを公開することができないことがわかりました!ここ数日、サーバのことをいろいろ調べて時間を費やしたため、いったん記事にまとめます。 【目次】 laravelを公開するにはSSH接続が必要 レンタルサーバの種類(共用、VPS、専用、クラウド) クラウドサービス(SaaS、Paas、IaaS) 最後に laravelを公開するには…

Pythonの基本を理解するためにJSと比較する

…目の記事です。以前「PHPの基本を理解するためにJSと比較する」という記事を書きました*1。本記事はその「Python版」です!ちなみに私のPython歴は「Hello World」までです。Webデザイナーが新たなプログラミング言語を始めるときは「JS」と比較すると理解がしやすいと思います。よっしゃ、来年こそはPythonでデータ分析や機械学習に取り組むぞ〜〜(抱負) 【目次】 コメント 変数 関数 組み込み関数 文字列の連結 整数型→文字列型変換(str()関数) 文字列…

Smart Custom Fieldsの繰り返し(グループ)機能の出力タグ一覧

PHP

…WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと Gutenbergの「ブロック」と「カスタムフィールド」の違い WordPress 5.0で搭載される新しい記事作成機能Gutenbergの「ブロック」。2018年12月現在、WordPress 4.9.8でもプラグインで先行体験できます。 Gutenberg | WordPress.org 私も早速触ってみました。いろんな種類のブロックを積み木状…

黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成

「初めての黒い画面」以降、ちょいちょい黒い画面(ターミナル)に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWebページが作れちゃうんじゃないの?と。実際にやってみた。

初めてのNode.js:インストール確認、REPL、Hello worldまで

JS

…ースソフト P = PHP(Perl、Python):プログラミング言語 オープンソースで無料提供されているのが共通点です。 ※参考:LAMP環境ってなに?Webサービスを作るための環境構築を理解しよう | 東京上野のWeb制作会社LIG Node.jsをここに当てはめるとすると、Node.js=PHP?いいえ、違います。Node.JSはどちらかというとApatchに近い位置付けです。 ※参考:初心者向け!3分で理解するNode.jsとは何か? つまりこうなりますね。 L =…

初めてのRuby:インストール確認、REPL、Hello worldまで

…す。どちらかというとPHPのechoに近い形ですね。 ※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと そして行末にセミコロン;がつかないところはPhtonと近いです。 rubyフォルダに移動(cd)、パス確認(pwd)、ファイル一覧表示(ls) ここからは前回と同じ工程になります。ターミナルを起動してcdコマンドを打ちます。 $ cd Desktop/ruby 場所がチルダ~からrubyに移動します。 コンピュータ名:ruby ユーザ名$ 念の…

初めてのPython(インストール〜Hello world)と初めての黒い画面

…プリなど用途が広い PHP:Webに特化。フレームワークはCakePHPが有名。WordPressにも採用されている。 Ruby:国産の言語!フレームワークRuby on RailsがWebに特化。 Pythonが人工知能向けというよりも、他の3つがWebメインでPythonは用途が広いんですね。 ※参考:Perl、Python、PHP、Rubyについて - Qiita Perlは今から手を出さなくてもいいかな…と個人的には思っていて、PHPはある程度触れていて、Python…