アクトワン Velo開発部

Wix専門Web制作会社 合同会社アクトワンの公式noteです！ Java Scriptを使ったWebサイトのカスタマイズができる Velo by Wixのコーディングについての記事を発信しています！ 2023年 Velo Developer certification 取得

アクトワン Velo開発部

Wix専門Web制作会社 合同会社アクトワンの公式noteです！ Java Scriptを使ったWebサイトのカスタマイズができる Velo by Wixのコーディングについての記事を発信しています！ 2023年 Velo Developer certification 取得

  • はじめる Velo

    Velo by Wixを使ったWixサイトのカスタマイズは、Webデザインと開発の分野で新たな可能性を切り拓く手段として急速に注目されています。 「はじめるVelo」 は、そんなVelo by Wixの世界への入り口であり、コーディング初心者の方々にも、楽しみながらVeloを学び、利用できる方法を提供する情報満載のマガジンです！

  • 固定された記事

Velo by Wix ルーターフックを使う

Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です！ 今回は弊社のオンラインサロンのサービス「クリエイター登録」の機能で使用されている技術、「ルーターフック」について徹底解説致します。 Wix Tech salon クリエイター登録ページ ルーターフックは、コレクションから作成された動的リストページから動的アイテムページに移行する際に、そのアイテムを入力した本人のみが閲覧できる機能を可能にする基本的なコーディング技術です。 こちらはサイト上でデータ登録

