分類: 程式技術

Youtube Data API 中的Category ID

上次寫了 Youtube Data API (https://diary.tw/archives/2032) 來看看若要加上分類要如何進行.

當然需要先取得 category id 囉 (API中的欄位是 videoCateogryId), 從網路上找到的資料如下:

https://gist.github.com/dgp/1b24bf2961521bd75d6c

由於各國家/地區的 category 也可能有不同, 在台灣的清單如下(由上傳分類項目取得): 電影與動畫、汽車與車輛、音樂、寵物與動物、體育、旅遊與活動、遊戲、人物與網誌、喜劇、娛樂、新聞與政治、DIY 教學與生活風格、教育、科學與科技、非營利組織與社運活動.

對應上面的網址如下:

id	中文	英文
1	電影與動畫	Film & Animation
2	汽車與車輛	Cars & Vehicles
10	音樂	Music
15	寵物與動物	Pets & Animals
17	體育	Sport
19	旅遊與活動	Travel & Events
20	遊戲	Gaming
22	人物與網誌	People & Blogs
23	喜劇	Comedy
24	娛樂	Entertainment
25	新聞與政治	News & Politics
26	DIY 教學與生活風格	How-to & Style
27	教育	Education
28	科學與科技	Science & Technology
29	非營利組織與社運活動	Non-profits & Activism

所以若是需要找出教育的排行, 可以利用相同的API, 但多加上videoCategoryId=27:

https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&regionCode=US&videoCategoryId=27&key=[YOUR_API_KEY]

這樣即可取得囉.

[2022/2/17 15:30]

實作出國家/地區與分類項呈現方式, 請參考範例:

https://sample.diary.tw/yttrend/detail.php

標籤 api, category, Google, youtube

Javascript

ISO3166 ALPHA2對照

文章作者作者: tim
文章發佈日期 2021-11-30
在〈ISO3166 ALPHA2對照〉中尚無留言

ISO 3166 是國家/地區的代碼, 其中 ALPHA-2 為兩碼國家代碼, 可以由 wikipedia 這裡整理好的資料查得:

https://zh.wikipedia.org/wiki/ISO_3166-1%E4%BA%8C%E4%BD%8D%E5%AD%97%E6%AF%8D%E4%BB%A3%E7%A0%81

將 table 轉成 csv, 再利用 csv to json (https://csvjson.com/csv2json)轉出即可.

利用了兩碼英文字元的國家/地區代碼, 取得對照的中文名稱, 內容如下:

閱讀全文

標籤 ISO 3166, JSON

Python

如何在repl.it上執行flask並啟動瀏覽器預覽

Flask, 一個 python 上的輕量 web server:

https://palletsprojects.com/p/flask/

可以直接在 repl.it 上執行一個 flask 測試環境嗎? 是可以的, 而且很方便. 我們可以先參考官方的資料 flask quick start:

https://flask.palletsprojects.com/en/2.0.x/quickstart/

程式碼為:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

在 https://repl.it/ 上建立一個 python 專案, 並且輸入上面的程式碼, 按下執行, 就會開始編譯與執行, 不過什麼事也不會發生, console 又會回到 > 的提示符號.

閱讀全文

標籤 demo, flask

Javascript

[Javascript]Arrow function

文章作者作者: tim
文章發佈日期 2021-09-27
在〈[Javascript]Arrow function〉中尚無留言

在 Javascript 中, 使用 Arrow function 是個十分精簡的方式來呈現函數, 一般使用在匿名函數.

這篇寫得十分詳細:

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions

由於 Arrow function是精簡型函數表示法, 所以有許多限制, 在一般使用時需要留意, 但在匿名函數使用時, 常常可以達成許多更精簡更便利的呈現方式.

這個語法是在 ES6 (EMACScript 6, EMACScript 2015)起開始, 也請參閱這裡:

https://ithelp.ithome.com.tw/articles/10195669

標籤 Arrow function, ES6

Javascript

jQuery選擇特定元素但是不含特定class (反向選擇器)

在實作 jQuery 選擇器時, 有時會用到選擇出的 elements 不含指定的 class, 有兩種方式實現:

not() method ex: $(“div.item”).not(“.red”)
:not() seudo-class ex: $(“div.item:not(.red)”)

其中 2. 為 css 原本 selector 的做法.

來看看範例吧:

其中, item 1 ~5 都有 item class, 但 item 2, 3, 4 有 red class, 兩個 button 分別使用 method 1, method 2 來進行切換沒有 red class 的 item 隱藏與顯示 (toggle method).

程式如下:

$("#m1").click(function(){
  $("div.item").not(".red").toggle();
});

$("#m2").click(function(){
  $("div.item:not(.red)").toggle();  
});

參考資料:

https://stackoverflow.com/questions/2448051/how-can-i-select-all-elements-without-a-given-class-in-jquery

標籤 class, css, jQuery, not

程式技術

css grid方法來排版網頁

利用 css 排版頁面的新方法, 除了 flex 外, 還有 css grid 排版方式, 以常見的 header, sidebar, content, footer 來看, 我們可以這樣進行:

先定義外面的 div.conatiner 為 display: grid;

再來依序在該 container 中新增 4個 div 分別為 header, sidebar, content, footer.

我們希望 siderbar 與 content 比例為 1:4 所以在 div.container 設定 grid-columns-template: 1fr 4fr; (這裡的 fr 是 fraction)

不過因為 header 與 footer 都是全寬, 所以需要指定為 column 的起始位置, 所以加上 grid-column: 1/3; (這裡是指從 line 1 ~ line 3, 因為共兩欄, 所以會有三條縱線)

來看看 example 吧: https://codepen.io/timhuang/pen/xxdayNW

目前的 modern browser 都可以支援, 可以參考 caniuse 資料:

https://caniuse.com/?search=grid-column

繼續閱讀:

https://dev.to/cenacr007_harsh/complete-introduction-to-css-grid-2ffh

標籤 css, grid

Javascript

台灣寺廟地圖

文章作者作者: tim
文章發佈日期 2021-07-12
在〈台灣寺廟地圖〉中有 1 則留言

想做個台灣的寺廟地圖, 我們先來找政府 opendata 資料, 可以看到在這裡有:

https://data.gov.tw/dataset/8203

內容為全國宗教資訊系統資料-寺廟

資料只有一種格式, 就是 XML, 連結在此:

https://data.moi.gov.tw/MoiOD/System/DownloadFile.aspx?DATA=78CA6206-2E8C-4688-AB54-925330B0784B

不過會被重導至一個拿不到資料的連結:

閱讀全文

標籤 google maps, open data, table, Taiwan, temple

程式技術

因為url過長而導致破版的調整方式

由於在現行 css 預設結構下, url 不會主動斷行, 也就是有時過長的 url 會導致破版或出版的狀況.

如何解決這個問題, 可以利用 css 的手法來調整, 利用以下參數:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

參考資料: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

標籤 broken, css, line-break

PHP

[PHP]使用file_get_content來進行post request

文章作者作者: tim
文章發佈日期 2021-02-04
在〈[PHP]使用file_get_content來進行post request〉中尚無留言

在 php 程式中, 使用 curl 來進行 web request 是常用的方式, 不過由於在 https://repl.it/ 這個服務中, php webserver 並未安裝 curl, 所以需要改用 file_get_content()這個函數來進行 web request, 然而若為一般的 get request, 直接將網址傳入即可, 但若需要進行 post request 要如何操作呢?

這時會用到一個 http context options:

https://www.php.net/manual/en/context.http.php

範例程式如下:

<?php

$postdata = http_build_query(
    array(
        'var1' => 'some content',
        'var2' => 'doh'
    )
);

$opts = array('http' =>
    array(
        'method'  => 'POST',
        'header'  => 'Content-Type: application/x-www-form-urlencoded',
        'content' => $postdata
    )
);

$context  = stream_context_create($opts);

$result = file_get_contents('http://example.com/submit.php', false, $context);

?>

也就是利用了 http context options 來組合出要傳遞的參數. 如此一來便能很快速地應用在僅有 file_get_contents() 環境而沒有 curl 的 php webserver 環境來進行 post request.

參考資料:

https://stackoverflow.com/questions/2445276/how-to-post-data-in-php-using-file-get-contents

https://www.php.net/manual/en/context.http.php