2023-03-17

Gitをさらっとまとめてみる

自分1人でページの更新や運営をする分にはあんまりいらないのかもしれないが、複数人で1つのプロジェクトの更新や運営をすると必ず発生するファイルの入れ違いアップロードとかを防ぐために差分だけを更新してくれたり、誰がいつどこを更新したかを全て記録してくれるツール。
index.htmlを複数人で編集してもGitで管理してからFTPとかに上げていくことで安全に更新ができる。

また、運営しつつ新しい機能を追加したい時とかには機能追加用のコード編集場所を作って、運営中のコードを傷つけずに機能追加コードをいじることができたりする。
機能追加コードを触っているうちに運営中のコードに戻りたい！という時も運営中の編集場所にもどればコードが運営中のコードに戻ってくれたりもする。

プログラマーでは実務で必須なので簡単にでも勉強しておかないといけない。
詳しくはこちら。

backlog.com

Gitは基本的にネットでソースを共有するので、そのソースの保管場所を提供してくれるサービスを使わなくてはいけない。
そのサービスで有名なのがGithubとBitbucket。違いはいくつかあるが勉強用で使うのであればどちらでもいい気がする。
今回はBitbucketでやってみる。

id.atlassian.com

特に難しいことはなく、メールアドレスかGoogleからログインなどすればすぐにサインアップができる。

自分のページができるが、ここのページでどうこうすることはなく、次に紹介するソフトで自分のPCとBitbucketのリポジトリを見やすく管理していく。リポジトリとはそのプロジェクトのコードの貯蔵庫という意味。 OSでいえば単純にフォルダみたいな感じ。

プロジェクトフォルダ（PC）←これがローカルのリポジトリ
- 運営中のコードフォルダ　←ついでにこれがブランチという
  - index.html
  - product.html
- 機能追加のコードフォルダ　←ブランチ
  - index.html
  - product.html
プロジェクトフォルダ（クラウド） ←これがリモートのリポジトリ
- 運営中のコードフォルダ　←ブランチ
  - index.html
  - product.html
- 機能追加のコードフォルダ　←ブランチ
  - index.html
  - product.html

こんな感じで考えたらいいかと思う。

SourceTreeインストール

次にSourceTreeをインストール。
まず下のURLの右上のボタンをクリックして
同意すればダウンロード。

www.sourcetreeapp.com

インストールしたら、まずメニューから設定をクリックし、
アカウントタブをクリック。認証方法はOAuthで。
追加をすれば先ほどのbitbucketのページに行ってからSourcetreeに戻ってくるので、それでアカウント追加完了。

プロトコルはSSHになっているが間違え、HTTPSでOK。

アカウントが追加されたので、次にリモートリポジトリとローカルリポジトリを接続する。

Sourcetreeの小さいメニュー画面の中に「新規...」というのがあるので
それをクリックし、リモートリポジトリを作成。

またウィンドウが出てくるので、リポジトリの名前をつけて作成をクリック。

そうすると、さっきログインしたbitbucketでリポジトリが作成されている。

リモートボタンをクリックすると、こちらにもリモートリポジトリが追加されていることがわかる。ローカルをクリックしてもまだ何もないので、リモートリポジトリをコピー（クローン）する。

sourcetreeのリモートタブにあるリポジトリの行のクローンというのをクリックすると、どこにローカルリポジトリを置くか設定してクローンができる。

これは後々フォルダ移動はできない？（できるかもだけどめんどくさそう）なのでちゃんと決めてからクローンする。間違えた場合はフォルダを移動ではなく削除してからクローンしなおす方が簡単。

クローンが終わると、こんな大きめのウィンドウが出るので、これで準備が完了。他の人のGitをクローンして試すこともできたりするので、
ローカルから先に作って変更後にリモートリポジトリを使うこともできるけどリモートを先に作ってクローンの方を馴染ませといた方がいいのかもしれない。

コミット・プッシュ・プル

Gitでまずなにそれ？と思ったのはこの３つの言葉。 WEBデザインとかでは聞いたことなかったので全然馴染みがない。

簡単にいうとこんな感じかと思う。

プル

