Google Sitesãªã©ã§èªåããã䜿ã£ãŠãGoogleã¹ãã¬ããã·ãŒã飿ºã®ãªã³ã¯éäœæã¹ã¯ãªããã§ããã¹ãã¬ããã·ãŒãã«ãããŒã£ãšããŒã¿ãå ¥åããã ãã§ã䜿ãåæã®è¯ããªã³ã¯éãäœãäºãå¯èœã§ããèªåãäž»ã«äœ¿ã£ãŠããã®ã¯ãã€ã³ãã©ã§äœ¿ããªã³ã¯éã§ãã£ãããGoogleã¢ã«ãŠã³ãçºè¡è äžèЧã瀟å ã®åèè³æããªã¹ãã¢ãããªã©ãªã©ã
ç»é¢ã¯ãjQuery DataTablesãšããã©ã€ãã©ãªãå©çšããŠããŸãã䜿çšããã«åœãã£ãŠã¯äºåã®ã»ããã¢ãããšæ³šæç¹ããããŸããã¹ãã¬ããã·ãŒãããŸãã¯ã³ããŒããŠãã䜿çšããŠäžããã
ç®æ¬¡
䜿çšãããã¡ã€ã«
ãµã³ãã«
æèŒãããŠããæ©èœ
ãã®ã¹ã¯ãªããã¯ããã€ãã®ç°¡åãªæ©èœãæèŒãããŠããŸãã
- jQuery DataTablesãçšãããªã³ã¯é衚瀺æ©èœ
- äœæéäžã§ãã¬ãã¥ãŒç¢ºèªããæ©èœ
- ãµã€ãããŒããããŒã¿ã远å ããæ©èœ
- Google Pickerã䜿ã£ããã¡ã€ã«ã»ãã©ã«ãéžææ©èœ
ã»ããã¢ãã
ãã®ã¹ã¯ãªããã¯ã»ããã¢ãããå¿ èŠã§ãããŸãããŠã§ãã¢ããªã±ãŒã·ã§ã³ã§ãã®ã§ãã¹ã¯ãªãããšãã£ã¿ããå ¬éäœæ¥ãå¿ èŠã§ãã®ã§ããæ³šæäžããã
ã»ããã¢ããæ©èœ
ã¹ãã¬ããã·ãŒããã³ããŒãããéããŸããã¡ãã¥ãŒã«ããªã³ã¯éäœæããšããé ç®ã衚瀺ãããŸãããã®äžã«ãããã»ããã¢ããããå®è¡ããŸããããããã¯ããã®ã¹ãã¬ããã·ãŒãã®IDãååŸããŠæ ŒçŽããŠãããŸãããããè¡ããªããšããŒã¿ãæ£ããååŸãããããªã³ã¯éã«ããŒã¿ã衚瀺ãããŸãããå¿ ãå®è¡ããŸãããã
ãã¬ãã¥ãŒæ©èœ
ããŒã¿ãäœæåŸã«ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã§ã©ã衚瀺ããããïŒãã¹ãã¬ããã·ãŒãäžã§ç¢ºèªã§ããŸããããªã³ã¯éäœæããšããé ç®ã®äžã«ããããã¬ãã¥ãŒããå®è¡ããŠã¿ãŠãã ãããHTMLã§äœæããããã€ã¢ãã°ãåºãŠããŸãã
å³ïŒã¹ãã¬ããã·ãŒãäžã§ç¢ºèªã§ããŸãã
ããŒã¿äœæ
æå ¥åã§ããã¡ããäœæããäºãåºæ¥ãŸãããããããã©ã€ãã®ãã¡ã€ã«ããã©ã«ããªã©ãç»é²ããæãåé¡ãå ¥åããã®ã«ãå šãŠæå ¥åã¯äœããšäžäŸ¿ã§ããæ¬æ©èœã䜿ãããšã§ããã£ããããããŒã¿ãã¹ãã¬ããã·ãŒãäžã«èšè¿°ããäºãå¯èœã§ããã¡ãã¥ãŒã®ãªã³ã¯éäœæã®äžã«ãããããŒã¿äœæããã¯ãªãã¯ããäºã§ãµã€ãããŒã®åœ¢åŒã§è¡šç€ºãããŸãã
â»äœããã©ã€ãããéžææ©èœã¯ãããããããŒããŒãå ¥ããªããã°äœ¿çšåºæ¥ãŸãã
å³ïŒãµã€ãããŒããäœæããæè»œ
ãããžã§ã¯ããç§»å
ããããããŒããŒãå ¥ãã
ããŒã¿äœæã«æŒããŠãããããããŒããŒã®å ¥åããªããã°ããã©ã€ãããéžæã®æ©èœã䜿ããŸãããå ¥ããŠããã°Google Pickerã䜿ã£ãŠãã©ã€ããããã¡ã€ã«ãéžæããäºãå¯èœã«ãªããŸãããã¡ãã®ãšã³ããªãŒãåèã«ããŠãGoogle Picker APIãæå¹ã«ããèªèšŒæ å ±äœæåŸãAPIããŒãå ¥æããç»é²ããŠãã ããã
ãŠã§ãã¢ããªã±ãŒã·ã§ã³ãšããŠå ¬é
ãããŸã§ã»ããã¢ãããå®äºããããææã«ä»¥äžã®æé ã§ãŠã§ãã¢ããªã±ãŒã·ã§ã³ãšããŠå ¬éããŠãã ãããå ¬éããããšã§ããµã³ãã«ããŒãžã®ããã«ã¢ããªãšããŠå©çšã§ããããã«ãªããŸãããã®æã®ææãdevã§ã¯ãªããexecã«ãªã£ãŠãå ¬éçšURLãGoogle Sitesã«åã蟌ãã ãããäºã§ããªã³ã¯éãšããŠæŽ»çšããäºãåºæ¥ãããã«ãªããŸãã
- ã¹ã¯ãªãããšãã£ã¿ã«å ¥ã
- ã¡ãã¥ãŒãããå ¬éãâããŠã§ãã¢ããªã±ãŒã·ã§ã³ãšããŠå°å ¥ããã¯ãªãã¯
- 次ã®ãŠãŒã¶ãŒãšããŠã¢ããªã±ãŒã·ã§ã³ãå®è¡ãèšå®ãéåžžã¯èªåã§OK.
- ã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ã§ãããŠãŒã¶ãèšå®ã瀟å ãªããã¡ã€ã³å ã®ãŠãŒã¶ã®ã¿ã«ããã
- æŽæ°ãã¿ã³ãæŒãã
- çŸåšã®ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®URLãåºãŠæ¥ãã®ã§ããããæžãçããŠãã
- Google Sitesã«åã蟌ãã ããçŽæ¥ã¢ã¯ã»ã¹ããŠå©çšããã
- æ¹é ãããå Žåãå床ãããžã§ã¯ãããŒãžã§ã³ãå€ããŠãå ¬éäœæ¥ããªããšåæ ããªãã
å³ïŒããããããªããšäœ¿ããªã
泚æäºé
æ¬ã¢ããªãå©çšããå Žåãæ³šæäºé ããããŸããä»åå©çšããŠããjQuery DataTablesãé¢é£CSSãã¡ã€ã«é¢ä¿ã¯å šãŠèªåã®ãµãŒãå ã«èšçœ®ãããã®ãå©çšããŠããŸããäŒç€Ÿçã§ç¶ç¶ããŠå©çšããå Žåã«ã¯ããããã®CSSãJSã®ãã¡ã€ã«ãžã®åç §ã¯èªåã®ãµãŒãå ã«ãã¡ã€ã«ãèšçœ®ããŠæžãæããŠäžããã
äŸãã°ãã®ãµãŒããæ¶æ» ãããšäœ¿ããªããªããŸãã®ã§ãã©ã€ãã©ãªé¢ä¿ã¯æžãæããæšå¥šããŸããæžãæãããã察象ãšãªããã¡ã€ã«ã¯ä»¥äžã®éãã§ããã¹ã¯ãªãããšãã£ã¿ã§ãããžã§ã¯ããéããããå·Šãµã€ãããŒãã
- linkman.htmlå ã®<head>ã«ããofficeforest.orgãåç §ããŠããã¡ã€ã«é¡ã®URL
- javascript.htmlå ã®74è¡ç®ä»è¿ãofficeforest.orgãåç §ããŠããç»åãã¡ã€ã«ãžã®URL
æ¹èšå±¥æŽ
2018/4/23 Version 1.0
- æåã®ããŒãžã§ã³å ¬éãã·ãŒã飿ºããã¬ãã¥ãŒæ©èœä»ãã§ã¹ã¿ãŒã