javascriptのフレームワークVue.jsは、リアクティブ、コンポーネントなど様々な機能を利用することができます。その他にもVue.jsにはできることがたくさんあります。 この記事ではそんなVue.jsでできることを詳しく解説していきます。さらに、反対に向いていないことなども紹介していきますよ。 これらに当てはまる方におすすめの記事となっています。これを読めばVue.jsがどんなフレームワークなのか、どんなことができるのか、どんなことが苦手なのか丸わかりですよ。 Vue.jsとは Vue.jsは世界中で多くの人が利用しているjavascriptのフレームワークです。javascriptには他にもReactやAngularなどのフレームワークも存在しますが、それらと比べてより学習コストが低いということで注目されています。 ドキュメントが充実していて、日本語情報の多いことから国内でも人気となっています。 そんなVue.jsはUIを作るために用いられており、拡張性も高いと言われています。 Vue.jsで記述してる箇所に、他のフレームワークの処理を入れ込んだり、画面の一部だけをVue.jsで記述したりすることができるなど、かなり柔軟に使うことが可能です。 Vue.jsでできること Vue.jsは主にWebアプリケーション開発で利用されることが多いです。 そんなVue.jsでできることでできることは以下の通りです。 それぞれ解説します。 リアクティブ リアクティブとは、ユーザーが打ち込んだ変更に対して一瞬で反応をすることを指します。 Vue.jsでは、ユーザーが打ち込んだ情報を保持するModelと、ユーザーが目にする値viewが連動していて、どちらかの値が変われば、すぐにもう一方も変更される仕様となっています。 少しイメージがしづらいかもしれませんが、リアクティブの一例としてExcelの関数があります。 Excelに数値を入力して、それをもとに計算する関数を記載すると、計算結果が自動で表示されますよね。 このような機能がVeu.jsで使えることによって、コードを短くすることができメンテナンスも簡単にすることが可能になるのです。 コンポーネント コンポーネントとは、プログラムをパーツ化し、それぞれを再利用していくことを指します。 車の部品のように各パーツを組み立てて、それらを最後に組み合わせることでトータルの労力を減らす効果があります。 トランジション トランジションは、HTMLやCSSの変更を行った際にDOMの内容も即座に変更することができる機能です。 ちなみに、DOMは「Document Object Model」のことでHTMLドキュメントをプログラムから利用するためのAPIのこと。 HTMLドキュメントの中の「何処」に変更を与えるのか指定し、任意のプログラムを実装することを指します。 通常、Webブラウザに画面を表示する時は、DOMからHTMLを解析してWebページを表示します。 しかし、これではHTMLの変更の度にWebブラウザの読み込みをしなくてはいけません。 一方、トランジションを利用すれば、こうしたWebブラウザの読み込みは必要ありません。 HTMLを変更すればDOMも変更されるので、業務を大幅に効率化していくことが可能になるのです。 拡張性 Vue.jsはシンプルな設計ということもでき、拡張性がとても高いです。 他のライブラリ と組み合わせ、様々な開発に適用することができます。 また、後からでも導入ができたり、後から必要になった機能を追加することも特徴です。段階的に規模を拡大していくと言ったことも可能なのです。 Vue.jsに向いていないこと Veu.jsではできることがたくさんありましたが、反対に苦手分野は何でしょうか。 それはズバリ、「大規模な開発」です。 Vue.jsではSPA（Single Page Application）の開発といった小規模な開発に向いています。SPAは1つのページ内で情報が変化するので、大規模なページやサービスには向いていないのです。 もし、大規模な開発を行うのであれば、ReactやAngularなどを活用するのをおすすめします。 合わせて読みたい＞＞2021年版　JavaScriptのフレームワーク5選！開発者向けにご紹介 Vue.jsのメリット・デメリット 今までVeu.jsでできることや向いていないことなど解説していきましたが、最後にVue.jsのメリットとデメリットを紹介します。 詳しい内容や他のフレームワークとの比較は「JavaScriptのフレームワーク！Vue.jsのメリット・デメリット」や「WEBアプリの開発言語・フレームワークのトレンド【オフショア開発】」を参考にしてください。 Vue.jsのメリット Vue.jsのデメリット まとめ いかがでしたか。本日はjavascriptのフレームワークVue.jsでできることや、向いていること反対に向いていないものなどを紹介していきました。 Vue.jsでは大規模開発やモバイルアプリ開発などには向いていませんが、SPA開発などには向いていて、学習コストの低いフレームワークでした。 リアクティブやコンポーネント、トランジションなど様々な機能があり、拡張性も高いVue.js。 気になる方は取り入れてみてはいかがでしょうか。 DEHAでは、本日紹介したVue.jsなどを利用したシステム開発も行っています。 […]