他の人がコードを更新したものを自分のPCのリポジトリ（ローカルリポジトリ）に差分を更新することで最新のデータにすること。1日のはじめに作業する時とか、こっちが更新する前とかに一旦プルをしておく習慣をつけるとよいと思う。

コミット

自分が変更したコードをローカルリポジトリに記録すること。コミットをすることでSourcetreeでは変更前と変更後が見やすく表示されてわかりやすい。どこを変更したかなどコミットする際にはコメントが必須。

プッシュ

コミットしたコードをリモートリポジトリに送ること。プッシュされると他の作業している人にも変更がわかる。
何回も変更をプッシュしたりすると履歴が増えて荒れるのでプッシュは１日の作業の終わりとか、機能の追加が完了してからなど区切りの時にプッシュをする。

プロジェクトの作成の流れ

プロジェクトを始める時とかのざっとした流れをはこんな感じかと思う。

Githubとかに置いてあるプロジェクトのリポジトリをローカルにクローンする。もしくはクローンされていたら最初にプルをしてデータを最新にする。
初めて作業するなら作業用のブランチを作成する。すでに作業用のブランチが他の人に作られていて、自分が途中から入る場合にはそのブランチに移動する。（これをチェックアウトという。チェックインじゃないんかい！と思うけどチェックイン＝コミットらしい）
作業を開始する。
作業が完了したり一区切りしたらコミットをする。
コミットに特に問題がなければプッシュをする。
1に戻る

人によってはいくつかのブランチを行き来して開発していたりするのかも。

実務ではいきなりGit全般任されるとかはないと思うので、
最初はブランチ・プル・コミット・プッシュの流れだけわかってればGitに関しては迷惑かけないと思う笑
ただ間違えてコミットしちゃったとか、プッシュしちゃったとかあるので、そういうのがないように気をつける。

Gitの練習

ということで一旦簡単にGitの練習をしてみる。

sourcetreeの大きいウィンドウの真ん中にあるFinderで表示をクリック（mac使用）
gitのローカルリポジトリのフォルダに移動するので、そこに例としてhtmlのサンプルをダウンロードして保存する。

サンプルはこちらからダウンロードした。

無料ホームページ用HTMLテンプレートメガピクス

そうすると、Sourcetreeが保存したファイルで埋め尽くされる。

これを一旦全部チェックをして、下のコミットメッセージに「first commit」と入力してコミットをする。

するとまた何もないウィンドウになるが、履歴をクリックするとコミット内容が表示される。

特に問題がなければプッシュをクリックする。プッシュするブランチのmainにチェックを入れてOKで完了。

無事プッシュができた。mainというのはローカルリポジトリのmainブランチ、ということでorigin/mainというのはリモートリポジトリのmainブランチということ。

bitbucketのサイトも念の為確認してみると、こちらでもファイル確認できる。

次に、index.htmlを適当に変更してからSourcetreeをまた見てみると、
変わったコードが自動的に表示される。
変更前と変更後が表示される。

タイトル変更とコミットメッセージを入力して、コミット。そうすると、履歴かmainブランチで新しい行が追加される。
現状はmainブランチで1コミットがまだプッシュされていない状態と表示されている。

他の人も同じ作業をしている可能性とかも考えてプッシュをする前にも念の為プルをしておいた方がいいかもしれない。
(たしか同じ作業を他の人がしていたらエラーが起きるはず)

プルして問題なく、プッシュを押すと完了。

mainタグとorigin/mainタグが一番上に移動している。
これはローカルリポジトリもリモートリポジトリもここが最新のデータ状態ですよということを表している。

Gitはそんなに難しくない

こんな感じで進めていくので、思ったより難しくないのであまり身構えないでも大丈夫そう。頻度も多くないし万が一間違えてプルしちゃったとかでもキャンセルする方法はあるのでまたこれはこれでまとめて忘れないようにする。

入門はこれがわかりやすい

backlog.com

2023-03-06

AIイラスト作成方法メモ　

AIイラストプログラミング

AIイラスト作成資料サイトメモ

賛否両論あるけど個人的には興味があるので
作成方法メモ
絵を描けなくてもハイクオリティの絵が作れるのはすごい
キーワードをうまく使うとかAIが作りやすい文言を勉強するのは
今後chatGPTとかを使って仕事をする機会が増えた時とかでも重要なスキルだと思うし、やって損はないと思います。

