【ブログ一覧】 - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます

Javascriptの楽譜描画ライブラリ『VexFlow』を試してみる

この記事は情報をまとめている最中の項目もあります。ご了承ください...五線譜の描画まずは空の五線譜を描画してみましょう。typescriptimport Vex from "vexflow";const { Renderer, Stave } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble"); stave.setContext(context).draw();}scoreRenderer();サンプルのコードはtypescriptでのソースコードになっています。音部記号ト音記号const stave = new Stave(10, 40, 400);stave.addClef("treble")addClefにtrebleを指定します。へ音記号const stave = new Stave(10, 40, 400);stave.addClef("bass")addClefにbassを指定します。ハ音記号const stave = new Stave(10, 40, 400);stave.addClef("alto")addClefにaltoを指定します。タブ譜const stave = new Stave(10, 40, 400);stave.addClef("tab")addClefにtabを指定します。その他音部記号vexflowの音部記号に関するソースコードはこのようになっていました。 return { treble: { code: 'gClef', line: 3, point: 0, }, bass: { code: 'fClef', line: 1, point: 0, }, alto: { code: 'cClef', line: 2, point: 0, }, tenor: { code: 'cClef', line: 1, point: 0, }, percussion: { code: 'restMaxima', line: 2, point: 0, }, soprano: { code: 'cClef', line: 4, point: 0, }, 'mezzo-soprano': { code: 'cClef', line: 3, point: 0, }, 'baritone-c': { code: 'cClef', line: 0, point: 0, }, 'baritone-f': { code: 'fClef', line: 2, point: 0, }, subbass: { code: 'fClef', line: 0, point: 0, }, french: { code: 'gClef', line: 4, point: 0, }, tab: { code: '6stringTabClef', point: 0, }, };addClefにtenor、percussion等の値も指定できるようです。拍子記号const stave = new Stave(10, 40, 400);stave.addTimeSignature("4/4");addTimeSignatureに拍数/音符の形式で値を指定すればOKです音符を描画するtypescriptimport Vex from "vexflow";const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("bass").addTimeSignature("4/4"); stave.setContext(context).draw(); // ↓追加 const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }), ]; const voice = new Voice({ num_beats: 4, beat_value: 4 }); voice.addTickables(notes); new Formatter().joinVoices([voice]).format([voice], 350); voice.draw(context, stave); // ↑追加}scoreRenderer();ソースコード後半のこの部分はバランスよく音符を配置するためのもののようです。const voice = new Voice({ num_beats: 4, beat_value: 4 });voice.addTickables(notes);new Formatter().joinVoices([voice]).format([voice], 350);new Voice({ num_beats: 拍数, beat_value: 音符});という形式になっており、各値は拍子記号と同じ数値を指定してください。ここで指定した長さと、音符全体の長さが合わないと描画できないようです。音符の描画const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }),];StaveNoteを使用し、配列で定義していきます。音の高さkeysで音の高さを指定します。音名(小文字)/オクターブという形式の文字列の配列を使用します。臨時記号は別で指定するようなので、c#/4のように指定しても描画されません。ちなみに音部記号を自動で判別してくれないので、音符ごとにclefというキーを追加する必要があります。stave.addClef("bass").addTimeSignature("4/4");//...const notes = [ new StaveNote({ keys: ["c/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["d/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q", clef: "bass" }),];音の長さdurationで音の長さを指定します。qは四分音符です(quarter)。数値でも指定できるようなので、こちらの方が楽そうです。const notes = [ new StaveNote({ keys: ["c/4"], duration: "8" }), // 八分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];連桁は別途指定する必要があります。休符休符はdurationで指定した音の長さの後にrを追加しますconst notes = [ new StaveNote({ keys: ["b/4"], duration: "8r" }), // 八分休符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];休符の位置は音の高さの影響を受けるため、連桁があったりした場合は調整していきます。基本的にはト音記号であればkeysはb/4を指定しておけば綺麗な位置に表示できます。臨時記号ソースコード冒頭にAccidentalを追加しますconst { Renderer, Stave, StaveNote, Voice, Formatter, Accidental } = Vex.Flow;各音符にaddModifier(new Accidental(臨時記号))という形式で指定します。const notes = [ new StaveNote({ keys: ["c#/4"], duration: "4" }).addModifier(new Accidental("#")), // シャープ new StaveNote({ keys: ["c##/4"], duration: "4" }).addModifier(new Accidental("##")), // ダブルシャープ new StaveNote({ keys: ["cb/4"], duration: "4" }).addModifier(new Accidental("b")), // フラット new StaveNote({ keys: ["cbb/4"], duration: "4" }).addModifier(new Accidental("bb")), // ダブル♭];チュートリアルにはkeysにも臨時記号を指定していますが、描画には影響しません。付点import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Accidental } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes = [ dotted( new StaveNote({ keys: ["e##/5"], duration: "8d", }).addModifier(new Accidental("##")) ), new StaveNote({ keys: ["eb/5"], duration: "16", }).addModifier(new Accidental("b")), dotted( new StaveNote({ keys: ["eb/4", "d/5"], duration: "h", }), 0 /* add dot to note at index==0 */ ), dotted( new StaveNote({ keys: ["c/5", "eb/5", "g#/5"], duration: "q", }) .addModifier(new Accidental("b"), 1) .addModifier(new Accidental("#"), 2) ), ]; Formatter.FormatAndDraw(context, stave, notes); function dotted(staveNote, noteIndex = -1) { if (noteIndex 0) { Dot.buildAndAttach([staveNote], { all: true, }); } else { Dot.buildAndAttach([staveNote], { index: noteIndex, }); } return staveNote; }}scoreRenderer();情報まとめ中連桁import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Beam } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes1 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const notes2 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const allNotes = notes1.concat(notes2); const beams = [new Beam(notes1), new Beam(notes2)]; Formatter.FormatAndDraw(context, stave, allNotes); beams.forEach((b) = { b.setContext(context).draw(); });}scoreRenderer();情報まとめ中

2023年05月22日

Read More

【Pythonを覚えよう】Djangoのルーティングの設定をしてみる

Djangoは、PythonのWebアプリケーションフレームワークです。Djangoを使用することで、Webアプリケーションの開発を簡単かつ迅速に行うことができます。さて、わたしの専門分野(?)はPHP、typescript等です。Pythonは基礎文法レベルなので、この機に触ってみようと思ってDjangoに挑戦することにしました本日はDjangoのルーティングについて勉強してみようと思います。とりあえず何か表示するこちらの記事で作成したプロジェクトの主となるフォルダにurls.pyというファイルがありますこのurls.pyというファイルではURLと関数等を結びつける役割をします。まず試しにルートhttp://127.0.0.1:8000にアクセスしたらHello, World!と表示してみます。mypage/urls.pyfrom django.http import HttpResponse # 追加from django.contrib import adminfrom django.urls import pathurlpatterns = [ path('', lambda request: HttpResponse("Hello, world!")), # 追加 path('admin/', admin.site.urls),]無名関数(ラムダ式)を使ってとりあえず画面に文字を表示させてみます。問題なくHello, world!と表示されたらOKです。さて、Djangoではプロジェクトの中にアプリケーションをいくつも持つ構造になっているようです。ドキュメント通りにpollsというアプリケーションを作成してみたいと思います。アプリケーション作成このコマンドでアプリケーションを作成します。python manage.py startapp pollsmanage.pyの部分はDjangoプロジェクトルートのmanage.pyを指定する必要があるため、必要に応じてパスを正確に指定します。こんな感じでpollsが生成されましたもちろんコマンドのpollsの部分は好きに変えて大丈夫です。python manage.py startapp ここが作成するアプリケーション名になるviews.pyを修正先ほど生成したpollsフォルダ内のviews.pyを修正していきますpolls/views.pyfrom django.shortcuts import render# Create your views here.初期状態でこんな感じだと思います。ドキュメント通り以下のコードを追加しますfrom django.http import HttpResponse # 追加from django.shortcuts import render# Create your views here.def index(request): # 追加 return HttpResponse("Hello, world. You're at the polls index.") # 追加この関数ではHello, world. Youre at the polls index.という文字のレスポンスを返します。つまり、あるURLにアクセスしたらこのindexという関数を呼ぶように設定すれば、画面にはHello, world. Youre at the polls index.と表示されるわけです。ではあるURLにアクセスしたらindexという関数を呼ぶという処理を、mypage/urls.pyとpolls/urls.pyに書いていきます〇〇/urls.pyにルーティングを追加どうやらDjangoでは、小さいアプリケーションでのルーティングを設定それを主体のアプリケーションで呼び出しといった流れでルーティングをしていくようです。当記事(ドキュメント通りですが)では、小さいアプリケーションがpolls、主体のアプリケーションがmypageになっています。ドキュメントを見た感じpollsにもurls.pyを作成し、それを主体のmypageのurls.pyで呼び出す必要があるっぽいですまずは小さいアプリケーションのpollsにurls.pyを作成してルーティングを設定します。polls/urls.pyfrom django.urls import pathfrom . import viewsurlpatterns = [ path("", views.index, name="index"),]これを大きいアプリケーションのmypageのurls.pyで呼び出しますmypage/urls.pyfrom django.contrib import adminfrom django.urls import include, pathurlpatterns = [ path("polls/", include("polls.urls")), path('admin/', admin.site.urls),]これでpolls/にアクセスしたらHello, world. Youre at the polls index.と表示されるようになります。今回のまとめDjangoは主となるアプリが小さいアプリをいくつも束ねて管理するフレームワークなのかな?イメージこれは慣れているLaravelやSymfonyにはない概念だったのでびっくりです。大規模なWebアプリケーションを管理するにはめちゃくちゃよさそうな感じがします。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月21日

Read More

【WordPressが使えるレンタルサーバー】最安値はどこ?初期費用も加味した価格ランキング!

レンタルサーバー選びって大変ですよねさまざまな会社がレンタルサーバーを運営していてプランもたくさんあります。私が調べた範囲だけでも72種類のプランがあったので、実際は100は余裕で超える種類があるでしょう。この記事はコスパ良くWordPressのサイトを運用したい方に向けて書いています。レンタルサーバーは長期契約をすることで大幅にコストを抑えることができます。しかし、契約してみたもののWordPressが使えなかった!となっては大きな無駄遣いです。あなたはWordPressでサイトを立ち上げてブログを書く、収益を得る等が本来の目的のはずです。レンタルサーバー選びに時間がかかってしまってはもったいないです!当記事は18社72種類のプランの中から初期費用込みで安く使えるWordPress可のレンタルサーバーを紹介します。月額での価格比較ランキングサイトはたくさんありますが、初期費用も計算したランキングはあまり見かけませんねもういろんなレンタルサーバーのホームページを見比べて価格を計算する必要はないですさっさとレンタルサーバーを決定してWordPressサイトを立ち上げ、本来の目的を達成しましょう!*レンタルサーバー公式サイトに『WordPress可』と記載のあるプランを紹介します。*価格等のデータはブログ執筆時のものです。契約前に公式サイトで価格等をしっかり確認してください。目次 今回比較するレンタルサーバー WordPressが使えるレンタルサーバー価格ランキング WordPress可のレンタルサーバーコスパ1位 : リトルサーバー ミニプラン リトルサーバーミニプランのメリット リトルサーバーミニプランのデメリット WordPress可のレンタルサーバーコスパ2位 : ロリポップ!ライトプラン ロリポップ!ライトプランのメリット ロリポップ!ライトプランのデメリット WordPress可のレンタルサーバーコスパ3位 : リトルサーバー ワードプラン リトルサーバー ワードプランのメリット リトルサーバー ワードプランのデメリット おすすめはロリポップ!ミニプラン まとめ 最も安く使えるWordPress可のレンタルサーバーはリトルサーバーミニプラン おすすめはロリポップ!ライトプラン 番外編 当サイトで利用しているレンタルサーバーそれではさっそく見ていきましょう今回比較するレンタルサーバー以下のレンタルサーバーのプランを比較していきます。レンタルサーバー名プラン数ミライサーバー8種類Winserver3種類GIGAレンタルサーバー4種類99YENレンタルサーバー5種類ConoHa WING3種類リトルサーバー4種類ロリポップ!4種類XREA 2種類ColorfulBox 8種類mixhost 3種類エックスサーバー 3種類ABLENET 3種類ヘテムル 1種類JETBOY 6種類バリューサーバー 3種類グランパワー 3種類Just-Size.Networks 2種類CORESERVER 7種類18社全72種類のプランで検証していきます。この中から公式サイトにWordPress可と記載のあるものからランキングを作成しました。また、セットアップが簡単にできるかどうかも加味しています。それでは最も低コストで運用できるプランを見ていきましょうWordPressが使えるレンタルサーバー価格ランキングレンタルサーバー名プラン料金(月)リトルサーバーミニプラン176円~(12カ月契約)ロリポップ!ライト220円~(36カ月契約)リトルサーバーワードプラン221円~(12カ月契約)Just-Size.Networks サブドメインプラン239円~(12カ月契約)リトルサーバーリトルプラン276円~(12カ月契約)Just-Size.Networks エコノミープラン343円~(12カ月契約)リトルサーバービッグプラン456円~(12カ月契約)ColorfulBox BOX2484円~(36カ月契約)グランパワー ソロ500円~(12カ月契約)JETBOY ミニ514円~(12カ月契約)ColorfulBox BOX1528円~(36カ月契約)ロリポップ!ベーシック550円~(36カ月契約)WordPress可のレンタルサーバーコスパ1位 : リトルサーバー ミニプランWordPressが使えるレンタルサーバープラン最安値はリトルサーバーのミニプランです。リトルサーバーは低コストで使えるプランが充実しており、さらに数クリックでWordPressのインストールを完了できる機能もついてきます。無料お試し期間が10日間もあるので、その間にテストすれば失敗する可能性を防げますリトルサーバーミニプランのメリット低コストで運用できる72種類のプランの中で最も低コストで運用することができます。特にWordPressのサイトで収益を得ることが目的の場合、レンタルサーバーの費用はできるだけ抑えて収入を増やしたいところですよねリトルサーバーのミニプランなら初期費用加味でひと月あたり176円で運用することが可能ですので、マイナスを極限まで抑えることができます無料お試し期間がある登録から10日間は無料で利用することができます。試しにWordPressのセットアップをしてこの期間中にテストをしておけば、無駄にコストを払う危険が減らせます数クリックでWordPressのセットアップが可能リトルサーバーのミニプランではコントロールパネルから数クリックでWordPressのインストールが可能です。セットアップに数日かかってしまえばその期間中のコストがもったいないですよね...簡単にセットアップを完了できるということは、余計な出費が減るということでもあります。リトルサーバーミニプランのデメリット表示速度が若干遅めミニプランではPHP高速化設定が行えません。PHP高速化設定をするとWordPress等のサイトを素早く表示することができます。サイトの表示が遅いことはSEO評価を下げる原因になるので、アクセス数が減少する可能性があります。アクセス数を伸ばしていきたいのであれば、上位グレードのプランで契約したほうが良いです容量が少ないミニプランの容量は20GBとなっています。使い方にもよりますが、ブログに使った画像ファイルやWordPress本体、バックアップ等のデータのことを考えると、300記事くらいでいっぱいになる可能性があります。ということは1日1投稿するのであれば1年で365投稿になります。つまり1年も使えないわけです。長期的に運用を続けたいのであれば、少なくとも100GBは容量が欲しいところです。100GBの容量がある最安プランは次に紹介するロリポップ!ライトプランですので、こちらも検討してみるといいでしょうWordPress可のレンタルサーバーコスパ2位 : ロリポップ!ライトプランロリポップ!は低コストかつ知名度も高く安心して使えるレンタルサーバーです。運用はGMOグループが行っています。大きな企業が運営しているという点はレンタルサーバー自体がサービスを終了する可能性が少ないという安心感もあります。ロリポップ!ライトプランのメリット充分な容量があるなんとロリポップ!ライトプランはファイル容量が160GBあります。よほどのことがなければ容量がいっぱいになってブログが更新できなくなった!ということにはならないでしょう。何年もサイトの運用をしていていよいよいっぱいになってしまっても、その頃にはある程度収益を得ることができいるはずですし、プランのアップグレードをすれば問題ないでしょう。ちなみにロリポップ!のプランの1つ上のグレードでもひと月550円と低価格で運用することができます。低コストで運用できるひと月あたりの価格が220円と非常に低価格で運用することができます。36カ月契約の長期契約の価格ですが、その分ハイスペックな機能を低価格で使えるというわけです。サイトは基本的には長く運用していくものなので、長期契約でサーバーを借りるのは全然ありだと思います。どれくらいハイスペックかというと、先ほど容量は最低100GBは欲しいという話をしましたが容量100GB以上で次に安いプランはひと月の価格が倍以上します。ということは価格の倍くらいの価値があるプランとも捉えられますので、コスパは最強クラスです。WordPress簡単インストール機能搭載ロリポップ!ライトプランには、簡単な設定をすればWordPressのインストールが完了するWordPress簡単インストール機能を搭載しています。WordPressを自力でセットアップするのは中々大変なので、素早くセットアップして運用をスタートさせられるのは大きなメリットになります。無料お試し期間があるロリポップ!ライトプランも10日間の無料お試し期間があります。この間に動作確認をしておけばレンタルサーバー選びに失敗して無駄にお金を払うといった危険はなくなりますので、とりあえず登録して動作確認してみるのもいいでしょう。ロリポップ!ライトプランのデメリット正直、目立つデメリットが見つかりませんでした...笑ですがいいポイントばかりお話ししても逆に不安になると思いますので、いくつか感じたことをお話しします長期契約が必要ひと月あたり220円で利用するには36カ月の契約をする必要があります。基本的にはサイトは36カ月くらいは運用していくと思いますので問題ないと思いますが、短期間で利用したい場合は少々価格があがります。WordPressサイトを複数運営するのは厳しい多くのレンタルサーバーでは、複数のサイトを一つのプランで運用することができます。ロリポップ!ライトプランでも複数サイトを運用することは可能ですが、WordPressで複数サイトのサイトを運用するのは厳しいです不可能ではありませんが、プログラミングの知識が若干必要になります。ミスをするとサイト自体が動かなくなってしまう危険もあるため、むやみに挑戦しないほうが良いでしょう。動画を大量にアップロードするには不向きロリポップ!のライトプランのファイル容量は160GBとなっています。WordPressのバックアップ等のデータも容量を消費するため、実質160GBすべて使えるというわけではありません。動画を大量にアップロードする必要があれば、もう少し容量に余裕のあるプランにすると良いでしょう。さて、それでは3位まで見ていきましょう。次はリトルサーバーのワードプランです。名前の通り『WordPressが使いやすいように』というコンセプトのプランになりますWordPress可のレンタルサーバーコスパ3位 : リトルサーバー ワードプランランキング1位のリトルサーバー ミニプランの一つ上のグレードになります。WordPressサイトを運用する上で嬉しい機能を充実させたプランになります。また、ミニプラント同じく10日間の無料お試し期間があるのもいい点ですねリトルサーバー ワードプランのメリットワンクリックで簡単WordPressインストールができるミニプランよりも簡単にWordPressをインストールすることができます。素早くサイト運用をスタートできることは周りより一歩リードできるということです。サイトを早く運用させたい方にピッタリのプランですPHP高速化設定が利用可能ミニプランでは利用できなかったPHP高速化設定が利用できます。WordPressサイトを高速で表示させることが可能になり、離脱率を減らし、SEOの面でも有利になります。サイトが高速で表示できることはアクセス数増加につながりますので、これは大きなメリットになりますリトルサーバー ワードプランのデメリット容量が少ないワードプランの容量は30GBになっています。ミニプランよりは多いですが、一年以上運用するとなると厳しいでしょう。おすすめはロリポップ!ミニプランさて、WordPressが使えるレンタルサーバー価格ランキングの上位3つのプランを詳しく見てみました。この中で私のおすすめはロリポップ!ミニプランです。サイト運用で重要な部分であるレンタルサーバーの容量が充分にあり、価格に対して使える容量のコスパがめちゃくちゃいいです。デメリットは長期契約が必要な点と、複数のWordPressサイトを運用するのが難しい点でしたが、基本的には長期的にサイトは運用していきますし複数WordPressサイトを持つケースは少ないでしょう。まとめ最も安く使えるWordPress可のレンタルサーバーはリトルサーバーミニプランメリット コストを最大限抑えられるため、収益をプラスにできる可能性が上がる 10日間の無料お試し期間があるため、その間に動作確認をすれば失敗を防げる WordPressのセットアップが簡単で、素早くサイト運用をスタートできるデメリット 表示速度が遅め、アクセス数減少につながる可能性もある 容量が少ないため、1年間の運用でもいっぱいになってしまう可能性があるおすすめはロリポップ!ライトプランメリット コストを最大限抑えられるため、収益をプラスにできる可能性が上がる 10日間の無料お試し期間があるため、その間に動作確認をすれば失敗を防げる WordPressのセットアップが簡単で、素早くサイト運用をスタートできるデメリット 長期契約が必要なため、短期間の運用が目的であれば不向き 複数のWordPressサイトを運用したい場合に不利というわけで、WordPressが使えるレンタルサーバー価格ランキングでした!あなたのレンタルサーバー選びのお役に立てたら幸いです!では次の記事もお楽しみに!番外編 当サイトで利用しているレンタルサーバー当サイトはXserverを利用しています。 ひと月あたりの価格は990円~と今回ご紹介したプランと比べると高くなっていますが、それに見合う価値を感じたのでXserverを利用しています。特筆すべきなのが表示の速さです。Xserverは高速でサイトを表示するための機能が充実しており、圧倒的な速さでユーザーの離脱を防ぎます。SEOの観点からも高速でサイトを表示できることはとても重要なポイントです。少々コストはかかりますが、本気でサイトの運用を考えているのであればXserverを使うことを強くおすすめします。 また、10日間の無料お試し期間がありますので、本記事で紹介した低価格で利用できるサーバーとの使用感を比べてみるのもいいと思います。

2023年05月10日

Read More

XserverでLaravelは使える?使えない

こんにちは!エンジニアのますみです!本日はLaravelで作成したアプリケーションがXserverで動かせるかどうか?LaravelをXserverにアップロードする前に確認しておかないといけないポイントを解説します! 今ならお試し10日間無料!XserverでLaravelは動く?結論から言うと、動きます。当サイトはLaravelで作成しており、特に不自由なく動作しています。ですが、アップロードする前に確認しないといけないポイントがある為、見ていきましょう。XserverにLaravelをアップロードする前に確認しておくポイントアップロードする前に、Xserverが対応しているPHPのバージョンと、Laravelのバージョンに互換性があるかを確認しておく必要があります。Laravelは現在最新バージョンが10になっており、Laravel10はPHPのバージョンが8.1以上でないと動きません。現在Xserverが対応しているPHPのバージョンは以下の通りです。 PHP 8.1.x PHP 8.0.x PHP 7.4.x PHP 7.3.x PHP 7.2.x PHP 7.1.x PHP 7.0.x PHP 5.6.x PHP 5.5.x PHP 5.4.x PHP 5.3.3 PHP 5.1.6XserverはPHP8.1にも対応しているので今のところLaravel10も問題なく動作します。ですが、これはブログ執筆時の情報のため、一応XserverのウェブサイトやLaravelのドキュメントの確認はしておきましょう。Laravelをアップロードする時のレンタルサーバー選びのポイントLaravelはデータベースの更新やキャッシュの処理などをコマンドで行います。また、CSS、Javascriptのビルドにnpm、yarnを利用する為、SSHが使えるレンタルサーバーを選びましょう。他にもいくつかポイントのがあります。レンタルサーバー選びのポイント PHPが使える SSHが使える npm、yarnが使える データベースが使える上の条件を満たしていないレンタルサーバーではせっかく作成したLaravelのアプリケーションが動かないことがありますのでしっかり確認してから契約しましょう。当サイトではXserverのスタンダードプランを利用しています。Xserverのプラン一覧プラン料金(月)データベースSSHスタンダード990円~〇〇プレミアム1,980円~〇〇ビジネス3,960円~〇〇 Xserverは先ほどのLaravelをアップロードする時のレンタルサーバー選びのポイントをすべてクリアしているため、Laravelを使うときはおすすめのレンタルサーバーです。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月06日

Read More

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

おすすめレンタルサーバー


当サイトはXserverを利用しています。 HTML、CSSで作成したホームページはもちろん、wordpress、Laravel等で作成した高度なアプリケーションも利用可能です!

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!