webアプリはWEBブラウザーからアクセスすることができる、オンライン上で様々な処理を行うシステムです。 iOSアプリやAndroidアプリといったネイティブアプリとは異なり、端末に縛られずに開発を行うことができるので、その分コストを抑えることができます。 今回はそんなwebアプリの開発費用について解説したいと思います。 webアプリの開発を行いたい方 社内のIT人材が不足している方 開発コストを抑えたい方 これらに当てはまる方におすすめの記事となっています。これを読めば、webアプリ開発の相場を知るのはもちろん、よりコストを抑えるコツも知ることができますよ。 webアプリの開発費用はどのくらい？ webアプリの開発費用の内訳は、「機能」と「人件費」「保守・メンテナンス費」「リスク費」です。 機能の数や種類が多いほど制作時間が長くなってしまうので、費用は高くなります。 また、導入・稼働後にバグ修正やOSなどのプラットフォームのサポート終了などに対応するためには保守・メンテナンスが必要です。保守・メンテナンス費は開発コストの15％をみておきましょう。 リスク費とは、開発中にトラブルが発生した場合や、開発期間が延びてしまう場合などに備えるために用意しておく、予備の費用のことを指します。 webアプリの相場 webアプリの相場は以下の通りです。機能をどのぐらいつけるのかによっても費用は変わりますが、一つの参考にしていただければと思います。 Webアプリの種類 費用相場 ECサイト 60~400万円 SNS 100~500万円 口コミサイト 80~300万円 掲示板サイト 50~300万円 ゲーム系 300~1,000万円 CMS 80~400万円 予約管理サイト 80~500万円 マッチングサイト 100~500万円 なぜネイティブアプリよりも安いの？ ネイティブアプリはiOSアプリやAndroidアプリといったスマートフォン上で、端末上のシステムを使って動かすことができるアプリです。 iphoneとAndroid両方でアプリを使うようにするためには、iOSとAndroidの両方のアプリを開発する必要があります。 その分開発工程がかかってしまうので、コストは高くなってしまいます。 一方、webアプリは端末に縛られずに利用することができるため、開発コストを抑えることができるのです。 よりコストを抑える方法 MVPを検討する MVP開発とはMinimum Viable Productの略で、その名の通り最小限に機能を削ぎ落としたシンプルなシステムを開発することを指します。 たとえば、ある特定のテーマに特化したSNSサービスの開発を考えていたとしましょう。 SNSサービスの機能は、タイムライン機能、チャット・DM機能、いいね・スタンプ機能、保存機能など様々なものが考えられます。 他にも、機能を追加しようと思えば様々な機能を追加することもできますが、MVPならこれらの１つか２つくらいの機能を実装するだけでリリースを行うのです。 最小限の開発に止めることによって開発コストを抑えることができるのです。  合わせて読みたい＞＞【スタートアップ向け】MVP開発とは【事業開発の新しい形】 ラボ型契約を検討する ラボ型開発とは、基本的にある 一定期間(半年〜1年)の間、あるお客様の専用のチームを用意し開発を行うという契約形態のこと。 修正が多いアプリ開発などでは、修正に追加費用がかかる請負型開発に委託するよりも、ラボ型開発のほうが低コストで済む場合が多いです。 ラボ型契約に関する詳しい内容についてはこちらの記事で紹介しています。気になる方はぜひチェックしてみてください。 合わせて読みたい＞＞【もう安心】ラボ型開発で、見積や雇用の不安解消！請負型開発との違いやメリットも解説【ODC/ラボ契約とは】 オフショア開発を行う オフショア開発とは比較的開発費用の安い海外で開発を委託する手法のことを指します。 […]

