stencil:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
stencil:index.html [2019/09/16] – [開発環境] adash333 | stencil:index.html [2019/09/16] (現在) – [Stencil 目次] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Stencil.js ====== | ====== Stencil.js ====== | ||
+ | ---// | ||
+ | [[00.stencil: | ||
- | https:// | + | ===== Stencil 目次 ===== |
- | {{: | + | |
- | Stencilとは、Webコンポーネントを作成するためのツール(コンパイラ)だそうです。 | + | [[00.stencil: |
- | ? | + | [[00.stencil: |
- | 何を言っているのかさっぱり分かりませんね。私もよく分かりませんが、特定のフレームワークに依存せずに、フォームやナビゲーションバーなどの、『再利用可能なWebページ作成用の部品』を作成するためのツールみたいなもの、と、私は認識しています。 | + | [[00.stencil:02.stencilでlocalstorage利用のtodoアプリ|02.StencilでlocalStorage利用のTODOアプリ]] |
- | + | ||
- | 将来性があるのかさっぱり分かりませんが、なんか面白そうなので、Stencilを用いた簡単なアプリを写経していきたいと思います。 | + | |
- | + | ||
- | 参考:[[https:// | + | |
- | + | ||
- | ===== Stencil 目次 ===== | + | |
- | [[stencil:01.stencilでtodoアプリ|01.StencilでTodoアプリ]] | + | |
[[stencil: | [[stencil: | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ===== Windows10でStencilアプリの開始 ===== | ||
- | 2019年9月時点での方法については、以下をご覧ください。 | ||
- | |||
- | [[00.webコンポーネント作成ツールstencil: | ||
- | ===== GitHubにpushする ===== | ||
- | Netlifyで公開するために、リポジトリをGitHubへpushします。 | ||
- | (BitBucketでもかまいません。BitBucketの方が、フリープランでSecretリポジトリを2つ以上作成することができます。) | ||
- | *GitHubにログインして、新規リポジトリを作成(stencil-starterという名前にしました) | ||
- | {{: | ||
- | {{: | ||
- | *上記のページに従い、VisualStudioCodeのターミナル画面に以下を入力 | ||
- | < | ||
- | git init | ||
- | git add . | ||
- | git commit -m "first commit" | ||
- | git remote add origin https:// | ||
- | git push -u origin master | ||
- | </ | ||
- | {{: | ||
- | {{: | ||
- | *GitHubへのログインメールアドレスとパスワードを聞かれるので、入力します | ||
- | {{: | ||
- | *GitHubのリポジトリのページをリロードすると、ファイル群がpush(アップロード)されていることが確認できます。 | ||
- | https:// | ||
- | {{: | ||
- | |||
- | |||
- | ==== @stencil/ | ||
- | 2018/ | ||
- | |||
- | バグ回避のために、@stencil/ | ||
- | *ローカルのパソコン(VisualStudioCodeで編集)のpackage.jsonを以下のように変更 | ||
- | (変更前) | ||
- | {{: | ||
- | (変更後) | ||
- | {{: | ||
- | *以下のコードを入力 | ||
- | < | ||
- | npm update | ||
- | git add . | ||
- | git commit -m " | ||
- | git push -u origin master | ||
- | </ | ||
- | {{: | ||
- | {{: | ||
- | 毎回、メールアドレスとパスワードを入力するのが面倒、、、 | ||
- | |||
- | *再度、Netlifyのページに行くと、自動的にbuildし直してくれていて、サイトも以下のようにちゃんと動いていました。 | ||
- | {{: | ||
- | |||
- | https:// | ||
- | {{: | ||
- | |||
- | これで、StencilアプリをNetlifyで公開することができました。 | ||
- | |||
- | ソースコード | ||
- | https:// | ||
- | (https:// | ||
- | |||
- | |||
- | ===== Stencilを用いたアプリ作成のリンク ===== | ||
- | |||
- | https:// | ||
- | @xiaca | ||
- | 2018年10月15日に更新 | ||
- | Ionic4(stencil)で爆速でLighthouse100点のサイトを立ち上げる | ||
- | |||
- | https:// | ||
- | {{: | ||
- | →Stencilとはいったい何者なのか?また実際のコーディング方法など、丁寧に記載されています。 | ||
- | こちらのサイトもいずれ写経してみたいです。 | ||
- | |||
- | https:// | ||
- | |||
- | https:// | ||
- | |||
- | |||
- | https:// | ||
- | |||
- | ===== メニュー ===== | ||
- | |||
- | [[stencil: | ||
- | |||
- | |||
行 118: | 行 21: | ||
- | ===== リンク ===== | ||
- | 目次:[[stencil: | ||
- | 次:[[stencil: | ||
stencil/index.html.1568608389.txt.gz · 最終更新: 2019/09/16 by adash333