¥5,000
アクトワン Velo開…

    • Velo 第８３回　APIの公開（３）

      第８２回では Wixサイトから公開APIにアクセスしました。 しかし公開APIの目的は、HTTPリクエストを送信すればどのような環境下にあってもリソースが得られることです。 そもそも Wix環境下にあるならば何も遠回りして公開APIを使う必要はありません。 ページエレメントで直接、場合によってはノーコードでコントロールすることが出来るからです。 ブラウザーで送信ブラウザーには JavaScript の実行環境が整っています。 F12でコンソールを開けば直ちにインタープリタ

      アクトワン Velo開…

      • Velo 第８２回　APIの公開（２）

        ここでは例の様に Wixサイトからエンドポイントへのアクセスを考えます。 サードパーティ製のAPIへアクセスする際の参考になります。 fetch.web.jsエンドポイントにアクセスするためには fetch( )関数を使います。 この関数はバックエンド関数なので、フロントエンドから呼び出すためには Webメソッドを使います。 ん～、正直、何かと面倒臭いですね。 今回の例は Wixサイトからエンドポイントにアクセスしているので fetch( ) を使う以上こうなってしまいま

        アクトワン Velo開…

        • Velo 第８１回　APIの公開（１）

          ここで言うAPIは、外部ユーザーにエンドポイント(URI)を公開し、そこにHTTPリクエストを送信することでそのサイトの機能が使えるAPIのことです。 Wix Learn の最終テーマでもあり、ハードルはそれなりに高いですが、サンプルコードが Velo by Wix Examplesに掲載されていますので、紹介も兼ねて理解を深めたいと思います。 この例ではサイトのコレクション(images)にアクセスし、画像のダウンロードやアップロードを可能にするAPIを公開しています。

          アクトワン Velo開…
        • 固定された記事

        Velo by Wix ルーターフックを使う

        ¥5,000
        アクトワン Velo開発部

        マガジン

        • はじめる Velo
          10本

        記事

          Velo 第８０回　ジャンプ文

          プログラム言語には制御の分岐点となるジャンプ文が用意されています。 プログラムカウンターの変更と思えば分かり易いかも知れません。 Javascript では break文や return文が代表的なジャンプ文です。 break文ループ文または switch文から脱出する文です。従ってループ文または switch文でしか使えません。 ラベルなし 処理を中断し、最も内側のループ文または switch文から抜け出します。 ラベルあり 処理を中断し、ラベルで指定された文の最

          アクトワン Velo開…

          Velo 第８０回　ジャンプ文

          アクトワン Velo開発部

          Velo 第７９回　Wix集計とフィルター

          Wix集計をグループ別に行う場合、フィルターをグループ化する前に掛けるのか、グループ化した後に掛けるのかでは結果が異なります。 フィルターとは部分集合を求める操作のことです。 従ってこの違いは部分集合の集計結果を求めるのか、集計結果の部分集合を求めるのかの違いです。 基本情報技術者試験ではSQL関連の練習問題で WHERE と HAVING の違いとして頻出しています。 グループ化コレクション(myCollection)にはTaro、Jiro、Sabro、Shiro の

          アクトワン Velo開…

          Velo 第７９回　Wix集計とフィルター

          アクトワン Velo開発部

          Velo 第７８回　分割代入

          Javascript で代入式を上手に使うお話です。 配列やオブジェクトは構造化されたデータです。 従って個々の値を変数に代入するためにはインデックスやキーを定めて取り出すことになります。 例えば以下の例を見てみましょう。 配列上図では配列の値を一般的な方法で取り出す例を示しています。 しかし代入の左辺にも配列の構造を持ち込めばどうなるでしょうか。 下図で調べてみましょう。 右辺の構造がそのまま左辺に展開されc、d、eには配列の値がそのまま代入されています。 分割代入とは

          アクトワン Velo開…

          Velo 第７８回　分割代入

          アクトワン Velo開発部

          Velo 第７７回　Wixルーターとは

          動的ページではアイテム毎に prefix にぶら下がった異なる URL が与えられています。 そして同じデザインで異なるコンテンツを表示することが可能になっています。 しかし実際には同じページにURLでスイッチした異なるコンテンツを表示しているだけです。 この舞台裏で働いているのが Wixルーターという機能です。 prefix を経由する HTTPリクエストを読み取って相応しいページに移動したり、必要なデータをページに渡したりする機能です。 ルーター機能はコーディング可能

          アクトワン Velo開…

          Velo 第７７回　Wixルーターとは

          アクトワン Velo開発部

          Velo 第７６回　メディアマネジャ（３）

          今回はメディアマネジャーにアップロードしたテキストファイルをページエレメントに表示するコーディングを確認しましょう。 前回のお話で、フロントエンドに getDownloadUrl をインポートして fileUrl からダウンロード用URLを得ることが出来ました。このURLに fetch( )関数を適用することでテキストを得ることが出来ます。 fetch( )関数今回はHTTPSを使ってウェブサーバーからリソース(テキスト)を取得するために使います。fetch( )関数は、

          アクトワン Velo開…

          Velo 第７６回　メディアマネジャ（３）

          アクトワン Velo開発部

          Velo 第７５回　メディアマネジャ（２）

          メディアマネジャにアップロードしたファイルは fileUrl という内部フォーマットのURLが与えられています。 一方各ページの画像には src というプロパティがあり、これに内部フォーマットのURLを与えると画像が表示できるようになっています。 例えば以下の様に、アップロードボタン(uploadButton)の onChange( )イベントでアップロードファイルの fileUrl を取得し、それを画像(displayImage)の src に与えるとアップロードした画像

          アクトワン Velo開…

          Velo 第７５回　メディアマネジャ（２）

          アクトワン Velo開発部

          Velo 第７４回　メディアマネジャ（１）

          アップロードボタンで画像等のファイルをアップロードすると、ファイルは直ちにサーバーにアップロードされる訳ではありません。 アップロードまでのシナリオ等を確認しておきましょう。 アップロードボタンアップロードボタンの機能はアップロードするファイルを選択することです。 選択されたファイルはオブジェクト化され valueプロパティの値としてセットされ、onChange( ) イベントが発出されます。 次いでファイルの検証がなされます。 即ちこの段階ではファイルはアップロードされ

          アクトワン Velo開…

          Velo 第７４回　メディアマネジャ（１）

          アクトワン Velo開発部

          Velo 第７３回　ジェネレータ

          前回は反復可能オブジェクトからイテレータメソッド[Symbol.iterator]( ) を使ってイテレータを作りましたが、ジェネレータ関数は関数でイテレータを定義します。 ジェネレータ関数で作られたイテレータをとくにジェネレータと言います。Veloで使う場面は殆どありませんが、イテレータつながりのお話です。 ジェネレータ関数関数の宣言を function* で行うとジェネレータ関数が定義されます。 そしてそのように定義された関数を呼び出すと、戻り値はイテレータになります。

          アクトワン Velo開…

          Velo 第７３回　ジェネレータ

          アクトワン Velo開発部

          Velo 第７２回　イテレータ

          Veloでは CMSデータを呼び出すと個別アイテムの配列となって取り出されます。 これはテーブルやリピーター等のデータ仕様も同じことです。 従って配列に関する知識や技術は大切です。 配列、文字列などは for/of 構文が使える便利なオブジェクトですが、それは意図的にそう設計されているからです。 つまり「for/of 構文が使える」のではなく「for/of 構文を使うために設計されている」と理解するのが正しいです。 反復可能オブジェクト分かり易く言えば Javascrip

          アクトワン Velo開…

          Velo 第７２回　イテレータ

          アクトワン Velo開発部

          Velo 第７１回　席替えプログラム

          順に並んでいる数字をランダムな並びに変えるプログラムです。並び替えた数字の一部を抜き出せば抽選プログラムになります。 いろんな場面でよく使われます。 抽選番号１０個の数字から１つをランダムに指定するコーディングです。 Javascript の Mathオブジェクトには沢山の関数が用意されています。Math.random( ) 関数を使えば０から１未満の疑似乱数を返してくれますので、これに１０を掛けて、少数を切り捨てれば、０から９までの整数の一つをランダムに選ぶコーディングが

          アクトワン Velo開…

          Velo 第７１回　席替えプログラム

          アクトワン Velo開発部

          Velo 第７０回　VDC(プロジェクトを提出する)

          VDCとは Velo Developer certification のことです。目的は以下の様に書いてあります。(Free Velo Certification & Exam | Wix Learn) また受験に相応しい対象者の記載もあります。英語の壁があるので日本ではあまり合格者はいないのではと思っています。 VDCには２つのステップがあります。今回は２つ目の「プロジェクトを提出する」です。 プロジェクトを提出するガイドラインに沿ったサイトの構築が課題となります。試

          アクトワン Velo開…

          Velo 第７０回　VDC(プロジェクトを提出する)

          アクトワン Velo開発部

          Velo 第６９回　VDC(試験を受ける)

          VDCとは Velo Developer certification のことです。目的は以下の様に書いてあります。(Free Velo Certification & Exam | Wix Learn) また受験に相応しい対象者の記載もあります。英語の壁があるので日本ではあまり合格者はいないのではと思っています。 VDCには２つのステップがあります。１つ目は今回紹介する「試験を受ける」です。そして２つ目は次回紹介する「プロジェクトを提出する」です。 試験を受ける試験は３

          アクトワン Velo開…

          Velo 第６９回　VDC(試験を受ける)

          アクトワン Velo開発部