WEBアプリ開発をしたい場合、どのプログラミング言語を勉強するのがいいか迷う方もいらっしゃるでしょう。 沢山ある開発言語をただ闇雲に勉強しても意味がありません。 WEBアプリ開発に向いている言語とフレームワークを効率よく勉強することで、勉強時間を短縮することができるのです。 この記事では、そんなWEBアプリ開発におすすめの言語とフレームワークを紹介しています。 どの開発言語を学べばいいのか WEBアプリ開発に向いている言語は何か フレームワークって何？ これらの疑問をお持ちの方はぜひ要チェックですよ。これを読めばWEBアプリの開発言語とフレームワークのトレンドがまるわかりです。 WEBアプリとは WEBブラウザーからアクセスすることができる、オンライン上で様々な処理を行うシステムをWEBアプリケーションと呼びます。 YouTubeやTwitter、食べログなどがこれに当たります。 名前は似ていますが、iOSアプリやAndroidアプリといったスマートフォンのアプリとは異なります。 iOSアプリやAndroidアプリはネイティブアプリと言われ、基本的に端末上のシステムを使って動きます。よって利用するには端末にアプリをダウンロードする必要があります。 またネイティブアプリはiOSとAndroidそれぞれで開発を行わなくてはなりません。 一方、WEBアプリは端末に縛られずに利用でき、クライアントアプリをインストールせずに使えるなどが特徴としてあげられます。 おすすめ開発言語 php phpはWeb向けに特化した言語です。ブログやホームページ制作を行うことができる WordPressもPHPで構築されています。 歴史も長く、世界でも人気のある言語です。国内でも利用者が10万人以上いると言われています。 仕様や文法が簡単なため学習がしやすく、Web開発環境として非常に高いニーズがあります。CMSやECサイト、SNSなどさまざまなジャンルのWebサイトに用いられています。 phpのフレームワークLaravel phpのフレームワークLaravelは、PHPフレームワーク「Symfony」をベースに開発され、2011年6月に公開されました。 比較的新しいフレームワークであることから、様々な言語のフレームワークの良いところをかき集めたようなフレームワークになっています。 シェアが高くなるにつれて、さまざまな国・言語で利用できるようコミュニティや情報サイト、書籍などが多く作られるようになってきました。 日本語に翻訳されているものも多く、基礎から応用まで幅広く学べます。日本語に翻訳されている学習サイトや教材もあります。 Laravelはオープンソースで先進的な機能が多く取り入れられています。自由度が高く、規約も少ないので幅広い開発ができるのが特徴です。 合わせて読みたい＞＞【大注目】世界No.1のPHPフレームワーク「Laravel（ララベル）」がスゴイ！【その特徴を大公開】 javascript javascriptはWEBアプリ上の動きを作ることができる言語です。 例えば入力フォームやポップアップ、スライドショー、画像の拡大表示などがそれにあたります。 静的なページよりも動的なページの方がスタイリッシュで見やすいこともあり、近年javascriptの需要が高まってきました。 現在、JavaScriptは、ほとんどのWebサイトで使われていますが、その他にもWebアプリ開発やスマホアプリ開発、ゲーム開発など様々なシーンで使われているのです。 他にもjavascriptならフロントエンド・バックエンドの両方で利用でき、利用者が多いことから学習コストも低いといったメリットがあります。 合わせて読みたい＞＞定番？WEBアプリ開発でJavaScriptを技術選定する３つの理由【スマホアプリも人気】 javascriptのフレームワークVeu.js javascriptのフレームワークVeu.jsは主にUIを作るために用いられており、ドキュメントの充実度や日本語情報の多さから、国内で人気の高いフレームワークとなっています。 拡張性も高く、Vue.jsで記述してる箇所に、他のフレームワークの処理を入れ込んだり、画面の一部だけをVue.jsで記述したりすることができるなど、かなり柔軟に使うことが可能です。 合わせて読みたい＞＞​​JavaScriptのフレームワーク！Vue.jsのメリット・デメリット ruby rubyはWEB開発を効率よく行うことができる言語です。 日本のまつもとひろゆき氏によって開発されたこともあって、日本語での情報も多いです。 またRubyのコードはシンプルで書きやすく読みやすいので、プログラミング未経験者や初心者の方も扱いやすいのが特徴です。 rubyのフレームワークRuby on Rails Ruby on Railsは簡単なコードでWEBアプリを開発することができるフレームワークです。 Gemと呼ばれるライブラリを使って拡張することで更に短い時間で、様々なWebアプリを実装できます。 Ruby on Railsで作れるWebアプリは以下の通りです。 CMS ECサイト […]

