万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1

    Illustratorでまずやるべき設定

    僕の環境

    Illustrator CC

    バージョン22.1

    イラストレーターの上部に出てたツールの補助メニューを表示する

    https://nondesignersclip.com/iilustrator-menubar-control/

    「ウィンドウ(W)→コントロール(C)」にチェックする。

    虫眼鏡のスケールツール

    なぜかデフォルトだと虫眼鏡のツールでドラッグで拡大する場合、補助線出ない

    Illustrator CC メニュー-> Performance -> Performance... -> CPU Performance」 のチェックはずす。

    f:id:shinriyo:20181016110553p:plain すると出ます。

    https://faq.too.com/print/faq/1483?category_id=22&site_domain=default

    右側のツールが出ない

    f:id:shinriyo:20181016110343p:plain こいつ出ない。

    Essential Classic

    f:id:shinriyo:20181016110435p:plain

    Vue CLI 3系を使ってNuxt.jsで PWA (Progressive Web Apps)

    Vue CLI 3.0 の時代。2は消せ。

    https://cli.vuejs.org/guide/

    vue --version

    2系なら消す

    yarn global remove vue-cli

    Vue CLI 3.0

    yarn global add @vue/cli
    vue --version
    3.0.5

    vue initするためになんかこれもいるらしい

    yarn global add @vue/cli-init

    nuxt-pwaプロジェクト

    vue init nuxt/starter nuxt-pwa

    cd nuxt-pwaしてyarn

    yarnyarn install同じっぽいw

    yarn devで起動

    yarn run v1.5.1
    warning ../../../package.json: No license field
    $ nuxt
    
    
     INFO  Building project
    
    ✔ success Builder initialized
    ✔ success Nuxt files generated
    
    Compiling
    
    ● client
    
    ● server █████████████████████████ building modules (13%) 31/35 modules 4 active
      babel-loader › vue-loader › .nuxt/components/nuxt-loading.vue
    
    
    
     ERROR  Failed to compile with 1 errors                                                                          7:32:28 PM
    
    
     READY  Listening on http://localhost:3000

    https://github.com/nuxt/nuxt.js/issues/3216#issuecomment-380777572 こいつを見てnuxt.config.jsを修正する

          if (isDev && isClient) {

    process.を追加する。

          if (isDev && process.isClient) {

    むかつくのでプルリク https://github.com/nuxt-community/starter-template/pull/85

    nuxt.config.js これ追記。1つ前の行に,忘れずに

      modules: [
        '@nuxtjs/pwa'
      ],
      manifest: {
        name: "PWA Page",
        lang: 'ja'
      }

    .gitignorensw.*追記。-eは改行コードを使うためのオプション

    echo -e "\n#PWA\nsw.*" >> .gitignore

    最後に512pxx512pxアイコン画像をstatic/icon.pngに配置します。

    PWAするためのやつ入れる

    yarn add @nuxtjs/pwa

    静的ファイルを生成する。

    yarn generate

    serveをインストール

    serve --version
    10.0.2
    yarn global add serve
    serve -s dist/
    • Netlifyにのせる

    https://ja.nuxtjs.org/faq/netlify-deployment/

    • Build command
    npm run generate

    これでもいける。っていうか調べる前に書いたらいけてた

    yarn run generate
    • Publish directory

    dist

    • ホーム画面に追加

    iPhoneSafari開いて「Add To Home Screen」

    Reactで子コンポーネントのメソッドを呼ぶ

    https://stackoverflow.com/questions/37949981/call-child-method-from-parent

    ref使って、

    <Child ref={this.child} />

    current.メソッド名()で呼べる。

    this.child.current.getAlert();

    そのままだとundefinedになる?? コンストラクタでReact.createRef();が必須かも

      constructor(props) {
        super(props);
        this.myRef = React.createRef();
      }

    https://reactjs.org/docs/refs-and-the-dom.html

    TypeScriptでメンバ変数はanyが嫌なとき、

    private child: React.RefObject<Child>;

    React.RefObject<Child>ジェネリックで変数の型つけられる。