Fedoraで行こう！ 〜しなやか編〜

それでは

今回は、Web Front Endに関するものを。Vue.jsを少しばかり。

on Fedora 29

今までと変わりなく、Fedoraで参ります。替えようがないのですけどね（笑）

  • Fedora Kernel 4.20.13-200
  • Node.js v10.15.0
  • npm 6.4.1

NormalでInstallしたものです。これをベースに行っていきます。

By Vue-CLI 2.x

まず、2.x系列から行ってまいりましょう。

$ npm i vue-cli

まず、サクッと、CLI（Command Line Interface)をいれます。また、上記は、

4 npm install vue-cli

と、キチンと記載をしてもよいです。次に、Projectを作成します。

$ ./node_modules/.bin/vue init webpack hello

Vue-CLIをGlobalでInstallしたとしても、Pathを設定しないと、動作させられませんが、分かりやすくしております。また、

$ ./node_modules/vue-cli/bin/vue init webpack hello

も同じことになります。質疑に答え終わると、一通りのDataが作成されます。
現状、そのまま動作させるところまでを主眼としているので、次に、動作させてみます。

$ cd hello
$ npm run dev

と実行すれば、ブラウザでアクセスしてね！という表示がなされるので、ブラウザで表示させてみてください。
また、「npm run dev」は、package.json内のscripts項に記載させていて、

$ npm start

と実行しても、同じ結果を得ることができます。 scripts項には、いくつか記述があって、

$ npm test

と実行すると、現行のFedoraの環境においては、

   SecurityError: localStorage is not available for opaque origins

なるErrorが発生し、上手く動作しません。そこで、「test/unit/jest.conf.js」に、以下の記述を追加して、実行してみてください。

...
module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  testURL: 'http://localhost/',
...

「testURL」を追加すれば、動作するのではないかと思います。

Yarnってみる

npmは、言ってみれば、パッケージマネージャでして、そこにも、新興勢力が勃興しているわけです。
「yarn」というものです。Fedora公式にもあるようなのだけど、「yarn」と「yarnpkg」の関係性がよくわからなかったので、yarn公式のものをInstallすることにします。
Install方法は、ここに、従います。

$ curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
$ sudo dnf install yarn

Installは、つつがなく、完了するのでないかと思います。

By Vue-CLI 3

yarnで、3.x系列をごにょごにょしてみる。

$ yarn add @vue/cli

globalに行きたい時は、

$ yarn global add @vue/cli

globalというから、sudo必要なのかな、と思いましたら、そうではなかったので、globalでもいいかと思います。ただ、Pathの設定は、必要となります。「~/.yarn/bin/vue」にいます。
globalに、Installした一覧は、

$ yarn global list

で、閲覧が可能で、削除も、

$ yarn global remove @vue/cli

と行えば、削除されます。
では、Projectを作ってみましょう。

$ ./node_modules/.bin/vue -V
3.4.1
$ ./node_module/.bin/vue create hello

と、実行すると、

Vue CLI v3.4.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

という画面に推移します。defaultだと、最小構成なので、いろいろ選択（Testとか）したい場合は、Manuallyをキーボードの下矢印を選択して、クリックしてください。（いろいろと設定画面になります）
選択が終了しますと、あれこれとFetchモードになりますので、しばらく待ちモード。

...
 $ cd hello
 $ yarn serve
...

というのが表示されて終了します。上記で表示されているCommandを叩くと、ブラウザ上に、Defaultの画面表示がなされます。

カオス

実際、上記までだと、Codeを書く云々の手前の話で、まず、何を選ぶか？っていうのがあって、たまたま、Vue.jsを選択している流れにあります。更に、Packageマネージャも複数あります。次に、トランスパイラー（いろいろ名前ありますねぇー）というところのJavascriptをどう書くか、というものがあります。ぐぐる先生のところのBabelか、ナデラさんちのTypeScriptか、っていうのがあります。（今の所、どっちにするか決めてないけど。）
また、Buildツール（あれこれあるFileをまとめてくれる）もWebpackか、Parcelか、っていう話で。（少し前だと、Browserifyっていうお話で。少し前っていうか今でもなんでしょうけど）
後、あれだ、CSSもSassで！っていうのもあって。まあ、HTML自体、XMLを核にしているものの、CSSやjavascriptをハンドリングできる代物なので、言ってしまえば、3言語が同居しているようなものです。
この多層で複雑な状況において、各Phaseで、新しいものが勃興するのと、既存勢力の進化も同時進行なので、まあ、カオスと言っても差し支えないのだろうな、という気がしています。
ちょいと首を突っ込んだら、クラクラしてきましたもん（笑）
裏でNode.js使うならいいのだけど、DjangoやFlaskといったPythonやRailsといったRubyなんかを使うなら、更に、大変なことになってきますね（笑）