Shopifyでは標準機能として装備されているお問い合わせフォームを自由にカスタマイズすることができます。 お問い合わせフォームのカスタマイズによって、ユーザーが、よりネットショップを利用しやすくなります。これにより満足度をあげることができます。 ユーザーの満足度が上がればショップの離脱率を下げることにもつながります。 この記事ではそんなShopifyでできるお問い合わせフォームのカスタマイズ方法について紹介しています。 Shopifyが気になる方 ネットショップを始めてみたい方 ECサイト構築を行いたい方 ユーザーの満足度を上げたい方 これらに当てはまる方におすすめの記事となっています。これを読めばお問い合わせフォームをより見やすく、わかりやすくすることができますよ。 Shopifyのお問い合わせフォーム Shopifyのお問い合わせフォームは、以下の項目が標準設定されています。 名前 メールアドレス 電話番号 メッセージ 管理画面からオンラインストアに移動し、「テンプレート」からコンタクトフォーム用のテンプレートを選択するをクリックすることで、お問い合わせフォームを作成することができます。 お問い合わせを受信するアドレスは、「設定」の中の「一般設定」、「送信元のメールアドレス」に記載されているものが該当します。 設定後は、実際に設定したメールアドレスにお問い合わせが届くかどうか、テストを行うことが大切です。 Shopifyでお問い合わせフォームをカスタマイズする方法とは？ 先ほど紹介したようにShopifyのデフォルトのお問い合わせフォームは、最低限の項目しかありません。 細かい部分をカスタマイズするには、Liquidを編集する方法とアプリでカスタマイズする2つの方法があります。 LiquidとはShopifyで利用されているプログラミング言語です。オープンソースとして、GitHubで公開されています。 プログラミングの知識がある方はLiquidを利用することをおすすめします。 Liquidのカスタマイズ方法 Liquidのカスタマイズ方法は、Shopifyの管理画面の「オンラインストア＞テーマ＞アクション＞コードを編集する」から行います。 その後、Templatesより「page.contact.liquid」を選択して内容を編集します。 アプリでのカスタマイズ方法 プログラミング知識がない方は、アプリを利用してカスタマイズをすることをおすすめします。 Shopifyには機能を拡張することができるアプリが6000以上あると言われています。お問い合わせフォームをカスタマイズするアプリも沢山あります。 ここでは4つのアプリを紹介します。 ​​Improved contact form Powerful Contact Form Builder Contact Form Wholesale + Ambassador Form ​​Improved contact form ​​Improved contact formはShopifyのどのページからでも問合せフォームにアクセスできるポップアップを追加できます。 ポップアップなので、お客様が質問したいタイミングですぐにお問い合わせフォームにアクセスすることが可能になるのです。 無料のプランから月額29ドルまであり、有料プランでは保存しておける問合せフォームの数を増やすことができます。 どのページから顧客がアクセスしたのかや、直前に見ていたページを調べるのに役立ちます。 Powerful Contact Form […]

Shopifyでは決済画面をカスタマイズして、入力項目や追加機能、デザインなどを調整することができます。 決済画面を見やすくカスタマイズすることで、お客様にストレスフリーにショッピングを楽しんでもらうことが可能です。 この記事ではそんなShopifyでできる決済画面のカスタマイズ方法について紹介していきます。 これらに当てはまる方におすすめの記事となっています。これを読めばShopifyでのチェックアウト画面の編集方法が丸わかりですよ。 Shopifyの決済画面 Shopifyには3つのプランがありますが、その3つのどのプランでもカスタマイズできるものは以下の通りです。 Shopify　Plusでは、コードの編集ができるため、氏名のかな入力や配置変更、配送時間指定の項目の追加やタグの設置など細かい設定が可能です。 合わせて読みたい＞＞【カスタマイズ力抜群】Shopify（ショッピファイ）とは？その特徴・費用・相場を徹底解説 Shopifyで決済画面をカスタマイズする方法 Shopifyで決済画面をカスタマイズする方法は以下の通りです。 ①Shopifyの管理画面から「設定＞チェックアウト」をクリックする 管理画面から「設定＞チェックアウト」をクリックすると、チェックアウトのカスタマイズというところがあるので、そこで現在設定されているテーマの編集を行います。 ②テーマの編集を行う テーマの編集は、以下の項目に対応しています。 バナー バナーは、決済画面の上部に表示されます。 ロゴ 決済画面の上部に表示されます。バナーが設定されている場合はバナーの内部に表示されます。 メインエリア メインエリアは個人情報を入力する欄です。背景のカラーや入力フォームのデザインを変更することができます。 注文内容 カートに入れた商品が並ぶ欄です。背景色の変更が可能です。 フォント 決済画面上のフォントを変更することができます。 ③アカウントの有効化 アカウントの有効化を行うことで、顧客が決済画面で入力する個人情報を省略することができます。 ④連絡先の設定 「お客様の連絡先」の項目で、注文後のお客様との連絡方法を設定します。 ⑤オプションの設定 「フォームのオプション」でお客様の追加情報が必要かどうかを設定することができます。 ⑥チップオプションの設定 購入した商品や送料の他にも、Shopifyではチップを追加することができます。 「チェックアウト時にチップオプションを表示する」を設定すると、お客様はオンライン購入の際にチップを追加してビジネスをサポートすることができます。 ⑦注文処理 注文処理の項目では、チェックアウトと注文イベントに関するストアの設定を変更することができます。 「お客様のチェックアウト時」では、チェックアウトボックスが2つありますが、どちらもチェックを入れておくようにしましょう。 そうすることで、住所の自動入力ができるようになります。 「注文の支払い後」では、注文の処理をどのように行うかを細かく設定することができます。 「注文のフルフィルメントと支払いが終了した後」の項目では、注文を自動でアーカイブするかどうかを選ぶことができます。 ⑧Eメールマーケティング Eメールマーケティングにチェックを入れることで、顧客はあなたのブランドのお知らせを受け取ることができるようになります。 事業者側もメールアドレスの管理が簡単にできるようになり、セール情報の配信やクーポンの配布、ギフト券の配布など、様々に活用していくことができまよ。 ⑨かご落ちメールの設定 かご落ちという言葉はご存知でしょうか。 かご落ちとは、購入意思のあるユーザーが、商品をカートに入れたままECサイトを離脱してしまうことを言います。 せっかく購入意思があったのに、見込み顧客を逃してしまうのはもったいないことですよね。 そこで、かご落ちしてしまったユーザーに対して、かご落ちメールを送信してみてはいかがでしょうか。 「この商品を買うはずだったのに、忘れていた」という方に購入を促すきっかけになります。 この設定は、チェックボックスにチェックを入れるだけで簡単に行えますよ。 ⑩多言語対応 Shopifyは越境ECにおすすめのECサイト作成サービスです。 海外向けのショップを作る際に、決済画面も多言語に対応させることができますよ。 カスタマイズのポイント テスト注文を行う カスタマイズを行った後は必ずテスト注文を行いましょう。テスト注文でエラーや不備がないかを確かめるのです。 […]

