すべてのカテゴリ

WEBの開発案件依頼があった際、本番環境１つしか無いケースが殆どです。いきなり本番環境で作業するのはリスクが高く、移行作業中のサービス停止時間も長くなります。なので、当方ではお客様が事前に動作確認できるステージング環境（STG環境。事前確認環境）を用意することにしています。今までテスト環境が無かったお客様には、そのまま運用フェーズでも利用していただくことも可能です。バックアップ環境としてのメリットも生まれると思います。※本番環境でコンテンツ投入している場合、テスト環境と差が生じてしまうと思いますが、そのあたりは案件によって自動化したり、手順書でミスの無いよう補う形をとっています。以上ご紹介させていただきました。（余談）どういう構成にしようかChatGPTと会話しながら検討してる中で構成図を描いてもらったら、何だか美的な絵が仕上がって面白かったです。（開発者向けの余談）今までSTG環境はAWSのLightsailだったり、お名前.comのサーバ内で建ててましたが、サーバーOSやPHP、DBのバージョン毎に変えるのが割と手間です。ということで、基本的に今後はPC内の開発環境も、STG環境もクラウド上のDockerに持つ事にしました。打ち合わせで外出して、次の予定までの時間に続きの作業をしたい場合、自宅PCとノートで作業状態が同期できてると助かるのですが、コミットしたけどPushしてなかったとか、ありがちなミスも防げます。また、PHPのデバッグをする際、以前はXAMPPでXdebugを動かしてたのですが、クラウド上のDocker内でXdebugも動かせたので、これで今までと変わらず作

　Excelで業務改善ツール作成を生業とする私にとって、Excelの操作性はとても重要です。　そこで、今回は私が使っているパソコンと外部モニターについて紹介します。あくまでも自分の小遣いで買える範囲のものなので、他の皆さんのように高級品という訳にはいきませんが、私にとっては十分な環境化でツール開発を行っております。　今回は「表示環境編」としていますが、他にも操作性を向上させるガジェットを使っておりますので、またの機会にご紹介できればと思います。①ノートパソコン1　ココナラを始めた2年前の時に使っていたものです。 　・主な仕様 　　[商品名]LAVIE NS350 　　[画面サイズ]15.6型(1920×1080) 　　[CPU]インテルi3-6100U 　　[メモリ]メモリ:8GB+4GB) 　　[OS]Windows10　　[Excelの表示サイズ]Z列34行②ノートパソコン2　多くのお客様から様々なツール作成を依頼していただけるようになり、先のメモリ12GBでは途中でフリーズするなど力不足を感じたため、昨年追加購入したものです。　・主な仕様　　[商品名]Envy x360 14-fa　　[画面サイズ]14型(2880×1800)　　[CPU]AMD8840HS　　[メモリ]メモリ:32GB)　　[OS]Windows11　　[Excelの表示サイズ]R列25行③外部モニター1　先の2年前まで使っていたノートパソコン(LAVIE NS350)ですが、文字が見えにくくなってきたので、外部モニターに接続して大きな画面で利用していたものです。　・主な仕様　　[商品名]EV2360　

Vue をパッケージ管理アプリを利用して使う！前回は、HTML の中に Vue の記述を書いて Vue を利用する方法を紹介しました。今回は、パッケージ管理アプリを利用して、Vue を使うやり方です。この方法は、公式チュートリアルで学んだ方法と同じやり方で Vue を利用する事ができます。この記事を読むのに必要な前提条件は：プログラムを入力するためのエディタがインストールされている（VSCODなど）NodeJSがインストールできるコマンドラインの使い方がわかる（Windows の PowerShell や Mac/Linux のターミナル）まずは、この記事をお読みになる前に、VSCODE などのエディタをインストールして、簡単にアプリを開いてみてください。パッケージ管理アプリとは？パッケージ管理アプリは、インターネット上に公開されている誰かが既に開発したモジュール（部品）を自分の開発のプロジェクトに取り込むためのアプリです。よく利用する基本的な機能は、大抵は誰かが作ってインターネット上で公開されています。そうしたモジュール（部品）を活用することで、アプリの開発を効率的に行う事ができます。よく利用されている、パッケージ管理アプリは幾つかありますが、この記事では、「_npm_」というパッケージ管理アプリを利用して、Vue を使うやり方を紹介します。「_npm_」は、「_NodeJS_」という Javascript のプログラムを、Web ブラウザではなく、PC 上で動かす際に利用するパッケージに入っています。NodeJS のサイトからダウンロードできます。インストールのやり方は N