例えば自分がキャラクターを作ってある程度のポーズを書いて用意してから後はAIに他のポーズを描いてもらうとかだとものすごい効率がよくなるはずだし。

stable diffusion

【AI画像生成】Google ColabでStable Diffusion web UIを動かす方法

chilloutmix

【Stable Diffusion】ChilloutMixの使い方（Google Colab）

モデルデータ

LoRAの使い方

LoRAを使った学習のやり方まとめ！好きな絵柄・キャラクターのイラストを生成しよう【Stable Diffusion】 | くろくまそふと

Civitaiのモデルデータ

Civitai | Stable Diffusion models, embeddings, hypernetworks and more

2023-02-09

Tailwind cssの導入から使い方までをさらっと学ぶ

フロントエンド CSS

Tailwind cssを使ってCSSファイルを使わずコーディング!

udemyとかyoutubeのコーディングの勉強をしていると、
海外の講師が使っていることをよく見るので今回サラッとまとめる。
といいつつ参考リンクの方が詳しいので、学んだよという記事。
Markdown記法の練習もしつつ。

Tailwind cssを使うメリット

サイト更新時などに起こりがちな

レイアウトが急にパターン増えたけど既存クラスをいじったら怖いからまるまるコピーして作り直す
top-container,service-container?どうする？クラス名決めに時間かかる
気づいたら同じスタイルを違うクラス名で書いてた

な感じできっちりCSS作りをしていたはずだけど
結果的に複雑になったり作った人じゃない人が担当になった時にCSSの仕組みを覚えるコストをなくすために作られたフレームワークです。

主なメリットはこちら

HTMLにクラスをつけていくだけでCSSファイルは導入時以外基本的にはつかわない
ホバーやフォーカス・アニメーションもちろん、レスポンシブ対応もクラス内記述で対応できる
reactやvueなどにも導入が簡単にできる

Tailwind cssの基礎的な記述方法

学習コストは多少かかるけどもCSSをある程度理解している人ならわかるような感じなので難しいわけではないと思います。

Btn

上のボタンをTailwind cssで記述すると

<p className="text-white bg-black flex justify-center items-center rounded-full w-12 h-12 ml-[10px]">
  Btn
</p>

このような感じになる。
クラス名を見る感じシンプルなので覚えやすいと思います。
mlはmargin-left,prはpadding-rightとか。 roundedはスタイルだとborder-radiusなので違いはあったりしますが、
何回か記述したら覚えると思います。
チートシートもあるのでこれ使いたい、とかだったら検索して見つけるのも簡単。

nerdcave.com

HTMLのclass部分が冗長になるけど、
CSSファイルに移動してクラス名考えて追加して…
という作業がいらなくなるのは大きいメリットかと。

Tailwind cssの導入方法

使うワークフレームによって若干かわりますが、
それは公式みて使いたいフレームワークの導入ページを見ればすぐ導入できます。

Framework Guides - Tailwind CSS

今回は自分が勉強しているNext.jsでの導入方法を紹介。 Install Tailwind CSS with Next.js - Tailwind CSS ↑ここに書いてあるのだけども…

ちなみにreact繋がりでもcreate-react-appは推奨はしていない模様。 POSTCSSなどの重要なツールとの互換性がないとのことです。

Install Tailwind CSS with Create React App - Tailwind CSS

1. プロジェクトの作成

ターミナルでプロジェクトフォルダにnextをインストールしてフォルダ内に移動する

npx create-next-app@latest my-project --typescript --eslint
cd my-project

2. Tailwind cssのインストール

ターミナルに以下入力。 postcssやautoprefixerを一緒に入れるとベンダープレフィックスとかもまとめて作ってくれたりするらしい？

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. tailwind.config.jsが作成されるので、content部分をコピー

特に何も入れてない人は全文コピペでOK。 Next.jsのapp,pages,componentsにあるjs,ts,jsx,tsxにtailwindcssの記述があったら適応されるよ、みたいな感じでしょうか。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. globals.cssを差し替え