Ruby on Railsは、プログラミング言語Rubyのフレームワークであり、Web開発に非常に強いです。 今回はRuby on Railsを作って作れるものと、逆にRuby on Railsでは難しいことについてまとめます。 Ruby on Railsで出来ること Ruby on Railsは、Web開発に非常に強く、短い記述で多くの機能をかんたんに実装できるのが特徴です。 Gemと呼ばれるライブラリを使って拡張することで更に短い時間で、様々なWebアプリを実装できます。 以下に、Ruby on Railsで開発できる代表的なシステムをまとめます。 ブログシステム（CMS） WordPressのようなブログシステムのことをCMS（コンテンツ管理システム）と言いますが、Ruby on Railsを使えばオリジナルのCMSを作成することができます。 PHPで作られているCMSであるWordPressは有名ですが、内部のソースが複雑だったり、速度が遅かったりなどの問題も抱えています。 企業のオウンドメディア開発など、独自の機能を柔軟に追加したい場合や大規模サイトを作成したい場合、Ruby on RailsでオリジナルのCMSを用意したほうが良いこともあります。 ECサイト ECサイトやネットショップも、Ruby on Railsで開発できます。 ECサイト作成で大変なのは決済部分の処理ですが、Ruby on RailsでできているSolidusというシステムや、pay.jpのAPIを活用することで比較的かんたんに導入することが可能です。 SNS Ruby on Railsには、ログイン機能など、SNSに必須の機能を実装するためのGem（ライブラリ、拡張機能のようなもの）が多数あります。 TwitterのようなSNSも、Ruby on Railsで開発できます。実際、初期のTwitterはRuby on Railsで作られていました。 スクレイピング ウェブサイトから表示されている情報を抜き出す技術をウェブスクレイピングと言います。 Gemの一つであるNokogiriを使えば、かんたんにスクレイピングすることができます。 業務システム 業務システムと言っても様々なものがありますが、基本的にはログイン機能や特定のデータの管理が必要になってくるかと思います。 そういった機能は、Ruby on Railsで比較的かんたんに実装できるでしょう。 組み込み開発 Ruby on Railsというフレームワークからは外れますが、実はRubyは組み込み開発でも使うことができます。 ロボットの動作などをプログラミングすることを組み込み開発と言います。組み込み開発では、プログラミングの実行環境のリソースが限られているので、C言語などのより機械語に近い言語を用いることが多いです。 […]