WordpressとはWordpressとはPHPというプログラミング言語で作られていて, いわゆるCMS(コンテンツ・マネジメント・システム)の一種でブログやWebサイトを爆速で作ることができるツールです。実はエンジニア歴6年が経とうとしているに実際に使ったことがなく,今アフィリエイトを始めてみようというときにとりあえずの環境が欲しくて今回導入を決めましたローカルにそのまま環境構築してもいいのだが, AWSなどのサーバーにアップする予定だし, 使わなくなったら綺麗にしたいしでDockerで構築することにした本題に入る前に仮に本記事を見て, 疑問点や詰まったりなどした場合は以下のサービスにてご相談に乗りますのでお気軽にお問い合わせくださいませ^2000円と記載ございますが, お見積もり時に内容確認できましたら500円~承りますdockerの環境がそもそもないよって方は以下の記事をご覧いただければと思いますWordpressのDocker imageそもそもwordpressのdocker imageが存在するのか確認していなかったので検索$ docker search wordpressまぁ勿論ありますね環境macOS Big Sur 11.2.3手順1. docker-compose.ymlを作成するversion: '3'services:   db:     image: mysql:5.7     volumes:       - db_data:/var/lib/mysql     restart: always     environment:       MYSQ

Dockerとは?もはや言わずと知れたDockerですが念の為前置きとしてご紹介Docker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです。Dockerは、Linuxのコンテナ技術を使ったもので、あたかも別のマシンが動いているかのように動かすことができます。そのため、軽量で高速に起動、停止などが可能です。簡単にいうとマシン依存を無くして開発環境が構築できるということまた何か開発をしようとした時に仮想環境ごとにrailsだったり, PHPだったり,npm..etcをインストールすれば良いのでマシンに直接インストールする必要がなくなり, プロジェクトごとにバージョンを切り替えたりが不要になるストレスフルな世界が実現できます。IT業界のエンジニアだともはやDockerを使った業務経験が必須要項として一般的になりつつあるくらいです本題に入る前に仮に本記事を見て, 疑問点や詰まったりなどした場合は以下のサービスにてご相談に乗りますのでお気軽にお問い合わせくださいませ^^2000円と記載ございますが, お見積もり時に内容確認できましたら500円~承ります環境一応念の為私のMacのOSについて記載しておきます。macOS Big Sur 11.2.3※バージョンアップなどにより、手順が異なる可能性がありますのでご了承下さい。手順1. Docker for Macをインストール公式サイトからDockerをダウンロードしてインストールchromeなどで docker hub install mac と検索して上位に出てきます※coconalaが外部リンクが

Django で利用する SQL データベースの管理以前の投稿で、Django は標準でアプリの管理機能をサポートしているという事を紹介しました。この記事では、もう少し詳しく管理機能について紹介しています。データベースの管理や参照バックエンドを含めた Web サービスや Web アプリを開発する場合、データベースを利用するケースは多いと思います。Firebase を利用する場合は、Firebase コンソールを使うとデータベースの状態を簡単に参照できるので便利です。Django の場合は、SQL データベースを利用します。PHP で SQL のデータベースを管理する場合は、「phpmyadmin」が有名です。特に WordPress を利用する場合、データベースを直接管理する場合には便利なアプリです。phpmyadimin 自体は SQL データベースの管理なので、Django を利用する場合でも利用は可能ですが、別に Web サーバーを動かす必要もありますし、既に設定をされていない場合にはちょっと不便です。Django が標準でサポートしているデータベースは「SQLite」になります。このデータベースを利用する場合は、既に紹介している「SQLiteBrowser」を使えば必要な機能は揃っています。あとは、SQL データベースが提供するコマンドラインベースのアクセスを利用すれば、大抵のデータベースは直接アクセスが可能です。しかし、コマンドラインなので、慣れないと使いづらいのと、毎回コマンドをタイプしないといけないので面倒です。Django の管理アプリDjango は、フレーム