stylesフォルダ内にあるglobals.cssを全て消して、
以下をペースト。

@tailwind base;
@tailwind components;
@tailwind utilities;

5. サーバーを立ち上げて開発開始

ターミナルで以下を入力して、開発の開始。

npm run dev

これで導入完了です。

Next.jsを使って簡単にコーディングしてみる

sandboxでNext.jsとTailwind css でフォーマットされたテストページを
おいときます。

codesandbox.io

スクリーンサイズで表示を変更する方法

sandbox 24行目

<a href="#" className="block pt-4 px-5 pb-6 w-64 text-left no-underline text-gray-800 border border-gray-400 hover:border-gray-500 md:w-full md:mx-auto md:text-center  md:mb-4" >

のmd:をつけてからクラスをつけると、そのスクリーンサイズで適応される。スクリーンサイズの設定は自分でも変えられるが、基本は

md: min-width:768px; lg: min-width:1024px; xl: min-width:1280px;

となっている。モバイルファースト使用。

sandbox 51行目

<a href="#" className="hidden pt-4 px-5 pb-6 w-64 text-left no-underline text-gray-800 border border-gray-400 hover:border-blue-500 md:w-full md:mx-auto md:text-center md:block md:mb-4">

このaタグは小さいスクリーンサイズでは見えないが、スクリーンサイズが1024px以上になると表示されるようになる。

画像背景をつけたい場合

<div className="bg-[url('https://upload.wikimedia.org/wikipedia/commons/f/f0/Note_Logo_symbol_WhiteOnGreen.png')] bg-no-repeat bg-contain h-52 w-52">
        背景イメージつき
      </div>

背景画像を入れたい場合はbg-url('画像URL')を使うことで可能。リピートなし、containとかcoverの設定はbg-no-repeatbg-containなどで調整可能。

よく使うクラスをまとめておきたい

できることはできるが、ボタンなどほぼ変えることがないものだけに使用することが推奨されています。（ここでまとめてしまったら結局今までのCSS設計と変わらないためメリットが失われる）

まとめ

Tailwind css 今後の色々なプロジェクトで導入してくれないかなと個人的には思います。最初はHTMLのクラス記述が冗長になって気になる…と思っていたのですが使ってみると便利だしCSSに行き来しなくていいのは楽ですね。 Udemyの講義動画を見るのもわかりやすく感じます。

2023-02-07

GithubやQiitaでも使うMarkdown記法をさらっと学ぶ

フロントエンド Markdown

2023/2/8 リンク部分-アンカーリンクが空白・ドットなどある場合追加

このブログでもMarkdown編集があるし、
GITやQiitaでも使えるのでこれも勉強しておく。

基本的には

qiita.com

これをみればより詳しくできるが、自分も勉強したということを残すためにブログ記事にしておく。

+か-か*のあと半角スペース1回打った後にテキストを打つとできる。
意味ないけど揃えなくてもリストはできる。リスト内リストはインデント（もしくは半角スペース2回？はてブロではそれでいける）することで1階層深くすることが可能。

- リスト1
+ リスト２
  - 階層2 リスト
- リスト3
  - 階層3-2リスト
    - 階層3-3リスト

リスト1
リスト２
- 階層2リスト
リスト3
- 階層3-2リスト
  - 階層3-3リスト

数字つきリストは-とかの代わりに1.を入れる。全部同じ数字で良くて自動で最適な数字を入れてくれる。
はてブロだけかもしれないが、数字リストの場合、１階層深くするには半角スペース4回打つ必要があった。

リスト1
リスト２
1. 階層2リスト
リスト3
1. 階層3-2リスト
  1. 階層3-3リスト
  2. 階層3-3リスト

1. リスト1
1. リスト２
    1. 階層2リスト
1. リスト3
    1. 階層3-2リスト
        1. 階層3-3リスト
        1. 階層3-3リスト

リンク

[]にURLをいれると外部リンクに、
＃を入れるとアンカーリンクになる。上の目次とかは同じ作り。

自分のブログ
 目次に戻る