それぞれのプログラミング言語には、フレームワークやライブラリと呼ばれる開発を助けてくれるパッケージがあります。 Rubyでは、ライブラリのことをGemと呼びます。Gemを利用すれば開発スピードを格段に上げていくことができます。 今回は、そんなRubyの主要なライブラリGemについてご紹介していきます。 効率よくウェブ開発をしていきたい方 社内のIT人材が不足している方 Gemについて詳しく知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めばGemにはどのような種類があるのか、どう言ったメリットデメリットがあるのか丸わかりですよ。 Gem（ジェム）とは？ それぞれのプログラミング言語には、フレームワークやライブラリと呼ばれる開発を助けてくれるパッケージがあります。 フレームワークとライブラリの違いは分かりにくいですが、フレームワークは「処理全体の流れ」を提供しており、ライブラリは「特定処理のためのパーツ」を提供しているイメージです。 Rubyでは、ライブラリのことをGem（ジェム、日本語で宝石）と呼び、同じ名前のgemというコマンドを使って管理しています。 ちなみにRuby on Railsは、Rubyのフレームワークであり、Gemではありません。 Gemの探し方と選び方 Gemの探し方は大きく分けて２つあります。 １つは、GitHubから探す方法です。 殆どのGemは、GitHubでソースが公開されています。 インストール方法は、GitHubの各プロジェクトにかかれていることが多いですが、gemコマンドを用いてインストールのが基本です。 もう一つは、RubyGems.orgやBestGems.orgという、Gemをまとめているサイトで調べる方法です。 これらのサイトでは、大半のGemが登録されているため、実装したい機能をキーワードに検索をかけると必要なGemを見つけることができます。 Gemは、誰でも作って公開することができるので、ものによっては脆弱性があります。 たくさんの開発者に使われている人気のGemは、多くの開発者によって実際に使われているため、不人気なGemより安全性が高いと言えるでしょう。 GitHubのスター数が多いものや、BestGems.orgで上位になっているものを選ぶと間違いがないです。 Gemを使うメリット Gemを活用する最大のメリットは、開発速度を上げることができるという点でしょう。 決まりきった機能であったとしても、一から作るとなると、実装とテストに大きな労力がかかってしまいます。 決まりきった機能に関してはGemを使うようにし、独自の機能にフォーカスするほうが効率的な開発に繋がります。 Gemを使うデメリット 一方で、Gemには、リスクも存在します。 １つはセキュリティリスクです。先述したように、Gemは誰でも公開することが可能なので、ものによっては致命的な脆弱性を抱えている可能性もあります。 また、不具合に繋がる可能性もあります。新しく導入したGemが、既存のソースコードと競合してしまった場合、不具合に繋がりかねません。 いずれにしても、Gemを導入する場合は、導入しようとしているGemについてしっかりと理解して導入する必要があります。 主要なGem（ライブラリ） ここからは、人気のGemを紹介します。 Devise ログイン認証機能をかんたんに実装できるGemです。 メールアドレスでの登録だけでなく、FacebookやTwitter、LINEといったSNSのアカウントを用いた会員登録にも対応しています。 SNSにしろECサイトにしろ、ほとんどのウェブアプリにおいてログイン機能は必須の機能です。 新たにウェブアプリを開発する場合、決まりきった処理であるログイン機能の開発より、自社アプリ特有の機能にフォーカスしたほうが生産的ですので、DeviseのようなGemを活用するのは良い選択でしょう。 kaminari ページネーションの実装を手助けしてくれるGemです。 ページネーションとは、ブログなどで画面の下で何ページ目かを示してくれるボタンのことです。 kaminariを使うことで、ページネーションをかんたんに実装できます。 Paperclip Paperclipは、ファイルアップロード機能を実装するGemです。 画像などのアップロード、保存、削除などを実装できます。 Active Admin 管理画面をかんたんに実装できるGemです。 モデル（データベース）を直接操作するための、管理画面を作成できます。 シンプルなものであれば、比較的かんたんに実装できますし、カスタマイズを加えることも可能です。 Faker 大量のダミーデータを作成できるGemです。 ウェブアプリ開発を行っていると、テストのために大量のダミーデータが必要になる場合があります。 […]