コメント

コメントを投稿

このブログの人気の投稿

Tabulatorで行こう！ 〜ダイバー編〜

あれから半日 ある程度のところまで、というところで、寝たんだけど。寝付けないわけです（笑） 「何をどうすれば」「あれをこうすれば」「これがああなって」という感じで、脳は活動をやめてないわけです。 ルーチンなので、そのうち、眠りに落ちるのですが、ナカナカ抜けない癖のようなものです。 修正を加えていた「書庫アプリ」も、ほぼ所望には仕上がりをみました。 そうなんだよね Wiredのフロントエンド に関する記事なのですが、「そうね！そうね！」と思ってしまいました。ほんと、移り変わりが早いので、ナカナカ入るタイミングを見つけられないで、今に至ってしまってますからね。大縄跳びに、上手く入れないみたいな（笑） Sort機能 Defaultで、Sortすることになっているので、Sortさせない列に対しては、以下のような設定をします。（一部抜粋） var table = new Tabulator("#example-table", { layout:"fitColumns", columns:[ ... {title:"Gender", field:"gender", headerSort:false}, Full は、こちらに。 Filter機能 Exampleを見ると、いろいろできますが、ここでは、「Text入力」と「選択入力」の二つを紹介。 var table = new Tabulator("#example-table", { layout:"fitColumns", columns:[ {title:"Name", width:150, headerFilter:true}, ... {title:"Favourite Color", field:"col", 　　　　　　　　　 headerFilter:"select", headerFilterParams:{values:true}}, ... ...
続きを読む

Tabulatorで行こう！ 〜違うじゃん編〜

あれから数日 タイトルに書いてしまってるので、なんですが（笑） 「 table.js 」に、再度落ち着いたと思いきや、結局、別のLibraryをいじってるという日々でした。 「 Tabulator 」という多機能のTable操作のライブラリです。 まだ、最終的にやりたいことはできてないのだけど、落とし所は過ぎてるので、カキコ。 初動のハマり箇所 いつものように、ぐぐる先生に、お手伝いをいただきますと、 $("#tabulator-example").tabulator({ layout:"fitColumns", ... と表現されているところが多いのですが、実は、 var table = new Tabulator("#example-table", { layout:"fitColumns", ... というのが、最新では紹介をされています。最初の方は、「 jQuery 」とセットになってるお話なんですが、最新では、いりません。ちなみに、最新は、 4.1 です。 それでも、ｊQueryという場合には、 <script type="text/javascript" src="dist/js/tabulator.min.js"></script> <script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script> Wrapperが用意されているので、それをimportしてください、ということになっています。（パスは読み替え要です） 必要な設定 最低限の設定は、以下になります。 <link href="dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="dist/js/tabulator.min.js"></scr...
続きを読む

Fedoraで行こう！ 〜音声合成pyttsx3編〜

久しぶり 数年ぶりに、書いてみました。諸々のScriptの調整やら何やら、ございますれば。 Fedoraは、 37 を使用しております。 まあ、もうすぐ、 38 でますけどね。 インストールしてみた ふと、音声合成をやってみたくなり、ぐぐる先生で調べまして、 pyttsx3 なるものがあり、 使えますよ、と。事前で、というか、Python側ではなく、Fedora側で、インストールしておくものもある、 という感じで。 $ sudo dnf install espeak $ pyenv> pip install pyttsx3 pyenv は、 virtualenv にて、仮想的な環境を 構築した上での作業になっております。不要であれば、sudoを使って、インストールすればいいかと 思います。 libespeakのエラー $ python >>> import pyttsx3 >>> engine = pyttsx3.init() >>> engine.setProperty("voice", "Japanese") >>> engine.say("こんにちは") >>> engine.runAndWait() 少なくとも、上記コードは問題が発生したものと同一ではないのですが、上記だと、タイトルに ありますように、 libespeak でエラーになります。単純に、日本語を 解釈をしていない、ということです。 第一の問題 espeak は、日本語を解釈しません。日本語を解釈するのは、 espeak-ng になります。従って、 $ sudo dnf install espeak-ng CLIによるespeak-ngでは、ちゃんと日本語を解釈しますが、pyttsx3の先程のコードでは 問題がクリアになりません。 グーグル先生では、libespeak-ngをlibespeakに、シンボリックリンクすることで対応 というものがでます。 マイルール的に、管理者領域では、通常のUpdateや設定以外では操作しない、と決めている ので、リンクの張り替えによる対応はしないとしました。 第二の問題 $...
続きを読む