Python の開発環境をどうする？プログラミングの開発をする場合、開発環境は結構重要です。効率的に開発を勧められるかどうかで、開発期間も変わってくるからです。 通常の Web 開発では、Microsoft の VSCODE を活用していますが、今回紹介している Django を使った Web 開発では、Python を中心に利用することになります。Python の開発では少し違った環境を利用しています。 この記事では、現在私が利用している Python の開発環境について紹介します。VSCODE は選択肢の一つVSCODE はプラグインが豊富で、Python の開発をする場合でも便利な選択肢の一つです。Microsoft が提供する Python の拡張機能だけでも十分に Python の開発をする事が可能です。 実際に、Python だけではなく、Django の拡張機能も豊富です。普段の Web 開発では VSCODE を利用していることもあって、VSCODE も必要に応じて使い分けています。しかし、Django で開発するに当たって、いろいろ調べてみたところ、PyCharm の IDE も結構便利なので最近使い始めました。まだ、完全に使いこなしているわけではありませんが、結構便利に利用しているので今回簡単な紹介を書いてみることにしました。Python に特化した開発環境が魅力！一つの大きな理由は、PyCharm の場合、Python での開発に特化して作られているので、そのままで Python の開発に必要な機能は揃っているというのが一番の魅力です。 VSCODE の場

コーディングにおいて、開発環境の構築はすべての土台となる重要な工程です。ここで誤った選択をしてしまうと、後々多くの時間を費やすことになり、納期に間に合わず焦る原因にもなりかねません。今回は、WordPressにおいてオリジナルテーマ開発を対象とした、ベストプラクティスと言える開発環境を構築することができましたので、ご紹介いたします。ベストプラクティスとは何か※以下はあくまで当方の経験に基づく主観的な考え方となりますが、まず、次のようなことが実現できる環境であることが前提となります。 • ホットリロード（Hot Reloading）が利用できる • SCSSを使用できる • JavaScriptのコンパイルが行える • package.json によってライブラリを管理できる • WordPressのプラグインをコマンドで管理できる • GitHubでソースコードを管理し、本番環境へ自動デプロイできる今回構築した環境構成今回の環境では、以下の構成を採用しています。 • Docker による WordPress ローカル開発環境 • Vite によるフロントエンドビルド（Hot Reload / SCSS / JS コンパイル） • WP-CLI によるプラグイン・テーマのコマンド管理 • GitHub によるソースコード管理 • GitHub Actions を用いた本番環境への自動デプロイこれにより、ローカル開発・ソース管理・本番反映までを一貫したフローで運用できる環境を構築することができました。従来のFTP手動アップロードによる運用と比較して、更新ミスの防止、作業時間の短縮、

この記事は、Webデザイナー・技術者用の記事です。WordPressのオリジナルテーマ制作関連の書籍を読んでいると、たいていの開発環境がLocalというデスクトップアプリケーションを使っているので、私もしばらくそうやっていましたが、それほど性能のいいPCを使っていないため、WordPressの編集結果を保存するたびに、数秒の待ち時間が発生して、それをストレスに感じるようになりました。直接サーバーで編集したほうがすぐに更新されるのですが、functions.phpやstyle.cssなどを編集する必要がある場合は、ローカルで編集してからFTPでサーバーに転送するのもすこし面倒です。この記事では、その手間を短縮し、Visual Studio Code（VS Code）から直接Xserver上のWordPressファイルを編集する方法をご紹介します。開発効率を大幅に向上させ、保存時の待ち時間を解消できる実践的な内容です。前提条件・OS：これはローカル環境がWindows11で説明しています（Macでも同様にできるはず）。・サーバー：Xserverで説明していますが、SSH接続に対応しているサーバーならば応用可能です。・サーバーのディスク容量：作業するディレクトリに十分な空きがある事。・VSCode：Microsoft Visual Studio Codeが既にPCにインストールされていること。サーバーからSSH秘密鍵をダウンロードするサーバーに（WordPress管理者ではなく）サーバー管理者でログインします。Xserverの場合は、サーバーパネルが開きます。上図の「SSH設定」をク