Shopifyに限らずですが、ECサイトは24時間どこからでも買い物できるのが強みですが、在庫切れになったとき、通常の店舗よりも機会損失が大きくなってしまいがちです。 そういった場合、予約販売ができると、機会損失を減らすことができます。 今回は、在庫切れに対応できる予約販売機能についてまとめます。 予約販売とは？ 予約販売（または事前注文）は、発売前の商品の先行販売や在庫切れの際に、予約として注文を受けることができる機能です。 Shopifyでは、外部アプリと連携することで、予約販売機能をつけることができます。 予約販売のメリット 予約販売機能を活用すると、購買意欲の高いユーザーを逃す可能性が減り、売上アップに繋がります。 リアル店舗では、営業時間が決まっているため、在庫がなくなった場合スタッフが柔軟に対応ができますが、24時間無人で動いているECサイトではリアル店舗に比べて柔軟な対応が難しく、機会損失に繋がりかねません そのため、ECサイト運営では、リアル店舗以上に在庫管理が重要になってきます。 しかし、意識していたとしても、急なアクセス増などで予測が外れてしまうことは大いにありえます。 在庫切れのままであれば、せっかくサイトを訪れた購買意欲の高いユーザーも、離脱してしまう可能性が高いです。 一度離脱したユーザーは戻ってこない可能性が高いですし、そもそもユーザーからは、在庫入荷のタイミングがわからないため、商品購入自体を諦めてしまいかねません。 そういった場合に、予約販売機能があれば、ユーザーの気持ちが熱いうちに購入までしてもらうことができます。 また予約販売機能があれば、販売前の商品をPRして、発売前にある程度売上を立てるという戦略もとれるでしょう。 ShopifyでECサイトを運営していくのであれば予約販売機能は、ぜひ導入してほしい機能の一つです。 予約販売導入アプリ3選 次に、実際に予約販売に使える外部アプリをご紹介します。 Pre-Order Now Pre-Order Nowは、在庫切れ時に「カートに追加」ボタンを「予約購入する」に変更できる外部アプリです。 商品ごとに細かな設定ができるのが特徴です。予約割引なども適用できます。 １商品までは無料で使えますが、商品制限をなくすには月額で課金する必要があります。 Shopifyのプランに応じて月額料金が変わります。Pre-Order Nowとして提供するサービスは、ほとんど変わりません。 ベーシックプラン：$19.95（約2190円） スタンダードプラン：$39.95（約4390円） プレミアムプラン：$59.95（約6590円） 予約販売アプリ 予約販売アプリは、日本の開発会社である株式会社ハシゴが開発している外部アプリです。 機能はシンプルで、管理画面から選択した商品の予約販売化やボタン変更を行えます。 開発会社が日本なので、日本語のドキュメントが充実している点、シンプルなので使いやすい点が魅力です。 料金は、一律で月額$19.99（約2190円）です。 7日間の無料期間があるので、気になる場合は一度試してみると良いかと思います。 Globo Pre-Order-Preorder Globo Pre-Order-Preorderは、海外製の予約販売アプリです。 「カートに追加」ボタンを「予約購入する」に変更するという基本機能に加えて、自動で予約販売モードから通常販売モードに切り替える「カウントダウン機能」や予約割引機能、予約時には一部だけの支払いにする「部分支払い機能」など、多彩な機能があるアプリです。 特に部分支払い機能は、他の外部アプリに無い珍しい機能なので、導入したい場合はGlobo Pre-Order-Preorderを検討してみてください。 料金に関しては、最初の５商品に関しては無料で使えます。 無料版では、予約割引や部分支払いの機能は使えません。 有料版は、月額$14.9（約1630円）ですが、現在はコロナ割引ということで月額 $9.90（約1080円）に値下げされています。１年分をまとめて払うと、更に割引があるようです。 Shopify開発ならdehaへ 予約機能は、ECサイトを運営していくにあたって、非常に強力な機能です。 ですが、外部アプリの導入は、ウェブ開発やLiquidの知識など、専門知識がないと難しい領域になってきます。 dehaでは、５年間に渡りベトナムオフショア開発を行ってきました。 Shopifyに関しても開発実績があり、さまざまなカスタマイズに対応可能です。 ベトナムオフショア開発は、国内開発より低コストで、優秀な開発者を登用できるのが特徴ですので、独自性の高いECサイトを開発したい企業様や、Shopify案件を受けたものの開発リソースが足りないITベンダー様は、ぜひ一度dehaにご相談ください。

Shopifyについての情報を調べているときに”Liquid”という単語を目にしたことはないでしょうか？ Shopifyのカスタマイズを行う上で、Liquidは必須の知識と言えます。今回は、Shopifyのテンプレート言語であるLiquidについてまとめました。 Liquidとは？ Shopifyは、カナダで開発された越境ＥＣプラットフォームです。 言語・通貨・決済システムの面で海外向けに展開しやすいことに加えて、デザイン面でのカスタマイズの自由度の高さも特徴といえます。Netflixが展開するECサイトnetflix.shopも、Shopifyで作成されたECサイトです。 netflix.shopのような独自性の強いカスタマイズを行うために使われるのが、Shopifyが開発したテンプレート言語Liquidです。 Liquidはテンプレート言語と呼ばれることもあれば、テンプレートエンジンと言う人もいます。（中略）従来のプログラミング言語のように構文があり、アウトプット、ロジック、ループといったコンセプトがあり、変数（データ）を扱います。PHPのようなWeb中心の言語と似ています。 しかし類似点はそれくらいです。設計上Liquidでできないこともたくさんあります。（中略）ですがこれは十分に考えられたうえでのことなので、最初は制限と感じられる部分も正当な理由があります。 Shopify公式ブログ（https://www.shopify.jp/blog/partner-shopify-template-language-liquid-overview）より テンプレート言語（またはテンプレートエンジン）とは、特定のデータを加工したりアウトプットしたりするのに特化したシステムのことで、プログラミング言語に非常に似ていますが、一部制限が存在します。 LiquidはShopifyの開発を前提に作られたテンプレート言語であり、Shopifyの商品データを受け取り、美しく表示させるのに役立ちます。 Liquidでできること Liquidは、主に表示側のカスタマイズに使われます。MVCモデルで言うところのView側の制御で、HTML/CSS/JavaScriptと一緒に用いられます。 View側の開発では、画一で同じものが表示される静的な画面と商品やユーザーによって表示が変わる動的な画面という考え方がありますが、Liquidは動的な画面を作るのに最適です。 Shopifyのデータに適しており、シンプルな記述でShopifyのデータを扱うことができます。 PHPなどのウェブ開発言語に似ていますが、プログラミング言語に比べて行えることは制限されています。 Liquidの注意点 Liquidはテンプレート言語なので、通常のプログラミング言語とは少し勝手が違います。Liquidをつかって開発する際の注意点をまとめます。 カスタマイズできないプランがある Shopifyにはプランがあり、プランによってはできないカスタマイズがあります。 例えば、チェックアウト画面（カートの次ページから注文完了ページまで）のカスタマイズは、「Shopify Plus」プランでなければできません。 プランによってできることとできないことがあるので注意しましょう。 外部アプリを利用するとLiquidファイルが増える カスタマイズ時、外部アプリをインストールすると、Liquidファイルが自動で作成されます。そのまま使う分には問題ありませんが、必要なくなった外部アプリをアンインストールする際には注意が必要です。 アンインストール時、作成されたLiquidファイルは自動で削除されません。余計なファイルの存在は、エラーの原因になりかねないため、アンインストール時はインストール時に作成されたファイルを削除するようにしたほうが良いでしょう。 対策として、外部アプリをインストールする前に、元のテーマのバックアップを作っておくことをおすすめします。バックアップは、Shopify管理画面の”オンラインストア>テーマ>現在のテーマ>アクション>複製する”で行えます。 Shopifyのカスタマイズならdehaにご相談ください 以上、Shopifyのテンプレート言語であるLiquidについてまとめました。 Liquidを使えば、独自性の高いオリジナルデザインのECサイトを作ることができる Liquidは、View側のカスタマイズに用いられるテンプレート言語 プログラミング言語に似ているが、Liquid独特の記述もあるので、開発には注意が必要 ただ単にShopifyを使う分には、特別な知識は必要ありませんが、独自性の高いサイトを構築するには、ウェブ開発の知識に加えてLiquidの知識が必要になります。 dehaは、Shopifyの公式パートナーとして、Shopifyの開発案件を受けてきました。ベトナムオフショアですので、国内での開発より低いコストで、高品質な開発を行うことができます。 自社ブランドをShopifyで展開したい企業様や、Shopify案件を受けたものの開発リソースが足りないITベンダー様など、Shopify開発でお困りの場合はぜひ一度dehaにお問い合わせください。