[自分のブログ](https://blog.hatena.ne.jp/GO-py/)  
[目次に戻る](#目次)

2023/2/8追記
目次とか使う時に半角スペースのある場合、
半角スペースはハイフンで代用する。また、@とか.とかの記号は省略するとアンカーリンクが効く。

SCSS の書き方
 Next.jsの使い方

[SCSS の書き方](#SCSS-の書き方アンカーリンク例)  
[Next.jsの使い方](#Nextjsの使い方アンカーリンク例)

SCSS の書き方（アンカーリンク例）

Next.jsの使い方（アンカーリンク例）

参考URL

qiita.com

コード記法

いくつか書き方があるが、 ~を３回打ったのを囲むとボーダーのコードエリアが出てくる。 preタグでもOK

~~~javascript
  const test = "test";
  console.log(test);
~~~

  const test = "test";
  console.log(test);

他にも色々あるっぽいし、それぞれのサービスで独自のタグがあったりするが、
これだけやれば間に合うのではないだろうか…多分。

2023-02-03

Pugの簡単な導入方法・使い方をさらっと勉強する

フロントエンド pug

フロントエンドの仕事につけたので、

フロントエンドの色々も忘れないように追加していく。

pugの導入方法から。
依頼される企業さんの中にはpugを使っているところもあるのでさらっと。

バージョン4とバージョン3で書き方違うところがあるのでそこも忘れないように。

pugjs.org

Pugの特徴

閉じタグを記述しなくてよい
インデントで階層分けができる
インクルードなどもできる
変数を使ったり関数が使える

参考URL

and-ha.com

記述方法


    - var fcred ="red"
    section
      h1.title(style=`color:${fcred}`) タイトル
      .div
        | 何もないと#{"<div>"} になる
        br
        | 複数行書くときは | を使う
      p divじゃないときは要素を追加する
      .link-area
        a(href="#") リンクはこれ
      ul.ul-list
        li.list リスト1
      ul.each-list
        - 
          var menus = [
            {num: 1,txt: 'top',},
            {num: 2,txt: 'about',},
            {num: 3,txt: 'contact',}
          ]
        each menu in menus
          li #{menu.txt}
      // htmlに出すコメントアウト
      //- htmlに出さないコメントアウト

出力されると

    <section>
        <h1 class="title" style="color:red">タイトル</h1>
        <div class="div">何もないと&lt;div&gt; になる<br>複数行書くときは | を使う</div>
        <p>divじゃないときは要素を追加する</p>
        <div class="link-area"><a href="#">リンクはこれ</a></div>
        <ul class="ul-list">
            <li class="list">リスト1</li>
        </ul>
        <ul class="each-list">
            <li>top</li>
            <li>about</li>
            <li>contact</li>
        </ul><!-- htmlに出すコメントアウト-->
    </section>

こうなる。上の記述方法の説明は以下はこちら。

クラス名から始まると、出力は<div class="div">...</div>となる。
.クラス名でクラスがつけられる。
div(style="color:red")みたいに要素の後ろにかっこをすると属性が追加できる。リンクのhrefとか
配列などの変数・関数も使え、if・eachなどを駆使してさらに効率的にコーディングもできる
コメントアウトにはhtmlに残すもの・残さないものと２パターン選べる

インクルードができる

_inc/_header.pug

header ヘッダーブロックです

include _inc/_header.pug
p 上にヘッダーブロックが入ります

includeのあとにインクルードしたパスの場所を入れると共通しているものをインクルードができる。

出力すると下記のようになる。

<header>ヘッダーブロックです</header>
<div>上にヘッダーブロックが入ります</div>

デフォルトのテンプレートを使ってレイアウトを継承できる

詳しくはこちら。 Pugのextendsとblockを使ってテンプレートを継承する | cly7796.net

テンプレート的なpuを用意して、extendsで呼び込むとそのレイアウトをそのまま使えちゃう機能。

_ext/_layout.pug

doctype html
html(lang="ja")
  block head
    head
      meta(charset="utf-8")
      title デフォルトのタイトルです。
  body
    block header
      header.header
        p.logo デフォルトのヘッダーです。
    block content
      .content
        p デフォルトのコンテンツです。
    block footer
      footer.footer
        p デフォルトのフッターです。

このテンプレートをservice/index.pug に呼び込んで作成すると
ソースを継承してカスタマイズができる。
カスタマイズができる部分はblock下層部分。

extends ../_ext/_layout.pug

block title
  title サービスのページです。

block header
  p.logo サービスのヘッダーです。

block content
  .content
    p サービスのコンテンツです。

カスタマイズなしで出力すると、_layout.pugのままのソースがでる。

導入方法

ハコイリオヤジさんの記事を見ながら。ありがとうございます。
というかハコイリさんの方がわかりやすいと思う

hakoirioyaji.com

主にgulpとかと合わせて導入するので、それで導入する方法を書いていく

まずgulpのインストール

 npm i -D gulp gulp-notify gulp-plumber gulp-debug

次にpugのインストール

 npm i -D gulp-pug gulp-html-beautify gulp-filter

gulpfile.jsを作成し、以下コピー

const gulp = require('gulp');
const notify = require('gulp-notify');  // エラー通知
const plumber = require('gulp-plumber'); // エラー時のタスク停止防止
const debug = require('gulp-debug'); // ログ表示
const filter = require('gulp-filter'); // ファイルフィルター

const pug = require('gulp-pug'); // Pug
const htmlbeautify = require('gulp-html-beautify'); // HTML整形

const paths = {
  pug: {
    src: 'src/pug/**/*.pug', // コンパイル対象
    dest: 'public/' // 出力先
  }
}

/**
 * pugタスク
 */
function pugCompile() {
  return gulp.src(paths.pug.src)
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(filter(function (file) { // _から始まるファイルを除外
      return !/\/_/.test(file.path) && !/^_/.test(file.relative);
    }))
    .pipe(pug())
    .pipe(htmlbeautify())
    .pipe(gulp.dest(paths.pug.dest))
    .pipe(debug({title: 'pug dest:'}));
}

/**
 * watchタスクで実行する関数
 */
function watch() {
  return gulp.watch(paths.pug.src, gulp.series(pugCompile))
}

exports.pug = pugCompile; // pugタスク
exports.watch = gulp.series(watch); // watchタスク
exports.default = gulp.series(pugCompile); // defaultタスク

gulp watch でpugが保存されるたびにhtml出力してくれるようになる

gulp watch

※ここでgulpのエラーがいっぱいでたのでとても苦戦する。。
mac でgulpのcliバージョンが3.9.1だったらアンインストールして、
gulp-cliはインストールせずにgulpのみインストールする。
グローバルもなくていい。プロジェクト毎にインストールすべし

コンパイル対象のフォルダを作り、pugファイルを作る

'src/pug/*/.pug', /と設定されているので、
srcフォルダ、下層にpugフォルダも追加し、index.pugを追加してみる。

doctype
html(lang="ja")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    meta(name="description", content="")
    meta(name="keywords", content="")
    meta(name="author", content="")
    meta(property="og:title", content="タイトル")
    meta(property="og:type", content="website")
    meta(property="og:url", content="http://任意のURL")
    meta(property="og:image", content="http://任意のURL/og_image.png")
    meta(property="og:site_name", content="")
    meta(property="og:description", content="")
    meta(property="fb:app_id", content="任意のID")
    title タイトル
    link(rel='stylesheet', href="css/style.css")
    script.
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-XXXXXXXX-Y', 'example.com');
      ga('send', 'pageview');
  body
    script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
    script.
      (window.jQuery || document .write('<script src="js/jquery-1.11.2.min.js"><\/script>'));
    script(src="js/scripts.js")

これで出力される。はず。

大まかなpugの説明終わります。

各々詳しくはリンク先で確認推奨！

2022-08-11

DAY37-2 pixelaでのデータ更新＆データ削除の方法

python プログラミング

前回に引き続きpixelaの使い方の続き。

データの上書きと削除方法。

データの上書き

ドキュメントでのcurl操作は

$ curl -X PUT https://pixe.la/v1/users/a-know/graphs/test-graph/20180915 -H 'X-USER-TOKEN:thisissecret' -d '{"quantity":"7","optionalData":"{\"key\":\"value\"}"}'
{"message":"Success.","isSuccess":true}

エンドポイントの最後にアップデートしたい日付を追加して

jsonデータでquantityを更新したい数値に変更する。

オプショナルデータはよくわからないので（サポーター限定？）これは削除。

（グラフの色とかのオプションが変更できる？）

ドキュメントもまだ記載していない。

pythonで書くとこんな感じ。

params = {
    "quantity": "30",
}
response = requests.put(
    url=f"{PIXELA_ENDPOINTS}/{USERNAME}/graphs/{GRAPH_ID}/20220810",
    headers=headers, json=params)
print(response.text)

これで昨日のポイント１が３０に変更されました。

データの削除

これは簡単で、消したいコミットの日付をエンドポイントの一番最後に入れて

指示をdeleteにすればいいだけ。

response = requests.delete(
    url=f"{PIXELA_ENDPOINTS}/{USERNAME}/graphs/{GRAPH_ID}/20220810",
    headers=headers)
print(response.text)

pixela delete

これで消えました。

操作自体は結構簡単。

自分の使ってるSNSと連携して投稿とかツイートしたら草生えるような連携ができればいいな〜

2022-08-10

DAY37-2 pixelaでのデータ更新＆データ削除の方法

python プログラミング

前回に引き続きpixelaの使い方の続き。

データの上書きと削除方法。

データの上書き

ドキュメントでのcurl操作は

$ curl -X PUT https://pixe.la/v1/users/a-know/graphs/test-graph/20180915 -H 'X-USER-TOKEN:thisissecret' -d '{"quantity":"7","optionalData":"{\"key\":\"value\"}"}'
{"message":"Success.","isSuccess":true}

エンドポイントの最後にアップデートしたい日付を追加して

jsonデータでquantityを更新したい数値に変更する。

オプショナルデータはよくわからないので（サポーター限定？）これは削除。

（グラフの色とかのオプションが変更できる？）

ドキュメントもまだ記載していない。

pythonで書くとこんな感じ。

params = {
    "quantity": "30",
}
response = requests.put(
    url=f"{PIXELA_ENDPOINTS}/{USERNAME}/graphs/{GRAPH_ID}/20220810",
    headers=headers, json=params)
print(response.text)

これで昨日のポイント１が３０に変更されました。

データの削除

これは簡単で、消したいコミットの日付をエンドポイントの一番最後に入れて

指示をdeleteにすればいいだけ。

response = requests.delete(
    url=f"{PIXELA_ENDPOINTS}/{USERNAME}/graphs/{GRAPH_ID}/20220810",
    headers=headers)
print(response.text)

pixela delete

これで消えました。

操作自体は結構簡単。

自分の使ってるSNSと連携して投稿とかツイートしたら草生えるような連携ができればいいな〜

目次

Gitとは

ログイン

SourceTreeインストール

コミット・プッシュ・プル

プル

コミット

プッシュ

プロジェクトの作成の流れ

Gitの練習

Gitはそんなに難しくない

AIイラスト作成資料サイトメモ

stable diffusion

chilloutmix

モデルデータ

Tailwind cssを使ってCSSファイルを使わずコーディング!

目次

Tailwind cssを使うメリット

主なメリットはこちら

Tailwind cssの基礎的な記述方法

Tailwind cssの導入方法

1. プロジェクトの作成

2. Tailwind cssのインストール

3. tailwind.config.jsが作成されるので、content部分をコピー

4. globals.cssを差し替え

5. サーバーを立ち上げて開発開始

Next.jsを使って簡単にコーディングしてみる

スクリーンサイズで表示を変更する方法

画像背景をつけたい場合

よく使うクラスをまとめておきたい

まとめ

目次

見出し

強調・打ち消し

改行

リスト

リンク

SCSS の書き方（アンカーリンク例）

Next.jsの使い方（アンカーリンク例）

コード記法

Pugの特徴

記述方法

インクルードができる

デフォルトのテンプレートを使ってレイアウトを継承できる

導入方法

まずgulpのインストール

次にpugのインストール

gulpfile.jsを作成し、以下コピー

gulp watch でpugが保存されるたびにhtml出力してくれるようになる

コンパイル対象のフォルダを作り、pugファイルを作る

データの上書き

データの削除

データの上書き

データの削除