Laravelは、PHPのWebフレームワークの中では、現在一番人気があります。2011年に公開されてからアップデートを繰り返しており、2020年9月にはLaravelバージョン8が公開されました。 今回は、Laravelバージョン8の機能についてまとめます。 Laravelバージョン8で追加変更された機能一覧 Laravelは、symfonyをベースに作られたWebフレームワークで、「コードが読みやすい」「MVCモデルを採用している」「拡張性と自由度が高い」と言った特徴があります。 バージョン8では、以下のような機能が追加・変更されました。 Laravel Jetstream モデルファイルの場所変更 ダミーデータ作成がより便利に 不要なマイグレーションファイルの処理 ジョブのバッチ機能追加 Rate Limitingの改善 メンテナンスモード改良 Closure Dispatch / Chain Dynamic Blade Components イベントリスナー処理の改良 新たな時間変更の関数が利用可能に Artisan Serveコマンドの改良 ページネーションビュー変更 ルートファイルの名前空間の変更 Laravelバージョン8の主要な変更点 一部の変更点について抜粋して解説します。 Laravel Jetstream Laravel Jetstreamは、ログイン・認証機能です。使うことで、以下のような機能が簡単に実装できます。 ログイン ユーザー登録 メール認証（本人確認、本登録メール） ２段階認証 セッション管理 API（Laravel Sanctum） チーム管理 ログイン機能自体はlaravel/uiという別パッケージとして、以前から存在していましたが、Laravel Jetstreamから「チーム管理」が追加されています。 これにより、マイグレーションの変更なしに、各ユーザーのカテゴリ分けが可能です。 またLaravel Jetstreamでは、以下のような内部的な変更もありました。 利用しているCSSフレームワークがbootstrapからTailwind CSSになった JavaScriptのシステムとして、LivewireまたはInertiaのどちらかのライブラリを選択できるようになった モデルファイルの場所変更 従来のLaravelでは、モデルファイルがappディレクトリ直下に存在していましたが、バージョン8からはapp/Modelsディレクトリ下に変更となりました。 ファイルをモデル（データベースの操作などを行う部分）、ビュー（画面を操作する部分）、コントローラー（データの処理を行う部分）の３つに分ける考え方を、MVCモデルと言います。 MVCモデルを採用するメリットは、ソースコードの管理や拡張がしやすくなり開発効率が良くなるという点です。 これまでのLaravelでは、コントローラーファイルは「Controller」ディレクト、ビューファイルは「View」ディレクトリに入っているのに、モデルファイルだけ変な場所にあるという状態でした。 ディレクトリ構成が変わったことで、よりソース管理しやすくなると思われます。 […]